Koduleht » Kodeerimine » 10 uut funktsiooni HTML 5.1 ja kuidas neid kasutada

    10 uut funktsiooni HTML 5.1 ja kuidas neid kasutada

    HTML-spetsifikatsioon sai a peamine kapitaalremont paar nädalat tagasi, kui W3C avaldas selle uus HTML 5.1 soovitus novembris 2016. Oma hiljutises blogipostis nimetas W3C uut suurt väljaannet kuldne standart, kuna HTML 5.1 annab meile uusi viise, kuidas HTML-i kasutada paindlikumate veebikogemuste loomiseks.

    Selles artiklis vaatleme selle uusi funktsioone, mida saate kasutada ilma JavaScripti puudutamata, siiski on märkimisväärsed ka JavaScripti taustaparandused, nagu näete seda ametlik muutuste register.

    Pange tähele, et praegu ei toeta kõik brauserid kõiki neid funktsioone, nii et ärge unustage seda kontrollige brauseri tuge enne nende kasutamist tootmises. Kui olete huvitatud HTML-standardi edasiarendamine, saate vaadata ka HTML 5.2 tööprojekti.

    1. Määrake reageeriva disaini jaoks mitu kujutise ressurssi

    HTML 5.1-s saate kasutada sildi koos srcset atribuut tundlik pildivalik võimalik. The silt tähistab pildi konteiner mis võimaldab arendajatel deklareerida erinevaid kujutise ressursse kohanemiseks UAvaatepordi suurus, ekraani pikslite tihedus, ekraani tüüp ja muud kasutatavad parameetrid. \ t tundlik disain.

    The silt ise ei näita midagi, see toimib ainult konteksti. Sa pead kuulutama vaikekujutis väärtuseks src atribuut sildi ja alternatiivseid kujutise ressursse minna srcset atribuudid ja elemente.

    Koodi näide:

    2. Näita või peida lisateavet

    Koos

    ja sildid lisage laiendatud teave sisu juurde. Lisateave ei ole vaikimisi näidatud, aga kui kasutajad on huvitatud, siis nad on võimalus vaadata. Teie koodis peaksite seda tegema asetage sildi sees
    . Pärast silt, mida saate lisage täiendav teave soovite peita.

    Koodi näide:

     
     
    Veateade
     
     Me ei saanud selle video allalaadimist lõpetada. 
     
    Faili nimi:
    yourfile.mp4
     
    Faili suurus:
    100 MB
     
    Kestus:
    00:05:27

    Nii näeb see näide Firefox 50.0.2-s välja:

    3. Lisage brauseri kontekstimenüüsse funktsionaalsus

    Koos element ja selle tüüp = "kontekst" atribuuti lisage kohandatud funktsioone Euroopa brauseri kontekstimenüü. Peate määrama kui lapse element

    silt. The id selle element peab olema omavad sama väärtust kui kontekstimenüü atribuut selle elemendi kohta, millele me tahame lisada kontekstimenüü (mis on

    The tag on kolm erinevat tüüpi, "märkeruut", "käsk" (millele peate rakendusega JavaScript lisama) ja raadio. Kontekstimenüüsse on võimalik lisada rohkem kui üks menüüelement, kuid brauseri tugi selle funktsiooni jaoks on ei ole veel väga hea. Chrome 54 ei toeta seda ja Firefox 50 võimaldab ainult ühe ekstra kontekstimenüü olemasolu. Allpool on näha, kuidas koodi näide töötab Firefoxis 50.

    4. Pesade päised ja jalus

    HTML 5.1 võimaldab teil pesade päised ja jalus kui iga tase on jaotises sisalduv sisu. Allpool olev märkus on W3C dokumentide ekraanipilt ja annab arendajatele teavet päise ja jaluse pesemise õige tee kohta.

    See funktsioon võib olla kasulik, kui soovite seda lisada väljatöötatud päised semantiliste sektsioonielementide jaoks, nagu näiteks

    ja
    . Alltoodud koodi näide loob päise sees külgriba