Homepage » Coding » A HTML 5.1 új jellemzői és azok használata IRL

    A HTML 5.1 új jellemzői és azok használata IRL

    A HTML specifikáció kapott egy nagyjavítás néhány héttel ezelőtt, amikor a W3C közzétette új HTML 5.1 ajánlás A legutóbbi blogbejegyzésben a W3C az új nagy kiadást a aranystandard, mivel a HTML 5.1 új módszereket kínál számunkra, hogyan használhatjuk a HTML-t rugalmasabb webes élmények létrehozásához.

    Ebben a cikkben meg fogjuk nézni az új funkcióit, amiket felhasználhat a JavaScript megérintése nélkül, ugyanakkor a JavaScript háttér javítása is figyelemre méltó, ahogy azt a hivatalos változásnapló.

    Ne feledje, hogy jelenleg nem minden böngésző támogatja ezeket a funkciókat, ezért ne felejtsük el ellenőrizze a böngésző támogatását használat előtt. Ha érdekli a a HTML szabvány továbbfejlesztése, megtekintheti a HTML 5.2 munkatervét is.

    1. Adjon meg több képforrást az érzékeny tervezéshez

    A HTML 5.1-ben használható címkével együtt srcset attribútum érzékeny képválasztás lehetséges. A a tag egy képtartály amely lehetővé teszi a fejlesztők számára különböző képforrásokat deklarál annak érdekében, hogy alkalmazkodjanak a UAa nézetablak mérete, a képernyő képpont sűrűsége, a képernyő típusa és az egyéb reszponzív dizájn.

    A maga a címke sem mutat semmit, csak úgy működik kontextus a több képforrás számára. Be kell jelentenie a alapértelmezett képforrás az érték src attribútuma és a alternatív képforrások menjen a srcset a és elemek.

    Kódpélda:

    2. További információk megjelenítése vagy elrejtése

    A ... val

    és címkék bővített információk hozzáadása egy tartalomra. Az extra információ alapértelmezés szerint nem jelenik meg, de ha a felhasználók érdeklik, akkor lehetősége van megnézni. A kódodban feltételezned kell helyezze a címke belsejében
    . Azután címke adjon hozzá további információkat elrejteni akarsz.

    Kódpélda:

     
     
    Hiba üzenet
     
     Nem tudtuk befejezni a videó letöltését. 
     
    Fájl név:
    yourfile.mp4
     
    Fájl méret:
    100 MB
     
    Időtartam:
    00:05:27

    Így néz ki ez a kódpélda a Firefox 50.0.2-ben:

    3. Funkciók hozzáadása a böngésző helyi menüjéhez

    A ... val elem és annak type = "context" attribútum Egyéni funkciók hozzáadása hoz a böngésző helyi menüjében. Meg kell rendelnie mint a gyermek gyermek eleme

    címke. A id a elemre van szükség ugyanolyan értékű, mint a szövegkörnyezet tulajdonság annak a elemnek az elemét, amelyhez a helyi menüt szeretnénk hozzáadni (ami a

    A címke lehet három különböző típusú, "Checkbox", "parancs" (amelyhez hozzá kell adnia egy műveletet a JavaScript használatával), és rádió. Lehetőség van egynél több menüpont hozzáadására a helyi menüben, bár a böngésző támogatása ehhez a funkcióhoz még nem nagyon jó. A Chrome 54 nem támogatja, és a Firefox 50 csak egy extra kontextus menü jelenlétét teszi lehetővé. Az alábbiakban láthatjuk, hogyan működik a kódpéldány a Firefox 50-ben.

    4. Fészek fejlécek és láblécek

    A HTML 5.1 lehetővé teszi fészek fejlécek és láblécek ha minden szinten van a szekcionált tartalomban. Az alábbi feljegyzés egy képernyőkép a W3C dokumentumokból, és tanácsot ad a fejlesztőknek a fejléc és a lábléc fészkelésének helyes módjáról.

    Ez a funkció hasznos lehet, ha hozzá kíván adni kidolgozott fejlécek a szemantikai metszéselemekhez, mint például

    és
    . Az alábbi kódpéldány egy oldalsávot hoz létre a fejlécen belül, a