Share
Är det inte kul att vi får spela med de senaste CSS-teknikerna, som skuggor och övergångar? Det finns bara ett problem: hur kompenserar vi, eller mer viktigt, upptäcka webbläsare som inte stöder dem? Tja, det finns några lösningar. I denna handledning och skärmdump kommer vi dock att skapa en JavaScript-funktion som accepterar ett CSS-fastighetsnamn som dess parameter och kommer att returnera en boolean, Indikerar om webbläsaren stöder den överförda egenskapen eller inte.
Prenumerera på vår YouTube-sida för att titta på alla videohandledning!
Låt oss börja med att bestämma på vilket sätt vi vill ringa vår fungera. Vi kommer att hålla det enkelt här; något som följande bör göra tricket:
Accentsconagua
om (stöder ('textShadow')) document.documentElement.className + = 'textShadow'; Det borde vara finalen fungera ring upp. När vi skickar ett CSS-fastighetsnamn till stöd () funktion kommer det att returnera a boolean. Om Sann, vi bifogar en klassnamn till documentElement, eller . Detta ger oss ett nytt "klass" namn för att haka på, från vårt stilark.
Nästa ska vi konstruera stöder () funktionen.
var stöder = (funktion () ) ();
Varför gör vi inte bärare lika med en standardfunktion? Svaret är att vi har lite av prep arbeta för att göra först och det finns absolut ingen anledning att upprepa dessa uppgifter om och om igen varje en gång som funktionen heter. I sådana fall är det bäst att göra bärare lika med vad som är tillbaka från den självförverkande funktionen.
För att testa om webbläsaren stöder specifika egenskaper måste vi skapa ett * dummy * -element för testning. Detta genererade element kommer aldrig att faktiskt införas i DOM; Tänk på det som en testdummy!
var div = document.createElement ('div'); Som du är medveten om finns det en handfull leverantörs prefix som vi kan använda när du arbetar med CSS3 egenskaper:
Vår JavaScript måste filtrera igenom dessa prefix och testa dem. Så, låt oss placera dem i en array; vi ringer det, säljare.
var div = document.createElement ('div'), säljare = 'Khtml Ms O Moz Webkit'.split ("); Använda
dela()funktion för att skapa enarrayfrån ensträngär visserligen lat, men det sparar en handfull sekunder!
Som vi filtrerar genom det här array, låt oss vara bra pojkar och flickor, och cache längd av array också.
var div = document.createElement (div), säljare = 'Khtml Ms O Moz Webkit'.split ("), len = vendors.length; De prep Arbetet ovan är statiskt, i naturen, och behöver inte upprepas varje gång vi ringer stöd (). Det är därför vi kör det bara en gång, när sidan laddas. Nu, låt oss lämna tillbaka de fungera som faktiskt kommer att tilldelas bärare variabel.
returfunktion (prop) ;
Skönheten i
förslutningarär det, trots attstöd ()är lika med den som returnerasfungera, det har fortfarande tillgång tilldiv,säljare, ochlenvariabler.
Det omedelbara testet: om den överförda egendomen är tillgänglig för div's stil attribut, vi vet att webbläsaren stöder egenskapen; så returnera sant.
returfunktion (prop) om (prop i div.style) returnerar true; ;
Tänk på, säg, text-shadow CSS3-egenskapen. De flesta moderna webbläsare stöder det, utan att det behövs ett leverantörs prefix. Med det i åtanke, varför filtrera igenom alla prefix om vi inte behöver? Därför placerar vi det här kontrollera på toppen.
Du brukar brukade skriva CSS3-fastighetsnamn, så här: -moz-box-shadow. Men om du, i Firebug, granskar du stil objekt, du kommer att märka att det är stavat, MozBoxShadow. Som sådan, om vi testar:
"mozboxShadow" i div.style // false
Falsk kommer att returneras. Detta värde är skiftlägeskänsligt.
Detta innebär att om användaren passerar boxShadow till stöd () funktion, det kommer att misslyckas. Låt oss tänka framåt och kontrollera om argumentets första bokstav är liten. Om det är så fixar vi felet för dem.
returfunktion (prop) om (prop i div.style) returnerar true; prop = prop.replace (/ ^ [a-z] /, funktion (val) return val.toUpperCase ();); ;
Regelbundna uttryck till räddningen! Ovan kontrollerar vi om det finns en enda liten bokstav i början av strängen (^). Endast under förutsättning att man hittas använder vi toUpperCase () funktion för att aktivera brevet.
Vi måste sedan filtrera genom säljare array och test om det finns en matchning. Till exempel, om box-shadow är klar, vi borde testa om stil attribut av div innehåller något av följande:
Om en match hittas kan vi returnera sant, eftersom webbläsaren verkligen ger stöd för boxskuggor!
returfunktion (prop) om (prop i div.style) returnerar true; prop = prop.replace (/ ^ [a-z] /, funktion (val) return val.toUpperCase ();); medan (len--) om (leverantörer [len] + prop i div.style) return true; ;
Även om vi kunde använda a för uttalande att filtrera genom array, det finns inget verkligt behov i det här fallet.
medan uttalanden är snabbare att skriva och kräver färre tecken Var inte förvirrad av leverantörer [len] + prop; helt enkelt ersätta de namnen med deras verkliga värden: MozBoxShadow.
Men, om inget av dessa värden matchar? I så fall tycks webbläsaren inte stödja fastigheten, i vilket fall vi borde returnera falskt.
medan (len--) om (leverantörer [len] + prop i div.style) return true; returnera false;
Det borde göra det för vår funktion! Låt oss testa det genom att tillämpa en klassnamn till html element, om webbläsaren stöder, säg, text-stroke egendom (som endast webkit gör).
om (stöder ('textStroke')) document.documentElement.className + = 'textStroke'; Med en klass namn som vi kan nu krok på, låt oss prova det i vårt stilark.
/ * fallback * / h1 färg: svart; / * text-stroke support * / .textStroke h1 färg: vit; -webkit-text-stroke: 2px svart;
var stöder = (funktion () var div = document.createElement ('div'), säljare = 'Khtml Ms O Moz Webkit'.split ("), len = vendors.length, return function i div.style) returnera true; prop = prop.replace (/ ^ [az] /, funktion (val) return val.toUpperCase ();); medan (len--) if (leverantörer [len] + prop i div.style) // webbläsare stöder boxskugga. Gör vad du behöver. // Eller använd ett bang (!) för att testa om webbläsaren inte. returnera true; return false;;) (); om (stöder ('textShadow')) document.documentElement.className + = 'textShadow'; För en mer omfattande lösning, se Modernizr-biblioteket.
