Pagina principala » Codificare » 10 noi caracteristici ale HTML 5.1 și modul de utilizare a acestora IRL

    10 noi caracteristici ale HTML 5.1 și modul de utilizare a acestora IRL

    Specificația HTML a revizia majoră cu câteva săptămâni în urmă, când W3C a publicat noua recomandare HTML 5.1 în noiembrie 2016. În ultimul său post blog, W3C a numit noua versiune majoră Standarde de aur, deoarece HTML 5.1 ne oferă noi modalități de utilizare a codului HTML pentru a crea mai multe experiențe web flexibile.

    În acest articol, vom avea o privire asupra noilor caracteristici pe care le puteți folosi fără a atinge JavaScript, cu toate acestea, imbunatatirile de fundal JavaScript sunt remarcabile, așa cum puteți vedea în jurnalul de schimburi oficiale.

    Rețineți că în prezent nu toate browserele acceptă toate aceste funcții, așa că nu uitați să faceți asta verificați suportul browserului înainte de a le folosi în producție. Dacă sunteți interesat de dezvoltarea în continuare a standardului HTML, puteți verifica și schița de lucru HTML 5.2.

    1. Definirea resurselor multiple de imagine pentru un design receptiv

    În HTML 5.1, puteți utiliza eticheta împreună cu srcset atributul de a face recepție selectivă a imaginii posibil. eticheta reprezintă o container de imagine care permite dezvoltatorilor să declară diferite resurse de imagine pentru a se adapta la UAmărimea ferestrei de vizualizare, densitatea pixelilor de ecran, tipul de ecran și alți parametri utilizați în design sensibil.

    eticheta în sine nu afișează nimic, funcționează doar ca context pentru resursele multiple de imagine. Trebuie să declarați resursă implicită de imagine ca valoare a src atributul tag, și resurse alternative de imagine intra în cadrul srcset atributele și element.

    Exemplu de cod:

          

    2. Afișați sau ascundeți informații suplimentare

    Cu

    și etichete, puteți adăugați informații extinse la o piesă de conținut. Informații suplimentare nu este afișat în mod implicit, dar dacă utilizatorii sunt interesați, ei au opțiunea de a arunca o privire. În codul dvs., ar trebui să plasați în interiorul etichetei
    . După eticheta puteți adăugați informațiile suplimentare vrei să te ascunzi.

    Exemplu de cod:

     

    Mesaj de eroare

    Nu am putut termina descărcarea acestui videoclip.
    Nume de fișier:
    yourfile.mp4
    Mărime fișier:
    100 MB
    Durată:
    00:05:27

    Acesta este modul în care arată acest exemplu de cod în Firefox 50.0.2:

    3. Adăugați funcționalitate în meniul contextual al browserului

    Cu element și a lui type = "context" atributul, puteți adăugați funcții personalizate la meniul contextual al browserului. Trebuie să alocați ca element copil al

    etichetă. id din elementul trebuie să poartă aceeași valoare ca și meniul contextual atribut a elementului la care dorim să adăugăm meniul contextual la (care este

    eticheta poate au trei tipuri diferite, "Caseta de bifat", "comanda" (la care trebuie să adăugați o acțiune cu JavaScript) și radio. Este posibil să adăugați mai multe elemente de meniu într-un meniu contextual, cu toate acestea suport pentru browser pentru această caracteristică este nu foarte bine încă. Chrome 54 nu îl acceptă, iar Firefox 50 permite doar prezența unui singur meniu contextual suplimentar. Mai jos puteți vedea cum funcționează exemplul de cod în Firefox 50.

    4. Anteturile și subsolurile din Nest

    HTML 5.1 vă permite să cuiburi și subsoluri de cuiburi dacă fiecare nivel este conținute în conținutul secționării. Nota de mai jos este o captură de ecran din documentele W3C și îi sfătuiește pe dezvoltatori să identifice modalitatea corectă de a cuibui antetul și subsolul.

    Această caracteristică poate fi utilă dacă doriți să adăugați au elaborat anteturi la elementele de secționare semantică, precum

    și
    . Exemplul de cod de mai jos creează o bara laterală în interiorul antetului,