HTML

progress elementini stillendirelim

Fatih Hayrioğlu

30 Ara 2022 — 2 min read

Should HTML get new controls like <accordion>, <tooltip>, <carousel>, <tabs>, or <typeahead> or leave that to JS frameworks?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

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

Bir önceki yazımda bahsettiğim gibi CSS'in yeni özelliklerinin bazıları çığır açan özellikler, bazıları kulllanıcı deneyimini iyileştirme yönünde özellikler bazıları da lightdark() fonksiyonu gibi yazım kolaylığı sağlayan özellikler. lightdark() fonksiyonu mevcut uyumlu web yazımındaki büyük sorun olan aşağıdaki kullanımı daha anlaşılır ve düzenli hale getirmeye yarıyor. :root { color-scheme: light

Tarayıcı geliştirici araçlarında yakınlaştırma ve uzaklaştırma yapmak

Yaşlandıkça böyle ihtiyaçlar doğuyor galiba. Belki ihtiyacı olan olur diye buraya not edeyim. Chrome Dev Tools gibi araçlarda başlangıçtaki görünüm küçük kalabiliyor. Benim için küçük mesela :) Yazı boyutlarını büyütmek için Cmd + + and Cmd + - (Windows'ta Cmd yerine Ctrl kullanın). Ancak bu kısayol İngilizce klavye için Türkçe klavyelerde bunu

field-sizing özelliği

CSS'in yeni özellikleri bazen çığır açan nitelikte (anchor positioning, :has() seçicisi, vb.) olurken bazen yazıma yardımcı kurallar (iç içe yazım, @property) oluyor bazen de genel kullanılan kullanıcı deneyimi arttırıcı özellikleri oluyor. field-size özelliği genel kullanıcı deneyimini arttırıcı bir özellik. field-size özelliği genelde javascript ile çözdüğümüz bir ihtiyacı karşılıyor.

HTML Akordiyon bileşeni

Uzun içerikli yapıları daha az yer kaplayacak şekilde ve daha işlevsel kullanmak için genelde akordiyon yapılarını kullanırız. Uzun süredir kullanıla gelen bu bileşenlerin genelde işlevselliğini javascript ile yapıyoruz. HTML ve CSS ile yapılan akordiyonlar için son günlerde gelen name attribute ile işlevsellik yönünden eksik kalan kısım tamamlandı. name attribute tam