Az Bilinen 2 HTML5 Öğesi
Meter ve Progress
Hem az bilinen hem de az kullanılan Html5 elemanlarından Meter ve Progress‘i kısaca inceleyelim ve örnek verelim.
Meter
Meter öğesi gösterge olarak kullanabiliyor. 10’da 2 gibi veya yüzde 60 gibi değerler ile bir bar üzerinde göstermemize yarıyor.
Örnek
10’da 2 göstermek istersek;<meter value="2" min="0" max="10">10'da 2</meter>
Kodu gayet kolay; value kısmına bir değer giriyoruz ve min ve max değerleri belirtiyoruz.
Bunu istersek 100’de 20 olarak da gösterebiliriz.
Ya da;
Yüzde 20 (%20) şeklinde göstermek istersek;
olarak da gösterebiliyoruz.<meter value="0.2">20%</meter>
Bu kullanım daha kısa ve kolay elbette.
Neyse hangisi kolayınıza geliyorsa onu kullanın işte.
Progress
Meter’e benzemesine rağmen bu aslında biraz farklı. Bir görevin ilerleme durumunu göstermesi bekleniyor. JavaScript kullanarak dinamik olarak bir görevin ilerleme durumunu göstermede kullanılabiliyor. Statik olarak kullanıldığında yukarıdaki örneklere benziyor, ancak.
Örnek
Görevin %20si bitirildiyse;
Görüldüğü gibi yukarıdaki örneklere benziyor ancak aynı değil. %20, 30,
40 … görevin ilerleme durumunu göstermek istercesine yeşil bar
kısmında bir hareket var. Bu kısım Firefox için. Diğer tarayıcılarda ise Progress yeşil renkte değil mavi olarak ön tanımlı görünmektedir.
Madem istenmiyor, durağan veriler için Progress öğesini kullanmayalım.
Öğeleri Şekillendirme
Meter ve Progress öğeleri CSS ile şekillendirmek, renkleri ile oynamak isterseniz How to use the Meter & Progress Elements bağlantısında örnekleri inceleyebilirsiniz.
Ayrıntılar ve Özet Öğelerini de merak ediyor olabilirsiniz. Onları da yazmıştık.
❰ SONRAKİ YAZI
Minecraft Kimya
ÖNCEKİ YAZI ❱
WordPress AMP Eklentisi Sayfaları da Desteklemeye Başladı