Should HTML get new controls like <accordion>, <tooltip>, <carousel>, <tabs>, or <typeahead> or leave that to JS frameworks?
— Nicole Sullivan (@stubbornella) October 7, 2022
Yukarıda bahsedildiği gibi web sayfalarında kullanılan bileşenleri HTML karşılamalı bence. Tabi burada şöyle bir şey var, CSS ile de bu bileşenin her yerine stil verebilelim. <progress> elementi aslında tam bu kapsamda bir element. Her projede bir şekilde ürettiğimiz bu bileşenin standart hali.
Bu makalede <progress> elementini inceleyeceğiz. <progress> elementi kullanıcıya bir işlemin ilerleme durumu hakkında bilgi vermek için kullanılan yapılardır.
Hiç bir özniteliği (attribute) yoksa kara şimşek efekti ile görünür.
Öznitelikler
<progress> elementi iki adet öznitelik alır.
- max özniteliği ilerleme çubuğunun en fazla alacağı değeri tanımlamamızı sağlıyor
- value özniteliği ilerleme çubuğunun mevcut değerini göstermemizi sağlıyor
Stil vermek
Eğer Chrome Developer Tools’da “Show user agent shadow DOM” özelliği açıksa <progress> elementini incelediğinizde aşağıdaki gibi bir görüntü ile karşılaşacaksınız. Aslında bu bizim bu elemanın hangi alanlarına müdahale edebileceğimizi de gösteriyor.
Webkit tabanlı tarayıcılarda (Safari, Chrome, Opera, Edge, Samsung Internet) iki adet sözde sınıfı var. ::-webkit-progress-bar ve ::-webkit-progress-value Mozilla tabanlı tarayıcı (Firefox) da ::-moz-progress-bar sözde sınıfı var.
Tabi tasarım olarak daha güzel sonuç veren örnekler de yapılabilir.
Örneğin kaynağı Kaynaklar kısmında farklı örnekler de var.
Sonuç
HTML’de artık sabitleşmiş bileşenlerin çözümlerinin olması çok güzel. Bu elementin benzeri <meter>elementi de var. <progress> ile <meter> arasındaki fark basitçe şöyle tanımlanabilir; <progress> dinamik <meter> statik sonuçları göstermek için kullanılıyor.
Kalın sağlıcakla.
Kaynaklar
- https://web.dev/building-a-loading-bar-component/
- https://nikitahl.com/progress-bar-css
- https://www.youtube.com/watch?v=rrf99Suqmd4
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
- https://codepen.io/team/css-tricks/pen/PNNQxm?editors=1100
- https://codepen.io/alexdevp/pen/JXRWrJ
- https://codepen.io/arendon/pen/kYeGep