Úvodná » kódovanie » 10 nových funkcií HTML 5.1 & Ako ich používať IRL

    10 nových funkcií HTML 5.1 & Ako ich používať IRL

    Špecifikácia HTML má a hlavná generálna oprava pred niekoľkými týždňami, keď W3C zverejnila svoje nové odporúčanie HTML 5.1 v novembri 2016. Vo svojom nedávnom blogovom príspevku nazval W3C novou hlavnou verziou Zlatý štandard, ako HTML 5.1 nám poskytuje nové spôsoby, ako môžeme použiť HTML na vytvorenie flexibilnejších webových skúseností.

    V tomto článku sa pozrieme na nové funkcie, ktoré môžete využiť bez toho, aby ste sa dotkli jazyka JavaScript, ale zlepšenie pozadia JavaScript je tiež pozoruhodné, ako to vidíte v oficiálny denník zmien.

    Upozorňujeme, že v súčasnosti nie všetky prehliadače podporujú všetky tieto funkcie, takže nezabudnite skontrolujte podporu prehliadača predtým ako ich použijete vo výrobe. Ak vás zaujíma ďalší vývoj normy HTML, môžete si pozrieť aj pracovný návrh HTML 5.2.

    1. Definujte viacero zdrojov obrázkov pre rýchlu reakciu

    V HTML 5.1 môžete použiť značku spolu s srcset atribút urobiť citlivý výber obrázkov je to možné. značka predstavuje kontajner s obrázkami ktorý umožňuje vývojárom deklarovať rôzne zdroje obrazu s cieľom prispôsobiť sa UAveľkosť zobrazenia, hustota pixelov na obrazovke, typ obrazovky a ďalšie parametre použité v citlivý dizajn.

    samotná značka nezobrazuje nič, funguje len ako kontextu pre zdroje viacerých obrázkov. Musíte deklarovať predvolený zdroj obrázkov ako hodnota src atribút tag a alternatívne zdroje obrazu ísť do srcset atribúty a prvky.

    Príklad kódu:

    2. Zobraziť alebo skryť ďalšie informácie

    S

    a značky, môžete pridajte rozšírené informácie k obsahu. Ďalšie informácie sa predvolene nezobrazuje, ale ak majú záujem používatelia, oni máte možnosť pozrieť sa. Vo svojom kóde sa to máš umiestniť tag vnútri
    . Po značku môžete pridajte ďalšie informácie chcete skryť.

    Príklad kódu:

     
     
    Chybná správa
     
     Nemohli sme dokončiť sťahovanie tohto videa. 
     
    Názov súboru:
    yourfile.mp4
     
    Veľkosť súboru:
    100 MB
     
    doba trvania:
    00:05:27

    Takto vyzerá tento príklad kódu v programe Firefox 50.0.2:

    3. Pridajte funkčnosť do kontextového menu prehliadača

    S prvok a jeho type = "kontext" atribút, môžete pridať vlastné funkcie na kontextovej ponuky prehliadača. Musíte priradiť ako detský prvok

    tag. id z prvok potrebuje majú rovnakú hodnotu ako obsahové menu atribút elementu, ku ktorému chceme pridať kontextové menu do (čo je

    značka môže majú tri rôzne typy, "Checkbox", "Príkaz" (ku ktorému je potrebné pridať akciu pomocou jazyka JavaScript) a rádio. Do kontextového menu je možné pridať viac ako jednu položku menu, avšak podpora prehliadača pre túto funkciu je ešte nie je dobré. Chrome 54 túto podporu nepodporuje a Firefox 50 umožňuje iba prítomnosť jedného ďalšieho kontextového menu. Nižšie uvidíte, ako funguje príklad kódu vo Firefoxe 50.

    4. Záhlavie a päty hniezd

    HTML 5.1 vám umožňuje záhlavia a päty ak je každá úroveň obsiahnuté v sekcii obsahu. Nižšie uvedená poznámka je snímka obrazovky z dokumentov W3C a radí vývojárom o správnom spôsobe vloženia hlavičky a päty.

    Táto funkcia môže byť užitočná, ak chcete pridať prepracované záhlavia na sémantické oddeľovacie prvky, ako napr

    a
    . Nižšie uvedený príklad kódu vytvára bočný panel vo vnútri záhlavia