Accentsconagua

HTML5 en CSS3 zonder schuldgevoel

Code
Share

Niet elke HTML5- of CSS3-functie heeft uiteraard een brede browserondersteuning. Om dit te compenseren, hebben ondernemende ontwikkelaars een aantal hulpmiddelen ontwikkeld om u deze technologieën vandaag te laten gebruiken, zonder gebruikers achter te laten die nog in de steentijd leven.

Proloog

HTML5 semantische elementen

Het goede nieuws is dat u, behalve voor Internet Explorer, meer semantische markeringen kunt maken door de nieuwe HTML5-elementen te gebruiken, zelfs in browsers die ze niet officieel ondersteunen. Vergeet niet om de correcte weergavemodus in te stellen: blok. Het volgende fragment moet verwijzen naar alle noodzakelijke elementen:

 artikel, opzij, details, figcaption, figuur, footer, header, hgroup, menu, nav, sectie display: block;

IE Voorwaardelijke opmerkingen

Het implementeren van veel van de oplossingen in deze tutorial omvat het opnemen van JavaScript voor specifieke versies van Internet Explorer. Hier is een kort overzicht: de testuitdrukking staat tussen vierkante haken. We kunnen controleren op specifieke versies of versies boven of onder een vermelde versie. lt en gt gemiddelde lager dan en groter dan, respectievelijk, terwijl lte en gte gemiddelde lager dan of gelijk aan en groter dan of gelijk aan.

Hier zijn enkele snelle voorbeelden:

 [if IE 6]

Controleert of de browser Internet Explorer 6 is.

 [if gt IE 6]

Controleert op een versie van Internet Explorer groter dan 6.

Tool 1: HTML5 Shiv

In IE, met uitzondering van de meest recente versie (IE9), kunt u geen stijlen toepassen op elementen die de browser niet herkent. Uw spiffy, nieuwe HTML5-elementen, in al hun glorie, zijn ongevoelig voor CSS-regels in die omgeving. Dit is waar Remy Sharp's html5shiv (soms html5 shim genoemd) te hulp komt. Voeg het gewoon toe aan uw pagina's sectie en je zult in staat zijn om de nieuwe HTML5-elementen perfect in te richten.

Merk op hoe de voorwaardelijke opmerkingen alleen de HTML-code html5shiv laden op voorwaarde dat de versie van Internet Explorer lager is dan 9. Andere browsers, zoals Firefox en Chrome, zullen deze tag ook negeren en zullen het script niet uitvoeren, waardoor bandbreedte wordt bespaard.

html5 shiv is gebaseerd op een eenvoudige oplossing: het dirigeert IE om de elementen met JavaScript te maken (ze hoeven niet eens in de DOM te worden ingevoegd). 

 document.createElement ( 'header');

Op dit punt kunnen ze normaal worden gestyled. Bovendien integreren de meer recente versies IE Print Protector, die een fout repareert waarbij de HTML5-elementen verdwijnen bij het afdrukken van de pagina ...

Tool 2: Modernizr

Met Modernizr kunt u een "back-up" -stijl bieden in browsers die bepaalde HTML5- en CSS3-functies niet ondersteunen.

Modernizr is misschien wel de bekendste van deze tools, maar het is ook behoorlijk verkeerd begrepen (de naam helpt niet). Haal diep adem: in tegenstelling tot populaire misverstand doet Modernizr dat wel niet schakel HTML5- en CSS3-functionaliteiten in browsers in die ze niet ondersteunen (hoewel het wel doet include html5shiv om HTML5-elementen in IE te kunnen gebruiken < 9).

Afgezien van de html5shiv-functionaliteit doet Modernizr slechts één ding: hij voert een reeks kenmerkdetectietests uit wanneer hij wordt geladen en voegt vervolgens de resultaten in de klasse attribuut van de label.

Het voornaamste doel van Modernizr is om u een "back-up" -stijl aan te bieden in browsers die bepaalde HTML5- en CSS3-functies niet ondersteunen. Dit is enigszins anders dan traditionele sierlijke degradatie, waarbij we in alle browsers dezelfde CSS-stijl gebruiken en deze vervolgens zodanig modelleren dat, wanneer specifieke functies ontbreken, het resultaat nog steeds acceptabel is.

Nu voor een voorbeeld van hoe Modernizr werkt: als een browser het ondersteunt border-radius en de column-count property, worden de volgende klassen toegepast:

Aan de andere kant, als dezelfde eigenschappen niet worden ondersteund, bijvoorbeeld in IE7, vindt u:

Op dit punt kunt u deze klassen vervolgens gebruiken om een ​​unieke stijl toe te passen in browsers met verschillende mogelijkheden. Als u bijvoorbeeld een andere stijl op een alinea wilt toepassen, afhankelijk van of CSS-kolommen worden ondersteund, kunt u het volgende doen: 

 .csskolommen p / * Stijl wanneer kolommen beschikbaar zijn * / .no-csscolumns p / * Stijl wanneer kolommen niet beschikbaar zijn * /

Als een browser geen kolommen ondersteunt, de .csscolumns klasse zal niet aanwezig zijn in het lichaam en de browser zal nooit de kans krijgen om de regel toe te passen die deze gebruikt.

Sommigen kunnen bezwaar maken dat dit ons terugbrengt naar de oude tijden van het bouwen van een andere site voor elke browser. Het is waar dat niets u ervan weerhoudt om zoveel stijlverklaringen te schrijven die geavanceerde CSS3-functies gebruiken dat uw stylesheet vrijwel leeg wordt wanneer deze regels niet kunnen worden toegepast.

Als je Modernizr op een logische manier wilt gebruiken, moet je op je ontwerptalent vertrouwen om alternatieve stijlen te bedenken die het ontwerp niet breken en de rest van het stylesheet niet weggooien. U kunt bijvoorbeeld de slagschaduwen op letters vervangen als ze niet beschikbaar zijn, met een vet lettertype of transparantie met een andere kleur.

Gebruik

Om Modernizr te gebruiken, neemt u het verkleinde bestand op en past u een klasse toe van no-js naar de element. Met deze laatste voorzorgsmaatregel kunt u stijlen opgeven voor wanneer JavaScript volledig is gedeactiveerd; natuurlijk, in die gevallen kan Modernizr je helemaal niet helpen. Als JavaScript is ingeschakeld, zal Modernizr instappen en de no-js met de resultaten van zijn functies voor het detecteren van functies.

    ...

Als u bereid bent te accepteren dat alle websites niet identiek in alle browsers hoeven te worden weergegeven, zult u merken dat Modernizr een essentieel hulpmiddel is in uw web-ontwikkelingsgordel!

Tool 3: IE 6 Universal CSS

Op dezelfde toon heeft ontwerper Andy Clarke een elegante oplossing bedacht voor het oplossen van IE6's gebrek aan standaard compliance. Genaamd "Universal IE6", deze stylesheet richt zich uitsluitend op typografie. De sleutel is om voorwaardelijke opmerkingen te gebruiken om alle andere stylesheets uit IE 6 te verbergen. 

  / * Stylesheets voor andere browsers dan Internet Explorer 6 * /

Belangrijke notitie: Vergeet niet om de nieuwste versie op te nemen, omdat instructies voor oudere nog steeds rondzweven op het internet. De uiteindelijke resultaten zien er als volgt uit:

U hoeft niets te doen om IE 6 op een nieuwe site te ondersteunen.

Deze benadering heeft een vrij duidelijk voordeel ten opzichte van klassieke alternatieve stylesheets: u hoeft niets te doen om IE 6 op een nieuwe site te ondersteunen. Het nadeel is natuurlijk dat de site heel weinig van je ontwerp laat zien. Verder moet uw HTML-onderbouwing ook heel solide zijn, zodat de pagina bruikbaar is, zelfs als de meeste styling is uitgeschakeld.

Merk op dat Universal IE6 CSS geen styling bevat voor alleen HTML5-elementen zoals

of