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 element în exemplul de mai jos).
Exemplu de cod:
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,
tag-ul este, de asemenea, un element de secționare, și adaugă informații suplimentare despre autorul din interior. Bara laterală din interiorul antetului are antet propriu precum și cu subtitlul și informațiile de contact ale autorului.
Exemplu de cod:
Titlul articolului
Articolul introductiv
Alte paragrafe ...
5. Utilizați noncesuri criptografice pentru stiluri și scripturi
Cu HTML 5.1, poți adăugați noncesuri criptografice la stiluri și scripturi. Puteți utiliza funcția nonce
atribut în cadrul and the
elements. A cryptographic nonce is a randomly generated number that can be used only once, and has to be regenerated for every page request. A nonce can be used by the Content Security Policy of a website to decide if the certain script or style should be applied on the page. In Google Developers' Web Fundamentals you can read more on the proper usage of nonces and CSP.
Below, you can see a simple code example of how to use the nonce
attribute, however note that in a real world scenario its value shouldn't be hard-coded but randomly generated.
Code example:
6. Creați relații de legătură inversă
Puteți adăuga rev
atribut la legăturile dvs. din nou. A fost definit anterior în HTML 4, dar nu a fost acceptat de HTML5. HTML 5.1 permite dezvoltatorilor să utilizați acest atribut din nou pentru și
element.
rev
este atributul vizavi de rel
, specifică relația documentului curent și a documentului asociat în direcția inversă (modul în care documentul curent este legat de cel legat).
Exemplu de cod:
rev
atributul a fost inclus în specificațiile HTML 5.1 în primul rând pentru a sustine RDFa care este pe scară largă format structurat de marcare a datelor, și extinde limba HTML.
7. Utilizați imagini cu lățime zero
HTML 5.1 face posibilă crea imagini cu lățime zero permițând dezvoltatorilor să folosească lăţime
atribuiți cu 0
ca valoare. Această caracteristică poate fi utilă dacă doriți să includeți imagini pe care le aveți nu doresc să se arate utilizatorilor, cum ar fi urmărirea fișierelor imagine. Imaginile cu o lățime de la zero sunt recomandate a fi utilizate împreună cu cele goale Alt
atribute.
Exemplu de cod:
8. Separați contextele browserului pentru a preveni atacurile de tip phishing
Folosirea acelorași linkuri de origine pe site-ul dvs. poate să vă aducă în cele din urmă probleme. Vulnerabilitatea este numită target =”_gol” exploata, și este un atac terorist de phishing. Puteți încerca (în condiții de siguranță) cum funcționează acest atac pe această pagină demo inteligentă Github și codul de fundal puteți găsi aici pe Github.
HTML 5.1 a standardizat utilizarea rel = "noopener"
atribut care separă contextele browserului prin urmare, elimină această problemă. Poți să folosești rel = "noopener"
în cadrul și
element.
Exemplu de cod:
Linkul dvs. care nu va face probleme
9. Creați o opțiune goală
HTML 5.1 permite dezvoltatorilor să creați un gol element.
tag - ul poate fi elementul copil al
,
, sau
elemente. Posibilitatea de având un gol
poate fi util dacă nu doriți să sugerați care dintre opțiuni ar trebui să aleagă utilizatorii și care ar putea fi utile atunci când doriți să creați formulare ușor de utilizat.
10. Manipulați cu mai multă flexibilitate legendele figurative
eticheta reprezintă a legendă sau legendă aparținând element care este un container pentru vizual, cum ar fi ilustrații, fotografii și diagrame. Anterior,
eticheta ar putea fi utilizată numai ca primul sau ultimul copil al element. HTML 5.1 a slăbit această regulă, si acum
poate apărea oriunde în cadrul acestuia recipient.