În acest proiect, vom scrie codul nostru de la zero și vom explica fiecare parte a acestuia. Ar fi imposibil să creați un astfel de proiect în care să fie utilizate toate elementele și tehnicile noi existente, așa că vom explica și care lucruri nu se vor potrivi proiectului nostru. Astfel, veți avea o gamă largă de opțiuni pentru crearea propriului site HTML sau CSS3 sau aplicație web. Acest articol poate fi utilizat ca referință pentru un număr de tehnici. Să începem cu o pagină HTML5 goală:
Aici este șablonul nostru de bază. Acum, să ne uităm la părțile individuale ale marcajului și să vedem cum au fost scrise înainte HTML5.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Din moment ce browserele sunt necesare pentru a suporta toate tipurile existente de conținut de pe Internet, nu vă puteți baza exclusiv pe doctype singur. Cu alte cuvinte, un singur document doctype nu face pagina HTML5 compatibilă. Totul depinde de browser. De fapt, puteți utiliza, în general, unul dintre doctype de mai sus cu noile elemente HTML5, iar pagina va fi afișată exact la fel ca la noul tip de document.
Următoarea din listă din orice document HTML este eticheta html. În HTML5, el sa schimbat ușor. În exemplul nostru de mai sus din această etichetă, am adăugat atributul lang cu valoarea en, ceea ce înseamnă că documentul nostru va fi în limba engleză. Când utilizați sintaxa XHTML, trebuie să adăugați atributul xmlns. În HTML5, acest lucru nu mai este necesar și chiar atributul lang este opțional. Documentul va fi validat fără acest atribut. În momentul de față avem:
În aproape 100% din cazuri, veți folosi valoarea utf8. O explicație detaliată a diferențelor dintre codificări depășește domeniul de aplicare al acestui capitol și este posibil să nu vă intereseze. Dar dacă sunteți în continuare interesat, puteți citi despre codificările de pe W3C sau WHATWG.
Aceste linii diferă puțin de sintaxa anterioară. Titlul paginii este declarat ca de obicei și am scris metaetichetele doar pentru un exemplu, astfel încât să știți unde să le plasați. În această secțiune, puteți plasa cât mai multe metae tag-uri valide pe care le doriți.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Suport pentru browserele mai vechi
Acest document, firește, nu va trece validarea și va avea probleme cu disponibilitatea, dar va funcționa normal în aproape toate browserele - cu excepția versiunilor mai vechi ale IE. În versiunile anterioare IE9, stilurile nu se aplică tagurilor nerecunoscute. Motorul le vede ca "elemente necunoscute", astfel încât să nu le puteți atribui stiluri sau să le schimbați cumva comportamentul. Acest lucru se aplică nu numai la etichetele pe care le-am inventat, ci și la toate etichetele care au fost dezvoltate după lansarea acestor versiuni ale browserului. Deci, la toate tag-urile noi din HTML5.
Vestea bună este că, la momentul redactării, cei mai mulți oameni care folosesc IE stau pe IE9 și mai sus. Astfel, pentru majoritatea dezvoltatorilor, această problemă dispare de la sine. Cu toate acestea, în cazul în care un procent mare din utilizatorii dvs. sunt pe IE8 și mai în vârstă, trebuie să faceți ceva pentru a împiedica descreșterea designului.
De remarcat este faptul că dacă utilizați librării JS care funcționează cu proprietăți HTML5 sau noi API-uri, ele pot conține deja un script care activează HTML5. Dacă da, atunci linkul către acest script ar trebui eliminat. Un exemplu este modernizarea bibliotecii JIS, care definește suportul pentru etichetele HTML moderne și proprietățile CSS. Pe site-ul Modernizr, puteți selecta versiunea bibliotecii cu cod de suport HTML5 în versiunile mai vechi ale IE. Mai multe detalii despre Modernizr sunt discutate în Anexa A.
Notă: HTML5 Shiv nu rezolvă toate problemele
Există întotdeauna un grup de utilizatori pentru care HTML5 Shiv este inutil: acei oameni care, dintr-un motiv sau altul, au dezactivat JS și stau prin IE8 sau mai jos. În calitate de designeri web, spunem constant că conținutul site-ului nostru ar trebui să fie pe deplin accesibil tuturor utilizatorilor, chiar și pentru cei care au dezactivat JS. Dar totul nu este la fel de rău cum pare. O mulțime de studii au arătat că numărul de persoane care dezactivează JS este atât de mic încât este luat în considerare, mai ales dacă acești oameni stau prin IE8 sau mai jos.
Totul este istorie
Întrucât JS este singurul limbaj de programare scripted pe Internet care este folosit în toate scopurile practice și având în vedere faptul că toate browserele presupun că utilizați JS, chiar dacă nu este specificat explicit, în documente HTML5, atributul type este opțional:
Urmărind cele mai bune practici, am plasat eticheta de script în partea de jos a paginii. Această abordare este legată de viteza de încărcare a paginilor: atunci când browserul vede eticheta de script, oprește descărcarea și randarea paginii până când analizează fișierul de script. Acest lucru afectează foarte mult viteza de încărcare a paginii, în special atunci când se conectează fișiere mari de scripturi în partea de sus chiar înainte de conținut. De aceea, majoritatea scripturilor ar trebui să fie plasate chiar în partea de jos a paginii, astfel încât acestea să fie încărcate după încărcarea paginii.
În unele cazuri, trebuie să plasați scripturi în eticheta capului (cum ar fi cu HTML5 shiv), dacă doriți ca scriptul să înceapă să funcționeze înainte ca pagina să fie redată.
Ediție: Comanda webformself.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Practicați HTML5 și CSS3 de la zero la rezultatul!
Articole similare
Trimiteți-le prietenilor: