Stil uygulanmış ilerleme çubuğu oluşturma

Web özellikleri: accent-color <progress> revert-rule Kapsayıcı sorguları (boyut) Bağımsız dönüştürme özellikleri

<progress> öğesi, bir görevin tamamlanma durumunu (ör. bilgi indirme veya yükleme ya da çok adımlı bir işlemin bir bölümünü tamamlama) göstermenin semantik yoludur. Ekran okuyucular örtük bir role="progressbar" değerine sahip olduğundan ve değerleri duyurabildiğinden yerel öğenin kullanılması erişilebilirliğe yardımcı olur.

Bu kılavuzda, stil özelleştirmeleriyle tamamen stillendirilmiş bir yatay ilerleme çubuğu uygulanmaktadır.

İlerleme çubuğu mu yoksa ilerleme halkası mı?

  • Alan kısıtlıysa veya kare en boy oranı tercih ediliyorsa dairesel ilerleme çubuğu (ilerleme halkası) kullanabilirsiniz: İlerleme halkası
  • Çoğu belirsiz ilerleme senaryosu için döner simgeleri tercih edin (Yükleme döner simgesi). Belirsiz durum geçiciyse ve yakında belirli bir ilerleme çubuğuyla değiştirilecekse belirsiz ilerleme çubukları kullanın (ör.ilerleme yüzdesi gösterilmeden önce yüklemeyle ilgili meta veriler beklenirken).

Brüt kar

  1. Yerel bir <progress> öğesi kullanın: Bu öğe, yerleşik erişilebilirlik ve platformla tutarlı davranış sağlar.
  2. Varsayılan 0-1 ölçeğinden farklı bir ölçek gerekiyorsa max kullanın.
  3. Belirli bir ilerleme değeri için value özelliğini ayarlayın. Belirsiz bir durum için (ör. daha somut geri bildirimler başlamadan önce) value öğesini atlayın.
  4. İlerleme öğesini bir etiketle ilişkilendirmek için <label for="...">, aria-labelledby veya aria-label kullanın.

Ne tür bir özelleştirme gerekiyor?

Sınırlı stil için şu özellikler yeterlidir:

  • İlerleme çubuğunun rengini değiştirmek için accent-color
  • İlerleme çubuğunun genişliğini değiştirmek için width / inline-size
  • height/block-size tutarsız şekilde uygulanıyor. Önce test edin.
  • Dikey çubuklar için writing-mode: vertical-lr.
  • Boyamadan sonra uygulanan efektler: opacity, filter, clip-path, maskeler, dönüşümler, box-shadow vb.

Sınırlı stil yeterliyse sonraki bölümü atlayın.

UYARI: Belirli özellikler (ör. border-radius, background, border) varsayılan ilerleme çubuğu stilini sessizce devre dışı bırakır. Yukarıdaki özelliklerin dışında bir stil oluşturmanız gerekiyorsa bir sonraki bölümde açıklandığı gibi tamamen özel bir stil uygulamanız gerekir. "İşe yarayabilir" diye daha kapsamlı bir stil uygulamayın.

Tamamen özel stil

1. Temel ayarlar

  • ZORUNLU: Özel stil oluşturmayı etkinleştirmek için appearance: none kullanın.
  • UA sınırlarını border: 0 solid ile sıfırlayın
  • Etkin çubuğu öğenin kenar yarıçapına kırpmak için overflow: clip kullanın veya çubuğa aynı border-radius değerini uygulayın. Çubukta, gölge DOM'daki öğelerin belirli yapısına bağlı olan border-radius: inherit kullanmayın.
progress {
  /* Reset default browser styles */
  appearance: none;
  border: 0 solid;
  /* Clip bar to element’s border-radius  */
  overflow: clip;
}

2. Stil

  • Parçayı progress öğesinin kendisinde biçimlendirin.
  • İlerleme çubuğunu hedeflemek için tarayıcıya yönelik uygun sözde öğeyi kullanın: WebKit/Blink için ::-webkit-progress-value ve Firefox için ::-moz-progress-bar.
  • ZORUNLU: -webkit- ve -moz- sözde öğelerini aynı kuralda gruplandırmayın. Kural geçersiz sayılır ve yok sayılır. :is() ve :where(), sözde öğeleri desteklemediği için burada yardımcı olmaz.
  • Tarayıcı hedefli her sözde öğe tam olarak bir kez görünmelidir. Duruma özgü özelleştirmeler (belirsiz segment boyutu ve animasyon gibi), progress öğesinin kendisinde ayarlanan özel özellikler aracılığıyla yönlendirilmelidir.
  • İsteğe bağlı: Dolguda inline-size geçişi, böylece belirli değer değişiklikleri atlamak yerine animasyonlu olur. Firefox, dolguyu düzende boyutlandırır ve yoksayar. Bu durum zararsızdır.
progress {
  --progress-bar-radius: 1e5px;
  border-radius: var(--progress-bar-radius);
  /* Apply color for custom progress track (background) */
  background: var(--progress-bar-track, var(--color-neutral-90));
  /* Subtle depth on the empty part of the track */
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
}

/* Let <progress> styling show through */
progress::-webkit-progress-bar {
  background: transparent;
}

/* Webkit, Chrome */
progress::-webkit-progress-value {
  background: var(--progress-bar-fill, var(--accent-color));
  border-radius: var(--progress-bar-radius);
  transition: inline-size 0.3s;
}

/* Firefox */
progress::-moz-progress-bar {
  background: var(--progress-bar-fill, var(--accent-color));
  border-radius: var(--progress-bar-radius);
  transition: inline-size 0.3s;
}

3. Belirsiz durum stili

Belirsiz durum için özel animasyon ekleme: Dolgu sözde öğesini kısa bir segmente dönüştürün ve parça boyunca kaydırın.

  • Dolgunun kendisini şekillendirin; progress üzerinde arka plan olarak yeniden oluşturmayın.
  • Belirsiz dolgu yalnızca animasyonuyla mevcuttur: Ana kareler, uzunluğunu gerçek bir inline-size ile ayarlar (bu, Chromium'un UA satır içi inline-size değerini geçersiz kılar) ve translate ile taşır. Uzunluk için scale kullanmayın. Bu, dolguya boyanan tüm desenleri bozar.
  • translate yüzdeleri, dolgunun kendi genişliğine göre hesaplanır. Bu nedenle, konumları parça birimleri cinsinden ifade edin: progress öğesini satır içi boyutlu bir kapsayıcı yapın ve animasyon karelerinde cqi kullanın. Chromium'un dolguyu sağdan sola dillerde de fiziksel olarak sola yerleştirmesi için from, to içine margin-right: auto ekleyin.
  • Dolgu öğesini taşımak için kenar boşluklarını değil, dönüşümleri kullanın.
    • Dönüşümler, animasyonu birleştiricide tutar (inline-size de animasyonlu değilse)
    • Kenar boşlukları, iki farklı nedenden dolayı RTL'de bozulur:
    • Firefox, belirsiz dolguyu yalnızca fiziksel sol kenar boşluğunu kullanarak konumlandırır. Bu nedenle, margin-inline-start özelliğinin sağdan sola dillerde hiçbir etkisi yoktur ve dolgu hiçbir zaman hareket etmez.
    • Dolgu alanını normal bir blok olarak yerleştiren Chromium ve WebKit'te, bir kenar boşluğu dolgu alanını parçanın sonuna kadar ittiğinde kenar boşlukları parçadan daha fazla olur. Standart CSS, sağdan sola dillerde margin-left değerini yoksayarak bu sorunu çözer. Böylece segment, kenardan kaymak yerine kenara atlar.
    • translate, düzenden sonra uygulandığı için iki sorun da geçerli değildir.
  • Sağdan sola dillerde hareketi yansıtmak için (Chrome'un yerel çubuğunda olduğu gibi) :dir(rtl) altındaki animasyonu tersine çevirin:
progress:dir(rtl) {
  --progress-bar-indeterminate-animation: progress-bar-indeterminate var(--progress-bar-indeterminate-animation-duration) infinite linear reverse;
}
  • Tüketicilerin :indeterminate hakkında bilgi sahibi olmadan geçersiz kılabilmesi için progress üzerinde herkese açık --progress-bar-indeterminate-* özelliklerini tanımlayın (adları zaten bunları eyaletle sınırlandırır).
  • Segment uzunluğunu değiştirmek için (ör.ön kenar öne geçer ve arka kenar yetişir) --progress-bar-indeterminate-animation öğesini iki eşzamanlı animasyona ayarlayın: Animasyon kareleri cqi (konum) içinde translate animasyonu oluşturan bir animasyon ve animasyon kareleri inline-size (uzunluk) animasyonu oluşturan bir animasyon. Böylece her biri kendi animasyon karelerini ve yumuşatmasını alır. Tek bir animasyon karesi listesinde her iki kenarı da şekillendirmeye ÇALIŞMAYIN. Animasyon karesi başına animation-timing-function, o animasyon karesindeki her özellik için geçerlidir.
  • --progress-bar-animation her iki durumda da geçerlidir ve belirli bir parıltı gibi efektler için kullanılabilir. revert-rule, birleştirilebilirliği en üst düzeye çıkarmak için yalnızca ayarlandığında geçersiz kılmak amacıyla kullanılır.
  • Belirsiz animasyonu hiçbir zaman devre dışı bırakmayın (animation: none, Chromium'da sıfır genişlikte bir dolgu bırakır). Hareketin azaltılması için videoyu yavaşlatın.
progress {
  /* Lets the fill position itself in track units (cqi) */
  container-type: inline-size;
  /* Segment length relative to the track */
  --progress-bar-indeterminate-size: 30%;
  --progress-bar-indeterminate-animation-duration: 1.5s;

  /* Respect prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    --progress-bar-indeterminate-animation-duration: 10s;
  }
}

progress:indeterminate {
  --progress-bar-animation: var(
      --progress-bar-indeterminate-animation,
      progress-bar-indeterminate var(--progress-bar-indeterminate-animation-duration) infinite linear
    );
}

/* Add to the existing pseudo-element rules */
progress::-webkit-progress-value {
  animation: var(--progress-bar-animation, revert-rule);
}

progress::-moz-progress-bar {
  animation: var(--progress-bar-animation, revert-rule);
}

/* Physical: left to right regardless of direction (reverse under :dir(rtl) to mirror). */
@keyframes progress-bar-indeterminate {
  from, to {
    inline-size: var(--progress-bar-indeterminate-size);
    /* Pin to the physical left; Chromium would otherwise lay the fill out at the inline start */
    margin-right: auto;
  }
  from { translate: -100%; } /* Own width: fully outside the left edge */
  to { translate: 100cqi; }  /* Track width: fully outside the right edge */
}

Erişilebilirlikle ilgili diğer hususlar

Yukarıda belirtilen kurallara ek olarak:

  • Odağı çalmadan tamamlandığını duyurun: <progress> üzerinde tabindex ayarlamayın veya .focus() çağrısı yapmayın. Etkileşimli olmadığından odağın buraya taşınması klavye kullanıcılarını rahatsız eder. Arka plan görevi tamamlandığında duyurmak için bir polite durum öğesini (role="status" veya aria-live="polite") güncelleyin.
  • <progress> içine yedek metin eklemeyin: <progress> içindeki metin, modern tarayıcılar tarafından yok sayılır ve yardımcı teknolojiler tarafından kullanılmaz.
  • Etiketsiz genel bir <div> üzerinde aria-busy + aria-describedby kullanmaktan kaçının. aria-busy, tutarsız ekran okuyucu desteğine sahiptir ve adsız bir <div> üzerindeki aria-describedby, rolü olmadan yardımcı teknolojiler tarafından yoksayılır. Bir bölgenin içeriği yüklenirken hazır değilse hidden veya aria-hidden="true" ile gizleyin.
  • Özel stiller eklerken ilerleme çubuğu ile parça arasında uygun kontrastı SAĞLAYIN.
  • Belirsiz durumu temsil etmek için alternatifleri değerlendirin: Diğer içeriklerle paralel olarak gösterilen belirsiz ilerleme çubuğu animasyonları, bazı kullanıcılar için dikkat dağıtıcı olabilir.

Yedek stratejiler

Vurgu rengi için yedekler ve tarayıcı desteği

accent-color özelliği, progresif geliştirmedir. Bu özelliği desteklemeyen tarayıcılar, özelliği yok sayar ve varsayılan kullanıcı arayüzü renklerini kullanır.

accent-color desteklenmiyorsa ve ilerleme çubuğunun stilini belirlemek gerekiyorsa ilerleme çubuğuna tercih edilen stili uygulamak için özelleştirilmiş stil yöntemini kullanın.

revert-rule için yedekler ve tarayıcı desteği

revert-rule desteklenmiyorsa animation: var(--progress-bar-animation, revert-rule), --progress-bar-animation ayarlanmadığında 0s süreli animation-name: revert-rule değerine geri döner. Bu, @keyframes revert-rule olmadığında zararsız bir işlem yapılmaması durumudur.