Anasayfa » Kodlama » HTML 5.1'in Yeni Özellikleri ve Nasıl Kullanılacağı IRL

    HTML 5.1'in Yeni Özellikleri ve Nasıl Kullanılacağı IRL

    HTML özelliği bir büyük revizyon W3C’nin yayınladığı birkaç hafta önce yeni HTML 5.1 önerisi Kasım 2016’da. Blog blog’unda W3C’nin yeni büyük sürüm Altın standardı, HTML 5.1 olarak daha esnek web deneyimleri oluşturmak için HTML'yi nasıl kullanabileceğimiz konusunda bize yeni yollar sunuyoruz..

    Bu yazıda, yararlanabileceğiniz yeni özelliklerine bir göz atacağız. JavaScript'e dokunmadan, Ancak, JavaScript arka planındaki gelişmeler de, web sitesinde gördüğünüz gibi dikkat çekicidir. resmi değişiklik günlüğü.

    Şu anda tüm tarayıcıların bu özelliklerin tümünü desteklemediğini unutmayın, bu nedenle tarayıcı desteğini kontrol et onları üretimde kullanmadan önce. Eğer ilgileniyorsanız HTML standardının daha da geliştirilmesi, HTML 5.2'nin çalışma taslağını da kontrol edebilirsiniz..

    1. Duyarlı tasarım için çoklu resim kaynaklarını tanımlayın

    HTML 5.1’de kullanabilirsiniz. ile birlikte etiket srcset yapmak için öznitelik duyarlı görüntü seçimi mümkün. etiket bir temsil eder görüntü kabı geliştiricilere izin verir farklı resim kaynakları bildirmek uyum sağlamak için UAgörünüm alanı boyutu, ekran piksel yoğunluğu, ekran türü ve kullanılan diğer parametreler duyarlı tasarım.

    etiketinin kendisi hiçbir şey göstermez, yalnızca çoklu resim kaynakları için bağlam. Bildirmeniz gerekir varsayılan resim kaynağı değeri olarak src özniteliği etiketi ve alternatif görüntü kaynakları içeri girmek srcset özellikleri ve elementler.

    Kod örneği:

    2. Ekstra bilgileri gösterin veya gizleyin

    İle

    ve Etiketler, yapabilirsiniz genişletilmiş bilgi ekle bir içerik parçasına Ek bilgi varsayılan olarak gösterilmez, Ancak kullanıcılar ilgileniyorsa, onlar bakma seçeneğine sahip olmak. Kodunuzda, yapmanız gereken yerleştir içinde etiketi
    . Sonra yapabileceğiniz etiketi ek bilgi ekle saklanmak istiyorsun.

    Kod örneği:

     
     
    Hata mesajı
     
     Bu videoyu indirmeyi bitiremedik. 
     
    Dosya adı:
    yourfile.mp4
     
    Dosya boyutu:
    100 MB
     
    Süre:
    00:05:27

    Bu kod örneği Firefox 50.0.2’deki gibi görünüyor:

    3. Tarayıcının içerik menüsüne işlevsellik ekleyin

    İle eleman ve onun tipi = "bağlam" özellik, yapabilirsiniz özel işlevsellik ekle -e tarayıcının içerik menüsü. Ataman gerekiyor alt öğesi olarak

    etiket. İD arasında eleman ihtiyacı aynı değeri taşıyan contextmenu nitelik bağlam menüsünü eklemek istediğimiz öğenin

    etiket olabilir üç farklı türü var, "Checkbox", "Komutu" (JavaScript ile bir işlem eklemeniz gereken) ve radyo. Bir bağlam menüsüne birden fazla menü öğesi eklemek mümkündür; tarayıcı desteği bu özellik için henüz çok iyi değil. Chrome 54 desteklemiyor ve Firefox 50 yalnızca bir ekstra içerik menüsünün varlığına izin veriyor. Aşağıda kod örneğinin Firefox 50’de nasıl çalıştığını görebilirsiniz..

    4. Yuva üstbilgileri ve altbilgileri

    HTML 5.1 size sağlar yuva başlıkları ve altbilgileri eğer her seviye bölüm içeriğinde yer alır. Aşağıdaki not W3C belgelerinin bir ekran görüntüsüdür ve geliştiricilere doğru başlık ve altbilgi yerleştirme hakkında tavsiyelerde bulunur.

    Bu özellik eklemek isterseniz faydalı olabilir. anlamsal bölümleme öğelerine yönelik ayrıntılı başlıklar, gibi

    ve
    . Aşağıdaki kod örneği başlığın içinde bir kenar çubuğu oluşturur.