Kaydol

Merhaba Sevgili Floodlar.com Kullanıcısı, Web sitemizde geçirdiğiniz zaman ve bu büyüleyici flood evrenine katılımınız için teşekkür ederiz. Floodların geniş dünyasıyla dolu deneyiminizi daha fazla keşfetmek için, web sitemizi sınırsız olarak kullanabilmeniz adına giriş yapmanız gerekmektedir.

Oturum aç

Merhaba Floodlar.com Kullanıcısı, İlk üç sayfayı tamamladınız, tebrikler! Ancak, floodların devamını görmek ve daha fazla interaktif deneyim yaşamak için giriş yapmanız gerekiyor. Hesabınız yoksa, hızlıca oluşturabilirsiniz. Sınırsız floodlar ve etkileşimler sizleri bekliyor. Giriş yapmayı unutmayın!

Şifremi hatırlamıyorum

Şifreniz mi unuttunuz? Endişelenmeyin! Lütfen kayıtlı e-posta adresinizi giriniz. Size bir bağlantı göndereceğiz ve bu link üzerinden yeni bir şifre oluşturabileceksiniz.

Fil Necati Masonlar Locası Subreddit Adı Nedir? Cevap: ( N31 )

Üzgünüz, flood girme izniniz yok, Flood girmek için giriş yapmalısınız.

Lütfen bu Floodun neden bildirilmesi gerektiğini düşündüğünüzü kısaca açıklayın.

Lütfen bu cevabın neden bildirilmesi gerektiğini kısaca açıklayın.

Lütfen bu kullanıcının neden rapor edilmesi gerektiğini düşündüğünüzü kısaca açıklayın.

Mobil Uygulamada Açın

Güncel Floodlar En sonuncu Nesne

Yükleme çubuğu bileşeni oluşturma

Yükleme çubuğu bileşeni oluşturma

Bu gönderide, renk uyarlamalı ve erişilebilir bir yükleme çubuğunun nasıl oluşturulacağı konusundaki düşüncemi paylaşmak istiyorum. &LTprogress> eleman. Demoyu deneyin Ve kaynağı görüntüle!

Açık ve koyu, belirsiz, artan ve tamamlama Chrome’da gösterildi.

Videoyu tercih ederseniz, işte bu gönderinin bir YouTube versiyonu:

genel bakış #

bu &LTprogress> eleman, kullanıcılara tamamlama hakkında görsel ve sesli geri bildirim sağlar. Bu görsel geri bildirim, bir formda ilerleme, indirme veya yükleme bilgilerinin görüntülenmesi ve hatta ilerleme miktarının bilinmemesine rağmen çalışmanın hala aktif olduğunu gösterme gibi senaryolar için değerlidir.

Bu GUI Mücadelesi mevcut HTML ile çalıştı &LTprogress> Erişilebilirlik için harcanan çabadan tasarruf etmek için öğe. Renkler ve düzenler, bileşeni modernize etmek ve tasarım sistemlerine daha iyi uymasını sağlamak için yerleşik öğe için özelleştirmenin sınırlarını zorluyor.

Firefox, Safari, iOS Safari, Chrome ve Android Chrome’da açık ve koyu şemalarda gösterilen demo.

işaretleme #

sarmayı seçtim &LTprogress> eleman bir &LTlabel> böylece atlayabilirim örtük bir ilişki lehine açık ilişki nitelikleri. Ayrıca yükleme durumundan etkilenen bir üst öğeyi de etiketledim, böylece ekran okuyucu teknolojiler bu bilgiyi bir kullanıcıya geri iletebilir.

progress>&LT/progress>

yoksa valueo zaman öğenin ilerleme durumu belirsiz. bu max öznitelik varsayılan olarak 1’dir, dolayısıyla ilerleme 0 ile 1 arasındadır. Ayar max örneğin 100’e kadar, aralığı 0-100 olarak ayarlar. İlerleme değerlerini %0,5 veya %50’ye çevirerek 0 ve 1 sınırları içinde kalmayı seçtim.

Etikete sarılmış ilerleme #

Örtük bir ilişkide, bir ilerleme öğesi şuna benzer bir etiketle sarılır:

label>Loading progressprogress>&LT/progress>&LT/label>

Demomda şu etiketi eklemeyi seçtim: yalnızca ekran okuyucular. Bu, etiket metnini bir &LTspan> ve etkili bir şekilde ekran dışında olması için ona bazı stiller uygulamak:

label>
span class="sr-only">Loading progress&LT/span>
progress>&LT/progress>
&LT/label>

Aşağıdaki eşlik eden CSS ile WebAIM:

.sr-only {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}

Yükleme ilerlemesinden etkilenen alan #

Sağlıklı bir görüşünüz varsa, bir ilerleme göstergesini ilgili öğeler ve sayfa alanlarıyla ilişkilendirmek kolay olabilir, ancak görme engelli kullanıcılar için bu o kadar net değildir. atayarak bunu iyileştirin. aria-busy yükleme tamamlandığında değişecek olan en üstteki öğeye öznitelik. Ayrıca ilerleme ve yükleme bölgesi arasındaki ilişkiyi şu şekilde belirtin: aria-describedby.

main id="loading-zone" aria-busy="true">

progress aria-describedby="loading-zone">&LT/progress>
&LT/main>

JavaScript’ten geçiş yap aria-busy ile true görev başında ve false bir kez bitti.

Aria özellik eklemeleri #

örtük rolü bir &LTprogress> eleman progressbar, Bu örtük role sahip olmayan tarayıcılar için açık hale getirdim. özelliği de ekledim indeterminate öğeyi açıkça bilinmeyen bir duruma sokmak, öğenin hiçbir şeye sahip olmadığını gözlemlemekten daha açıktır. value ayarlamak.

label>
Loading
progress
indeterminate
role="progressbar"
aria-describedby="loading-zone"
tabindex="-1"
>
unknown&LT/progress>
&LT/label>

Kullanmak tabindex="-1" ilerleme öğesini JavaScript’ten odaklanabilir hale getirmek için. Bu, ekran okuyucu teknolojisi için önemlidir, çünkü ilerleme değiştikçe ilerleme odağını vermek kullanıcıya güncellenen ilerlemenin ne kadar ulaştığını bildirecektir.

stiller #

Stil söz konusu olduğunda ilerleme öğesi biraz aldatıcıdır. Yerleşik HTML öğelerinin, seçilmesi zor olabilen ve genellikle yalnızca sınırlı sayıda ayarlanacak özellik sunan özel gizli bölümleri vardır.

Düzen #

Düzen stilleri, ilerleme öğesinin boyutunda ve etiket konumunda biraz esneklik sağlamayı amaçlar. Yararlı ancak gerekli olmayan ek bir görsel işaret olabilecek özel bir tamamlanma durumu eklenir.

&LTprogress> Düzen #

Tasarımda ihtiyaç duyulan alanla birlikte küçülüp büyüyebilmesi için ilerleme öğesinin genişliğine dokunulmaz. Yerleşik stiller ayarlanarak çıkarılır appearance Ve border ile none. Bu, her tarayıcının kendi öğesi için kendi stilleri olduğundan, öğenin tarayıcılar arasında normalleştirilebilmesi için yapılır.

progress {
--_track-size: min(10px, 1ex);
--_radius: 1e3px;

/* reset */
appearance: none;
border: none;

position: relative;
height: var(--_track-size);
border-radius: var(--_radius);
overflow: hidden;
}

Değeri 1e3px için _radius kullanır bilimsel sayı gösterimi büyük bir sayıyı ifade etmek için border-radius her zaman yuvarlaktır. eşdeğerdir 1000px. Bunu kullanmayı seviyorum çünkü amacım onu ​​ayarlayıp unutabileceğim kadar büyük bir değer kullanmak (ve yazmak yazmaktan daha kısa) 1000px). Gerekirse daha da büyütmek de kolaydır: sadece 3’ü 4 olarak değiştirin, ardından 1e4px eşdeğerdir 10000px.

overflow: hidden kullanılmış ve tartışmalı bir tarz olmuştur. Geçmeye gerek kalmaması gibi birkaç şeyi kolaylaştırdı border-radius iz ve iz dolgu öğelerine kadar olan değerler; ama aynı zamanda ilerlemenin hiçbir çocuğunun elementin dışında yaşayamayacağı anlamına da geliyordu. Bu özel ilerleme öğesinde başka bir yineleme, overflow: hidden ve animasyonlar veya daha iyi tamamlama durumları için bazı fırsatlar açabilir.

İlerleme tamamlandı #

CSS seçicileri, maksimumu değerle karşılaştırarak burada zor işi yapar ve eşleşirlerse ilerleme tamamlanır. Tamamlandığında, bir sözde öğe oluşturulur ve ilerleme öğesinin sonuna eklenir, bu da tamamlama için güzel bir ek görsel ipucu sağlar.

progress:not([max])[value="1"]::before,
progress[max="100"][value="100"]::before
{
content: "✓";

position: absolute;
inset-block: 0;
inset-inline: auto 0;
display: flex;
align-items: center;
padding-inline-end: max(calc(var(--_track-size) / 4), 3px);

color: white;
font-size: calc(var(--_track-size) / 1.25);
}

Renk #

Tarayıcı, ilerleme öğesi için kendi renklerini getirir ve yalnızca bir CSS özelliği ile açık ve koyu renklere uyarlanabilir. Bu, bazı özel tarayıcıya özgü seçicilerle oluşturulabilir.

Açık ve koyu tarayıcı stilleri #

Sitenizi karanlık ve aydınlık bir uyarlamaya dahil etmek için &LTprogress> eleman, color-scheme tüm gereken bu.

progress {
color-scheme: light dark;
}

Tek özellik ilerleme rengiyle doldurulmuş #

renklendirmek için &LTprogress> eleman, kullanım accent-color.

progress {
accent-color: rebeccapurple;
}

Parçanın arka plan renginin açıktan karanlığa değiştiğine dikkat edin. accent-color. Tarayıcı uygun kontrastı sağlıyor: oldukça temiz.

Tamamen özel açık ve koyu renkler #

üzerinde iki özel özellik ayarlayın. &LTprogress> öğe, biri iz rengi ve diğeri iz ilerleme rengi içindir. İçinde TheComedicComedian/prefers-color-scheme" rel="noopener">prefers-color-scheme medya sorgusu, izleme için yeni renk değerleri sağlar ve ilerlemeyi izler.

progress {
--_track: hsl(228 100% 90%);
--_progress: hsl(228 100% 50%);
}

TheComedicComedian (prefers-color-scheme: dark) {
progress {
--_track: hsl(228 20% 30%);
--_progress: hsl(228 100% 75%);
}
}

Odak stilleri #

Daha önce, programatik olarak odaklanabilmesi için öğeye negatif bir sekme dizini vermiştik. Kullanmak :focus-visible daha akıllı odak halkası stilini seçmek için odağı özelleştirmek için. Bununla, bir fare tıklaması ve odak, odak halkasını göstermez, ancak klavye tıklamaları gösterir. bu Youtube videosu bu konuyu daha derinlemesine ele alıyor ve gözden geçirmeye değer.

progress:focus-visible {
outline-color: var(--_progress);
outline-offset: 5px;
}

Tarayıcılar arasında özel stiller #

Bir parçayı seçerek stilleri özelleştirin. &LTprogress> her tarayıcının gösterdiği öğe. İlerleme öğesini kullanmak tek bir etikettir, ancak CSS sözde seçicileri aracılığıyla gösterilen birkaç alt öğeden oluşur. Ayarı etkinleştirirseniz Chrome DevTools size şu öğeleri gösterir:

  1. Sayfanıza sağ tıklayın ve seçin Elemanı İncele DevTools’u getirmek için.
  2. DevTools penceresinin sağ üst köşesindeki Ayarlar dişli çarkına tıklayın.
  3. Altında Elementler başlığını bulun ve etkinleştirin Kullanıcı aracısı gölge DOM’sini göster onay kutusu.
Safari ve Chromium stilleri #

Safari ve Chromium gibi WebKit tabanlı tarayıcılar ::-webkit-progress-bar Ve ::-webkit-progress-value, bir CSS alt kümesinin kullanılmasına izin verir. şimdilik ayarla background-color daha önce oluşturulmuş, aydınlığa ve karanlığa uyum sağlayan özel özellikleri kullanarak.

/*  Safari/Chromium  */
progress[value]::-webkit-progress-bar {
background-color: var(--_track);
}

progress[value]::-webkit-progress-value {
background-color: var(--_progress);
}

Firefox stilleri #

Firefox yalnızca ::-moz-progress-bar sözde seçici &LTprogress> eleman. Bu aynı zamanda parçayı doğrudan renklendiremeyeceğimiz anlamına da gelir.

/*  Firefox  */
progress[value]::-moz-progress-bar {
background-color: var(--_progress);
}

Firefox’un bir parça rengi kümesine sahip olduğuna dikkat edin. accent-color iOS Safari’de ise açık mavi bir iz bulunur. Karanlık modda da aynı: Firefox’ta karanlık bir iz var ama bizim belirlediğimiz özel renkte değil ve Webkit tabanlı tarayıcılarda çalışıyor.

Animasyon #

Tarayıcıda yerleşik sözde seçicilerle çalışırken, genellikle sınırlı sayıda izin verilen CSS özelliği vardır.

Doldurulan parçanın animasyonu #

Bir geçiş ekleme inline-size ilerleme öğesinin bir kısmı Chromium için çalışır, ancak Safari için çalışmaz. Firefox ayrıca üzerinde bir geçiş özelliği kullanmaz. ::-moz-progress-bar.

/*  Chromium Only 😢  */
progress[value]::-webkit-progress-value {
background-color: var(--_progress);
transition: inline-size .25s ease-out;
}

animasyon :indeterminate durum #

Burada biraz daha yaratıcı oluyorum, böylece bir animasyon sunabiliyorum. Chromium için bir sözde öğe oluşturulur ve üç tarayıcının tümü için ileri geri hareket eden bir degrade uygulanır.

özel özellikler #

Özel özellikler birçok şey için harikadır, ancak favorilerimden biri, başka türlü sihirli görünen bir CSS değerine basitçe bir ad vermektir. Aşağıdaki oldukça karmaşık linear-gradient, ama güzel bir isimle. Amacı ve kullanım durumları açıkça anlaşılabilir.

progress {
--_indeterminate-track: linear-gradient(to right,
var(--_track) 45%,
var(--_progress) 0%,
var(--_progress) 55%,
var(--_track) 0%
);
--_indeterminate-track-size: 225% 100%;
--_indeterminate-track-animation: progress-loading 2s infinite ease;
}

Özel özellikler, kodun KURU kalmasına da yardımcı olacaktır, çünkü bir kez daha bu tarayıcıya özgü seçicileri birlikte gruplandıramayız.

Anahtar kareler #

Amaç, ileri geri giden sonsuz bir animasyondur. Başlangıç ​​ve bitiş anahtar kareleri CSS’de ayarlanacaktır. Yalnızca bir anahtar kare gereklidir, ortadaki anahtar kare 50%tekrar tekrar başladığı yere dönen bir animasyon yaratmak için!

@keyframes progress-loading {
50% {
background-position: left;
}
}

Her tarayıcıyı hedefleme #

Her tarayıcı, sözde öğelerin oluşturulmasına izin vermez. &LTprogress> öğenin kendisi veya ilerleme çubuğunu canlandırmaya izin verir. Parçanın animasyonunu sözde öğeden daha fazla tarayıcı destekliyor, bu yüzden temel olarak sözde öğelerden animasyon çubuklarına geçiyorum.

Krom sözde öğesi #

Chromium sözde öğeye izin verir: ::after elemanı örtecek bir konumla birlikte kullanılır. Belirsiz özel özellikler kullanılır ve ileri geri animasyon çok iyi çalışır.

progress:indeterminate::after {
content: "";
inset: 0;
position: absolute;
background: var(--_indeterminate-track);
background-size: var(--_indeterminate-track-size);
background-position: right;
animation: var(--_indeterminate-track-animation);
}

Safari ilerleme çubuğu #

Safari için, sözde öğe ilerleme çubuğuna özel özellikler ve bir animasyon uygulanır:

progress:indeterminate::-webkit-progress-bar {
background: var(--_indeterminate-track);
background-size: var(--_indeterminate-track-size);
background-position: right;
animation: var(--_indeterminate-track-animation);
}

Firefox ilerleme çubuğu #

Firefox için, sözde öğe ilerleme çubuğuna özel özellikler ve bir animasyon da uygulanır:

progress:indeterminate::-moz-progress-bar {
background: var(--_indeterminate-track);
background-size: var(--_indeterminate-track-size);
background-position: right;
animation: var(--_indeterminate-track-animation);
}

JavaScript #

JavaScript ile önemli bir rol oynar &LTprogress> eleman. Öğeye gönderilen değeri kontrol eder ve belgede ekran okuyucular için yeterli bilginin bulunmasını sağlar.

const state = {
val: null
}

Demo, ilerlemeyi kontrol etmek için düğmeler sunar; güncellerler state.val ve ardından güncellemek için bir işlev çağırın DOM.

document.querySelector('#complete').addEventListener('click', e => {
state.val = 1
setProgress()
})

setProgress() #

Bu işlev, UI/UX düzenlemesinin gerçekleştiği yerdir. oluşturarak başlayın setProgress() işlev. erişime sahip olduğu için hiçbir parametreye gerek yoktur. state nesne, ilerleme öğesi ve &LTmain> alan.

const setProgress = () => {

}

Yükleme durumunun ayarlanması &LTmain> alan #

İlerlemenin tamamlanıp tamamlanmadığına bağlı olarak ilgili &LTmain> öğenin güncellenmesi gerekiyor aria-busy bağlanmak:

const setProgress = () => {
zone.setAttribute('aria-busy', state.val 1)
}

Yükleme miktarı bilinmiyorsa özellikleri temizle #

Değer bilinmiyorsa veya ayarlanmamışsa, null bu kullanımda, kaldır value Ve aria-valuenow Öznitellikler. Bu dönüşecek &LTprogress> belirsiz.

const setProgress = () => {
zone.setAttribute('aria-busy', state.val 1)

if (state.val === null) {
progress.removeAttribute('aria-valuenow')
progress.removeAttribute('value')
progress.focus()
return
}
}

JavaScript ondalık matematik sorunlarını düzeltin #

İlerleme varsayılan maksimumu 1’e bağlı kalmayı seçtiğim için, demo artırma ve azaltma işlevleri ondalık matematik kullanır. JavaScript ve diğer diller, bu konuda her zaman harika değiller. İşte bir roundDecimals() matematik sonucundaki fazlalığı kesecek işlev:

const roundDecimals = (val, places) =>
+(Math.round(val + "e+" + places) + "e-" + places)

Değeri, sunulabilmesi ve okunabilir olması için yuvarlayın:

const setProgress = () => {
zone.setAttribute('aria-busy', state.val 1)

if (state.val === null) {
progress.removeAttribute('aria-valuenow')
progress.removeAttribute('value')
progress.focus()
return
}

const val = roundDecimals(state.val, 2)
const valPercent = val * 100 + "%"
}

Ekran okuyucular ve tarayıcı durumu için değeri ayarlayın #

Değer, DOM’da üç konumda kullanılır:

  1. bu &LTprogress> elementler value bağlanmak.
  2. bu aria-valuenow bağlanmak.
  3. bu &LTprogress> iç metin içeriği.

const setProgress = () => {
zone.setAttribute('aria-busy', state.val 1)

if (state.val === null) {
progress.removeAttribute('aria-valuenow')
progress.removeAttribute('value')
progress.focus()
return
}

const val = roundDecimals(state.val, 2)
const valPercent = val * 100 + "%"

progress.value = val
progress.setAttribute('aria-valuenow', valPercent)
progress.innerText = valPercent
}

İlerleme odağı vermek #

Güncellenen değerlerle, gören kullanıcılar ilerleme değişikliğini görecekler, ancak ekran okuyucu kullanıcılarına değişiklik duyurusu henüz verilmedi. odak &LTprogress> öğe ve tarayıcı güncellemeyi duyurur!

const setProgress = () => {
zone.setAttribute('aria-busy', state.val 1)

if (state.val === null) {
progress.removeAttribute('aria-valuenow')
progress.removeAttribute('value')
progress.focus()
return
}

const val = roundDecimals(state.val, 2)
const valPercent = val * 100 + "%"

progress.value = val
progress.setAttribute('aria-valuenow', valPercent)
progress.innerText = valPercent

progress.focus()
}

Çözüm #

Artık nasıl yaptığımı bildiğine göre, nasıl yapardın‽ 🙂

Bir şans daha verilirse kesinlikle yapmak istediğim birkaç değişiklik var. Bence mevcut bileşeni temizlemek için yer var ve bir tane denemek ve oluşturmak için yer var. &LTprogress> elemanın sözde sınıf stil sınırlamaları. Keşfetmeye değer!

Yaklaşımlarımızı çeşitlendirelim ve web üzerinde oluşturmanın tüm yollarını öğrenelim.

Bir demo oluşturun, beni tweetle bağlantılar ve onu aşağıdaki topluluk remiksleri bölümüne ekleyeceğim!

Topluluk remiksleri #

İlgili Mesajlar

Yorum eklemek için giriş yapmalısınız.