Share
Is het niet leuk dat we kunnen spelen met de nieuwste CSS-technieken, zoals schaduwen en overgangen? Er is maar één probleem: hoe kunnen we de browsers die deze niet ondersteunen compenseren of, nog belangrijker, detecteren? Welnu, er zijn een paar oplossingen. In deze zelfstudie en screencast maken we echter een JavaScript-functie die een CSS-eigenschapsnaam als parameter accepteert en een boolean, geeft aan of de browser de doorgegeven eigenschap al dan niet ondersteunt.
Abonneer u op onze YouTube-pagina om alle videozelfstudies te bekijken!
Laten we beginnen met bepalen hoe we willen onze bellen functie. We houden de dingen eenvoudig hier; zoiets zou het volgende moeten doen:
Accentsconagua
if (ondersteunt ('textShadow')) document.documentElement.className + = 'textShadow'; Dat zou de finale moeten zijn functie noemen. Wanneer we een CSS-eigenschapsnaam doorgeven aan de steunen () functie, zal het a terugkeren boolean. Als waar, we zullen een naam van de klasse naar de documentElement, of . Dit geeft ons vervolgens een nieuwe 'klassennaam' om aan te haken, vanuit ons stylesheet.
Vervolgens maken we de ondersteunt () functie.
var ondersteunt = (function () ) ();
Waarom maken we niet? ondersteuningen gelijk aan een standaardfunctie? Het antwoord is omdat we een beetje hebben prep eerst werken om te doen, en er is absoluut geen reden om die taken steeds opnieuw te herhalen elk enkele keer dat de functie wordt aangeroepen. In gevallen als deze is het het beste om te maken ondersteuningen gelijk aan wat wordt teruggegeven door de zelfuitvoerende functie.
Om te testen of de browser specifieke eigenschappen ondersteunt, moeten we een * dummy * -element maken om te testen. Dit gegenereerde element zal nooit daadwerkelijk in de DOM worden ingevoegd; Zie het als een testpop!
var div = document.createElement ('div'); Zoals u waarschijnlijk weet, zijn er een handvol leveranciersprefixes die we kunnen gebruiken wanneer u met CSS3-eigenschappen werkt:
Ons JavaScript moet door die voorvoegsels filteren en ze testen. Dus laten we ze in een plaatsen rangschikking; we zullen het noemen, vendors.
var div = document.createElement ('div'), vendors = 'Khtml Ms O Moz Webkit'.split ("); De ... gebruiken
split ()functie om een te makenrangschikkingvan eendraadis weliswaar lui, maar het bespaart een handvol seconden!
Terwijl we hier doorheen filteren rangschikking, laten we goede jongens en meisjes zijn, en de cache opslaan lengte van de rangschikking ook.
var div = document.createElement ('div'), vendors = 'Khtml Ms O Moz Webkit'.split ("), len = vendors.length; De prep werk, hierboven, is statisch van aard en hoeft niet elke keer te worden herhaald als we bellen steunen (). Dit is de reden waarom we het maar één keer uitvoeren, wanneer de pagina wordt geladen. Laten we nu terugkeer de functie dat zal feitelijk worden toegewezen aan de ondersteuningen veranderlijk.
terugkeerfunctie (prop) ;
De schoonheid van
sluitingenis dat, ook alsteunen ()is gelijk aan de geretourneerdefunctie, het heeft nog steeds toegang tot dediv,vendors, enlenvariabelen.
De directe test: als de verstreken eigenschap beschikbaar is voor de div's stijl kenmerk, we weten dat de browser de eigenschap ondersteunt; zo keer terug waar.
return-functie (prop) if (prop in div.style) return true; ;
Denk aan, laten we zeggen, de schaduw tekst CSS3-eigenschap. De meeste moderne browsers ondersteunen dit, zonder dat een prefix van leveranciers nodig is. Waarom filteren we daarom in alle voorvoegsels als dat niet nodig is? Dat is waarom we dit plaatsen controleren op de top.
U bent waarschijnlijk gewend CSS3-eigenschappen te typen, zoals: -moz-box-shadow. Als u echter in Firebug de stijl voorwerp, je zult merken dat het gespeld is, MozBoxShadow. Als zodanig testen we:
'mozboxShadow' in div.style // false
vals zal worden teruggegeven. Deze waarde is hoofdlettergevoelig.
Dit betekent dat als de gebruiker slaagt boxShadow naar de steunen () functie, het zal mislukken. Laten we vooruit denken en controleren of de eerste letter van het argument in kleine letters is. Als dit het geval is, lossen we de fout voor hen op.
return-functie (prop) if (prop in div.style) return true; prop = prop.replace (/ ^ [a-z] /, functie (val) return val.toUpperCase ();); ;
Reguliere uitdrukkingen om te redden! Hierboven controleren we of er een kleine kleine letter aan het begin van de tekenreeks staat (^). Alleen op voorwaarde dat er een wordt gevonden, gebruiken we de toUpperCase () functie om de letter te kapitaliseren.
We moeten vervolgens filteren door de vendors array en test of er een overeenkomst is. Bijvoorbeeld, als box-shadow is geslaagd, moeten we testen of het stijl attribuut van de div bevat een van de volgende:
Als een overeenkomst wordt gevonden, kunnen we dat keer terug waar, omdat de browser inderdaad ondersteuning biedt voor doosschaduwen!
return-functie (prop) if (prop in div.style) return true; prop = prop.replace (/ ^ [a-z] /, functie (val) return val.toUpperCase ();); while (len--) if (vendors [len] + prop in div.style) return true; ;
Hoewel we een a zouden kunnen gebruiken voor statement om door de te filteren rangschikking, In dit geval is er geen echte behoefte aan.
terwijl statements zijn sneller in te typen en vereisen minder karakters Wees niet in de war door leveranciers [len] + prop; vervang eenvoudig die namen door hun werkelijke waarden: MozBoxShadow.
Maar wat als geen van die waarden overeenkomt? In dat geval lijkt de browser het eigendom niet te ondersteunen, in welk geval we dat zouden moeten doen return false.
while (len--) if (vendors [len] + prop in div.style) return true; return false;
Dat zou het voor onze functie moeten doen! Laten we het testen, door een naam van de klasse naar de html element, als de browser het voorbeeld ondersteunt text-stroke eigenschap (die alleen webkit doet).
if (ondersteunt ('textStroke')) document.documentElement.className + = 'textStroke'; Met een klasse naam die we nu kunnen hebben haak op, laten we het uitproberen in ons stylesheet.
/ * fallback * / h1 color: black; / * ondersteuning voor tekststrepen * / .textStroke h1 color: white; -webkit-tekstlijn: 2px zwart;
var ondersteunt = (function () var div = document.createElement ('div'), vendors = 'Khtml Ms O Moz Webkit'.split ("), len = vendors.length; return-functie (prop) if (prop in div.style) return true; prop = prop.replace (/ ^ [az] /, function (val) return val.toUpperCase ();); while (len--) if (vendors [len] + prop in div.style) // browser ondersteunt vakschaduw. Doe wat je nodig hebt // Of gebruik een knal (!) om te testen of de browser dat niet doet. waar retourneren; return false;;) (); if (supports ('textShadow')) document.documentElement.className + = 'textShadow'; Raadpleeg de Modernizr-bibliotheek voor een uitgebreidere oplossing.
