Početna » šifriranje » 10 Nove značajke HTML-a 5.1 i kako ih koristiti

    10 Nove značajke HTML-a 5.1 i kako ih koristiti

    HTML specifikacija je dobila a glavni remont prije nekoliko tjedana kada je W3C objavio svoj nova preporuka za HTML 5.1 u studenom 2016. U svom nedavnom blogu, W3C je nazvao novo glavno izdanje Zlatni standard, kao HTML 5.1 nam pružiti nove načine kako možemo koristiti HTML za stvaranje fleksibilnijih web iskustava.

    U ovom članku ćemo pogledati nove značajke koje možete iskoristiti bez dodirivanja JavaScripta, međutim, poboljšanja JavaScript pozadine su također izvanredna, kao što možete vidjeti u službeni dnevnik promjena.

    Imajte na umu da trenutno svi preglednici ne podržavaju sve ove značajke, stoga ne zaboravite provjerite podršku preglednika prije nego što ih upotrijebite u proizvodnji. Ako ste zainteresirani za daljnji razvoj HTML standarda, možete pogledati i radni nacrt HTML-a 5.2.

    1. Definirajte višestruke resurse slike za odgovarajući dizajn

    U HTML-u 5.1 možete ga koristiti zajedno s oznakom srcset atribut odgovarajući odabir slike moguće. oznaka predstavlja spremnik slika koji omogućuje programerima da deklarirati različite resurse slike kako bi se prilagodili UAveličina prikaza, gustoća ekrana, vrsta zaslona i drugi parametri korišteni u. \ t odgovarajući dizajn.

    sama oznaka ne prikazuje ništa, ona funkcionira samo kao kontekst za više izvora slike. Morate prijaviti zadani resurs slike kao vrijednost src atribut i oznaku alternativni slikovni resursi ići unutar srcset atributi i elementi.

    Primjer koda:

    2. Prikažite ili sakrijte dodatne informacije

    Sa

    i možete dodajte proširene informacije na dio sadržaja. Dodatne informacije nije prikazano prema zadanim postavkama, ali ako su korisnici zainteresirani, oni imate mogućnost pogledati. U vašem kodu trebate Postaviti unutar oznake
    . Nakon što možete označiti dodajte dodatne informacije želite sakriti.

    Primjer koda:

     
     
    Poruka o pogrešci
     
     Nismo mogli dovršiti preuzimanje ovog videozapisa. 
     
    Naziv datoteke:
    yourfile.mp4
     
    Veličina datoteke:
    100 MB
     
    Trajanje:
    00:05:27

    Tako izgleda ovaj primjer koda u Firefoxu 50.0.2:

    3. Dodajte funkcionalnost kontekstnom izborniku preglednika

    Sa element i njegov type = "kontekst" atribut, možete dodajte prilagođenu funkcionalnost prema kontekstnom izborniku preglednika. Morate dodijeliti kao podređeni element

    označiti. iskaznica od element treba nose istu vrijednost kao i contextmenu atribut elementa kojem želimo dodati kontekstni izbornik (koji je

    tag može imaju tri različite vrste, „Kućicu”, „Naredba” (na koje morate dodati radnju s JavaScriptom) i radio. Moguće je dodati više od jedne stavke izbornika u kontekstni izbornik, međutim podrška za preglednik za ovu značajku je još nije jako dobro. Chrome 54 je ne podržava, a Firefox 50 omogućuje samo jedan dodatni kontekstni izbornik. U nastavku možete vidjeti kako primjerak koda radi u Firefox 50.

    4. Zaglavlja i podnožja gnijezda

    HTML 5.1 vam omogućuje zaglavlja i podnožja gnijezda ako je svaka razina sadržanim u sadržaju odjeljka. Bilješka u nastavku je snimka zaslona iz W3C dokumenata i savjetuje razvojne programere o ispravnom načinu gniježđenja zaglavlja i podnožja.

    Ova značajka može biti korisna ako želite dodati razrađena zaglavlja za elemente semantičkog dijeljenja, kao što su

    i
    . Primjer koda u nastavku stvara bočnu traku unutar zaglavlja