HTML5 și CSS3 fără vinovăție

Nu orice caracteristică HTML5 sau CSS3 are suport browser extins, firește. Pentru a compensa acest lucru, dezvoltatorii întreprinzători au creat o serie de instrumente care vă permit să utilizați aceste tehnologii astăzi, fără a lăsa în urmă utilizatorii care trăiesc încă în epoca de piatră.

---

Prolog

Elemente Semantice HTML5

Vestea bună este că, cu excepția Internet Explorer, puteți crea mai multă marcă semantică utilizând noile elemente HTML5 - chiar și în browserele care nu le suportă oficial. Nu uitați să setați modul de afișare corect: bloc. Următorul fragment ar trebui să facă referire la toate elementele necesare:

 articol, deoparte, detalii, figcaption, figura, subsol, header, hgroup, meniu, nav, secțiune display: block; 

IE Comentarii condiționate

Implementarea multor soluții din acest tutorial implică includerea unor JavaScript pentru anumite versiuni de Internet Explorer. Iată o prezentare generală rapidă: expresia test este inclusă în paranteze pătrate. Putem verifica versiuni sau versiuni specifice deasupra sau sub o versiune declarată. lt și gt însemna mai putin decat și mai mare ca, respectiv, în timp ce lte și GTE însemna mai mică sau egală cu și mai mare sau egal cu.

Iată câteva exemple rapide:

 [dacă IE 6]

Verifică dacă browserul este Internet Explorer 6.

 [dacă GT IE 6]

Verifică o versiune a Internet Explorer mai mare decât 6.

---

Instrumentul 1: HTML5 Shiv

În orice IE, cu excepția celei mai recente versiuni (IE9), nu puteți aplica stiluri elementelor pe care browserul nu le recunoaște. Elementele HTML5 spiffice noi, în toată gloria lor, sunt imperceptibile de regulile CSS în acel mediu. Acesta este locul în care html5shiv (numit uneori html5 shim) al lui Remy Sharp vine la salvare. Pur și simplu includeți-l în pagina dvs. și veți putea să stylizați perfect noile elemente HTML5.

Observați cum comentariile condiționale încarcă doar codul html5shiv cu condiția ca versiunea Internet Explorer să fie mai mică de 9. Alte browsere, cum ar fi Firefox și Chrome, vor ignora și această etichetă și nu vor executa scriptul, salvând astfel lățimea de bandă.

html5 shiv se bazează pe o soluție simplă: direcționează IE să creeze elementele cu JavaScript (acestea nu trebuie nici măcar să fie introduse în DOM).

 document.createElement ( 'header');

În acest moment, ele pot fi personalizate în mod normal. În plus, cele mai recente versiuni integrează IE Print Protector, care stabilește o eroare în cazul în care elementele HTML5 dispar la imprimarea paginii ...

---

Instrumentul 2: modernizarea

Modernizr vă permite să furnizați stil de "backup" în browsere care nu acceptă anumite caracteristici HTML5 și CSS3.

Modernizr este probabil cel mai cunoscut dintre aceste instrumente, dar este, de asemenea, destul de greșit înțeles (numele nu ajută). Luați o respirație profundă: spre deosebire de concepția greșită a populației, Modernizr face acest lucru nu activați funcționalitățile HTML5 și CSS3 în browserele care nu le suportă (deși face includeți html5shiv pentru a vă permite să utilizați elemente HTML5 în IE < 9).

În afară de funcționalitatea html5shiv, Modernizr face doar un lucru și un singur lucru: rulează o serie de teste de detectare a funcțiilor când este încărcat și apoi inserează rezultatele în clasă atributul etichetă.

Scopul principal al lui Modernizr este să vă permită să oferiți stil de "backup" în browsere care nu acceptă anumite caracteristici HTML5 și CSS3. Acest lucru este oarecum diferit de degradarea grațioasă tradițională, unde folosim același stil CSS în toate browserele și apoi proiectăm astfel încât, atunci când lipsesc anumite capacități, rezultatul este încă acceptabil.

Acum pentru un exemplu de funcționare a Modernizr: dacă un browser acceptă border-radius si coloană-count proprietate, vor fi aplicate următoarele clase:

Pe de altă parte, dacă aceleași proprietăți nu sunt acceptate - de exemplu, în IE7 - veți găsi:

În acest moment, puteți utiliza aceste clase pentru a aplica un stil unic în browsere cu diferite capabilități. De exemplu, dacă doriți să aplicați un alt stil unui paragraf, în funcție de faptul dacă sunt acceptate coloanele CSS, puteți face următoarele:

 .csscolumns p / * Stil când coloanele sunt disponibile * / .no-csscolumns p / * Stil când coloanele nu sunt disponibile * /

Dacă un browser nu acceptă coloane, .csscolumns clasa nu va fi prezentă în organism și browserul nu va avea niciodată șansa de a aplica regula care o folosește.

Unii ar putea obiecta că acest lucru ne aduce înapoi la vechile vremuri de construire a unui site diferit pentru fiecare browser. Este adevărat că nimic nu vă oprește să scrieți atât de multe declarații de stil care utilizează funcții CSS3 avansate, că foaia de stil devine practic goală atunci când aceste reguli nu pot fi aplicate.

Dacă doriți să utilizați Modernizr într-un mod care are sens, trebuie să vă bazați pe talentul dvs. de design pentru a concepe stiluri alternative care nu rupe designul și nu necesită aruncarea restului foii de stil. De exemplu, este posibil să încercați să înlocuiți umbrele picăturilor cu litere, atunci când acestea nu sunt disponibile, cu o caractere aldine sau cu o culoare diferită.

folosire

Pentru a utiliza Modernizr, includeți fișierul minificat și aplicați o clasă de no-js la element. Această ultimă măsură de precauție vă permite să furnizați stiluri atunci când JavaScript este dezactivat complet; evident, în aceste cazuri, Modernizr nu vă poate ajuta deloc. Dacă JavaScript este activat, Modernizr va lansa și va înlocui no-js cu rezultatele operațiunilor sale de detectare a caracteristicilor.

    ... 

Dacă sunteți dispus să acceptați că toate site-urile web nu trebuie să fie afișate în mod identic în toate browserele, veți descoperi că Modernizr este un instrument esențial în centura dvs. dev dev!

---

Instrumentul 3: IE 6 Universal CSS

Pe aceeași notă, designerul Andy Clarke a conceput o soluție elegantă pentru rezolvarea lipsei de respectare standard a IE6. Numit "Universal IE6", această foaie de stil se concentrează exclusiv pe tipografie. Cheia este de a folosi comentarii condiționate pentru a ascunde toate celelalte foi de stil de la IE 6.

  / * Foile de stil pentru alte browsere decât Internet Explorer 6 * /  

Notă importantă: Nu uitați să includeți cea mai recentă versiune, deoarece instrucțiunile pentru cele vechi plutesc încă în jurul web-ului. Rezultatele finale arată astfel:

Aveți de lucru la zero pentru a sprijini IE 6 pe un nou site.

Această abordare are un avantaj destul de evident în comparație cu foile de stil clasice alternative: aveți de lucru la zero pentru a sprijini IE 6 pe un nou site. Dezavantajul, desigur, este că site-ul afișează foarte puțin din designul dvs. Mai mult, fundațiile HTML trebuie, de asemenea, să fie solide, pentru ca pagina să poată fi utilizată chiar și cu cele mai multe stiluri dezactivate.

Rețineți că CSS universal IE6 nu include niciun stil pentru elementele care utilizează numai HTML5, cum ar fi

sau