HTML5 och CSS3 utan skuld

Inte alla HTML5- eller CSS3-funktioner har utbrett webbläsarstöd, naturligtvis. För att kompensera för detta har entreprenörskapsutvecklare skapat ett antal verktyg för att låta dig använda dessa teknologier idag, utan att lämna kvar användare som fortfarande bor i stenåldern.

---

Prolog

HTML5-semantiska element

Den goda nyheten är att förutom Internet Explorer kan du skapa mer semantisk markering genom att använda de nya HTML5-elementen - även i webbläsare som inte officiellt stöder dem. Kom bara ihåg att ange rätt visningsläge: blockera. Följande kod ska referera till alla nödvändiga element:

 artikel, åtgärd, detaljer, figcaption, figur, footer, header, hgroup, meny, nav, avsnitt display: block; 

IE Villkorliga kommentarer

Genomförandet av många av lösningarna i den här handledningen innebär att vissa JavaScript ingår för specifika Internet Explorer-utgåvor. Här är en snabb översikt: testuttrycket är inneslutet i kvadratkonsoler. Vi kan söka efter specifika versioner eller versioner ovanför eller under en angiven version. lt och gt betyda lägre än och större än, respektive, medan lte och gte betyda lägre än eller lika med och större än eller lika med.

Här är några snabba exempel:

 [om IE 6]

Kontrollerar om webbläsaren är Internet Explorer 6.

 [om gt IE 6]

Kontrollerar en version av Internet Explorer större än 6.

---

Verktyg 1: HTML5 Shiv

I allt IE, med undantag för den senaste versionen (IE9), kan du inte tillämpa format på element som webbläsaren inte känner igen. Dina spiffiga, nya HTML5-element, i all sin ära, är ogenomträngliga för CSS-reglerna i den miljön. Det här är Remy Sharps html5shiv (ibland kallad html5 shim) kommer till räddning. Helt enkelt inkludera det i din sida avsnittet och du kommer att kunna ställa in de nya HTML5-elementen perfekt.

Observera hur de villkorliga kommentarerna bara laddar html5shiv-koden under förutsättning att versionen av Internet Explorer är lägre än 9. Andra webbläsare, som Firefox och Chrome, kommer också att ignorera den här taggen och kommer inte att exekvera manuset, vilket sparar bandbredd.

html5 shiv bygger på en enkel lösning: den styr IE för att skapa element med JavaScript (de behöver inte ens infogas i DOM).

 document.createElement ( 'header');

Vid denna tidpunkt kan de stylas normalt. Dessutom integrerar de senaste versionerna IE Print Protector, vilket fixar ett fel där HTML5-elementen försvinner när du skriver ut sidan ...

---

Verktyg 2: Modernizr

Modernizr låter dig tillhandahålla "backup" -styling i webbläsare som inte stöder vissa HTML5- och CSS3-funktioner.

Modernizr är kanske det mest kända för dessa verktyg, men det är också ganska missförstått (namnet hjälper inte). Ta djupt andetag: i motsats till populär missuppfattning, gör Modernizr inte aktivera HTML5 och CSS3-funktioner i webbläsare som inte stöder dem (även om det gör Inkludera html5shiv så att du kan använda HTML5-element i IE < 9).

Bortsett från html5shiv-funktionaliteten, gör Modernizr en sak och en sak: den kör en serie av funktionstesttest när den laddas och sätter sedan in resultaten i klass attribut av märka.

Modernizrs primära syfte är att låta dig erbjuda "backup" -styling i webbläsare som inte stöder vissa HTML5- och CSS3-funktioner. Det här är något annorlunda än traditionell graciös nedbrytning, där vi använder samma CSS-styling i alla webbläsare, och sedan konstruerar den så att resultatet, då specifika funktioner saknas, fortfarande är acceptabelt.

Nu för ett exempel på hur Modernizr fungerar: om en webbläsare stöder border-radius och den kolonn-count egendom, kommer följande klasser att tillämpas:

Å andra sidan, om samma egenskaper inte stöds - säg i IE7 - hittar du:

Vid den här tiden kan du använda dessa klasser för att tillämpa unik styling i webbläsare med olika funktioner. Om du till exempel vill tillämpa en annan stil på ett stycke kan du göra beroende på om CSS-kolumner stöds.

 .csscolumns p / * Stil när kolumner är tillgängliga * / .no-csscolumns p / * Stil när kolumner inte är tillgängliga * /

Om en webbläsare inte stöder kolumner, kommer den .csscolumns klassen kommer inte att finnas i kroppen, och webbläsaren kommer aldrig att ha chans att tillämpa regeln som använder den.

Vissa kan motsätta sig att det här tar oss tillbaka till de gamla tiderna för att bygga en annan webbplats för varje webbläsare. Det är sant att ingenting hindrar dig från att skriva så många stildeklarationer som använder avancerade CSS3-funktioner som ditt stylesheet blir nästan tomt när dessa regler inte kan tillämpas.

Om du vill använda Modernizr på ett sätt som är meningsfullt måste du förlita dig på din designtalang för att tänka på alternativa stilar som inte bryter mot designen och inte kräver att du slänger resten av stilarket. Du kan till exempel försöka ersätta droppskuggor i bokstäver, när de inte är tillgängliga, med en fet skrift eller genomskinlighet med en annan färg.

Användande

För att använda Modernizr, inkludera den minifierade filen och tillämpa en klass av no-js till element. Den här sista försiktighetsåtgärden låter dig skapa stilar för när JavaScript är helt avaktiverat. självklart, i sådana fall kan Modernizr inte hjälpa dig alls. Om JavaScript är aktiverat kommer Modernizr att sparka in och ersätta no-js med resultaten av dess funktionsdetekteringsoperationer.

    ... 

Om du är villig att acceptera att alla webbplatser inte behöver visas identiskt över alla webbläsare, hittar du att Modernizr är ett viktigt verktyg i ditt web dev!

---

Verktyg 3: IE 6 Universal CSS

På samma anteckning har designer Andy Clarke utformat en elegant lösning för att lösa IE6: s brist på standardkompatibilitet. Kallas "Universal IE6", den här stilen fokuserar uteslutande på typografi. Nyckeln är att använda villkorliga kommentarer för att dölja alla andra stylesheets från IE 6.

  / * Stylesheets för andra webbläsare än Internet Explorer 6 * /  

Viktig notering: Kom ihåg att inkludera den senaste versionen, eftersom instruktioner för äldre fortfarande flyter runt på webben. De slutliga resultaten ser ut så här:

Du har inget arbete att göra för att stödja IE 6 på en ny webbplats.

Detta tillvägagångssätt har en ganska uppenbar fördel jämfört med klassiska alternativa stylesheets: du har inget arbete att göra för att stödja IE 6 på en ny webbplats. Nackdelen är naturligtvis att webbplatsen visar mycket lite av din design. Dessutom måste din HTML-grundläggning vara solid, så att sidan kan användas även om de flesta styling är inaktiverade.

Observera att Universal IE6 CSS inte innehåller någon styling för HTML5-bara element som

eller