Domovská » Kódování » 10 nových funkcí HTML 5.1 & Jak je používat IRL

    10 nových funkcí HTML 5.1 & Jak je používat IRL

    Specifikace HTML dostala generální oprava před několika týdny, kdy W3C zveřejnila své nové HTML 5.1 doporučení v listopadu 2016. Ve svém nedávném blogu, W3C nazval nové hlavní vydání Zlatý standard, jako HTML 5.1 nám poskytuje nové způsoby, jak můžeme pomocí HTML vytvořit flexibilnější webové zážitky.

    V tomto článku se podíváme na jeho nové funkce, které můžete využít bez dotyku JavaScriptu, pozoruhodná jsou však i vylepšení pozadí JavaScriptu, jak to můžete vidět na stránce oficiální zápis změn.

    Všimněte si, že v současné době všechny prohlížeče nepodporují všechny tyto funkce, takže nezapomeňte zkontrolujte podporu prohlížeče před použitím ve výrobě. Máte-li zájem o další vývoj standardu HTML, můžete se také podívat na pracovní verzi HTML 5.2.

    1. Definujte více obrazových zdrojů pro citlivý design

    V HTML 5.1 můžete použít tag spolu s srcset atributu citlivý výběr obrazu možný. značka představuje kontejner který umožňuje vývojářům deklarovat různé zdroje obrazu aby se přizpůsobil UAvelikost zobrazení, hustota obrazových bodů obrazovky, typ obrazovky a další parametry používané v citlivý design.

    tag sám nezobrazuje nic, funguje pouze jako kontextu pro více zdrojů obrázku. Musíte deklarovat výchozí zdroj obrázku jako hodnota src atribut a alternativních obrazových zdrojů jít dovnitř srcset atributy a Prvky.

    Příklad kódu:

    2. Zobrazte nebo skryjte další informace

    S

    a tagy, můžete přidat rozšířené informace obsahu. Další informace není ve výchozím nastavení zobrazen, ale pokud mají uživatelé zájem, tak máte možnost se podívat. Ve vašem kódu byste měli umístete tag uvnitř
    . Po můžete přidejte další informace chcete skrýt.

    Příklad kódu:

     
     
    Chybové hlášení
     
     Toto video nelze dokončit. 
     
    Název souboru:
    yourfile.mp4
     
    Velikost souboru:
    100 MB
     
    Doba trvání:
    00:05:27

    Takto vypadá tento příklad kódu ve Firefoxu 50.0.2:

    3. Přidejte funkčnost do kontextového menu prohlížeče

    S a jeho type = "context" atribut, můžete přidat vlastní funkce na v kontextovém menu prohlížeče. Musíte přiřadit jako dítě prvek

    štítek. id z prvek potřebuje mají stejnou hodnotu jako kontextová nabídka atribut prvku, ke kterému chceme přidat kontextové menu (což je

    tag může mají tři různé typy, "zaškrtávací políčko", "příkaz" (ke kterému musíte přidat akci s JavaScriptem) a rádio. Do kontextového menu je možné přidat více než jednu položku menu podporu prohlížeče pro tuto funkci je ještě není moc dobrý. Chrome 54 ho nepodporuje a Firefox 50 umožňuje pouze jedno kontextové menu navíc. Níže vidíte, jak příklad kódu funguje ve Firefoxu 50.

    4. Záhlaví a zápatí hnízda

    HTML 5.1 vám umožňuje záhlaví a zápatí je-li každá úroveň obsahu. Níže uvedená poznámka je snímek z dokumentů W3C a radí vývojářům o správném způsobu vnoření záhlaví a zápatí.

    Tato funkce může být užitečná, pokud chcete přidat zpracované záhlaví k prvkům sémantického dělení, jako

    a
    . Níže uvedený příklad kódu vytvoří sidebar uvnitř záhlaví,