Share
Er det ikke morsomt at vi kommer til å leke med de nyeste CSS-teknikkene, som skygger og overganger? Det er bare ett problem: Hvordan kompenserer vi, eller enda viktigere, oppdager nettleserne som ikke støtter dem? Vel, det er noen løsninger. I denne veiledningen og screencast, skjønner vi imidlertid en JavaScript-funksjon som vil akseptere et CSS-eiendomsnavn som parameter, og vil returnere en boolean, Indikerer om nettleseren støtter den bestått egenskapen eller ikke.
Abonner på vår YouTube-side for å se alle videoopplæringene!
La oss begynne med å bestemme hvordan vi vil ringe vår funksjon. Vi holder ting enkelt her; noe som følgende burde gjøre trikset:
Accentsconagua
hvis (støtter ('textShadow')) document.documentElement.className + = 'textShadow'; Det burde være finalen funksjon anrop. Når vi sender et CSS eiendomsnavn til støtter () funksjon, vil det returnere a boolean. Hvis ekte, vi legger til en klassenavn til documentElement, eller . Dette gir oss et nytt "klassenavn" for å hekte på, fra vårt stilark.
Deretter skal vi konstruere støtter () -funksjonen.
var støtter = (funksjon () ) ();
Hvorfor lager vi ikke støtter lik en standardfunksjon? Svaret er fordi vi har litt av prep arbeid å gjøre først, og det er absolutt ingen grunn til å gjenta oppgavene igjen og igjen hver en gang funksjonen kalles. I slike tilfeller er det best å gjøre støtter lik det som er returnert fra den selvutførende funksjonen.
For å teste om nettleseren støtter bestemte egenskaper, må vi opprette et * dummy * -element for testing. Dette genererte elementet vil aldri bli satt inn i DOM; tenk på det som en testdummy!
var div = document.createElement ('div'); Som du sikkert er klar over, finnes det en håndfull leverandør-prefiks som vi kan bruke, når du arbeider med CSS3-egenskaper:
Vår JavaScript må filtrere gjennom disse prefiksene, og teste dem. Så la oss plassere dem i en matrise; vi ringer det, leverandører.
var div = document.createElement ('div'), leverandører = 'Khtml Ms O Moz Webkit'.split ("); Bruker
dele()funksjon for å lage enmatrisefra enstringer selvsagt lat, men det sparer en håndfull sekunder!
Som vi vil filtrere gjennom dette matrise, la oss være gode gutter og jenter, og cache lengde av matrise også.
var div = document.createElement ('div'), leverandører = 'Khtml Ms O Moz Webkit'.split ("), len = vendors.length; De prep arbeidet ovenfor, er statisk, i naturen, og trenger ikke å gjentas hver gang vi ringer støtter (). Det er derfor vi driver det bare én gang, når siden laster. La oss nå komme tilbake de funksjon som faktisk vil bli tildelt til støtter variabel.
returfunksjon (prop) ;
Skjønnheten i
nedleggelserer det, selv omstøtter ()er lik det som returneresfunksjon, det har fortsatt tilgang tildiv,leverandører, oglenvariabler.
Den umiddelbare testen: hvis den bestått eiendommen er tilgjengelig for div's stil attributt, vi vet at nettleseren støtter eiendommen; så returnere sant.
returfunksjon (prop) hvis (prop i div.style) returnerer sann; ;
Tenk på, si, text-shadow CSS3 eiendom. De fleste moderne nettlesere støtter det, uten at det er behov for et leverandørprefiks. Med det for øye, hvorfor filtrere gjennom alle prefiksene hvis vi ikke trenger å? Derfor plasserer vi dette kryss av på toppen.
Du har sannsynligvis brukt til å skrive CSS3-eiendomsnavn, slik som: -moz-box-shadow. Men hvis du, i Firebug, vurderer du stil gjenstand, Du finner at det er stavet, MozBoxShadow. Som sådan, hvis vi tester:
'mozboxShadow' i div.style // false
Falsk vil bli returnert. Denne verdien er bokstavsfølsom.
Dette betyr at hvis brukeren passerer boxShadow til støtter () funksjon, det vil mislykkes. La oss tenke fremover, og kontroller om første bokstav i argumentet er små. Hvis det er, løser vi feilen for dem.
returfunksjon (prop) hvis (prop i div.style) returnerer sann; prop = prop.replace (/ ^ [a-z] /, funksjon (val) return val.toUpperCase ();); ;
Regelmessige uttrykk til redning! Over, vi sjekker om det er et enkelt små bokstaver ved begynnelsen av strengen (^). Bare under forutsetning av at man er funnet, bruker vi toUpperCase () funksjon for å kapitalisere brevet.
Vi må nå filtrere gjennom leverandører array, og test om det er en kamp. For eksempel, hvis box-shadow er bestått, bør vi teste om stil attributten til div inneholder noen av følgende:
Hvis en kamp er funnet, kan vi returnere sant, fordi nettleseren faktisk gir støtte til bokseskygger!
returfunksjon (prop) hvis (prop i div.style) returnerer sann; prop = prop.replace (/ ^ [a-z] /, funksjon (val) return val.toUpperCase ();); mens (len--) hvis (leverandører [len] + prop i div.style) return true; ;
Selv om vi kunne bruke en til uttalelse for å filtrere gjennom matrise, det er ikke noe reelt behov for i dette tilfellet.
samtidig som uttalelser er raskere å skrive, og krever færre tegn Ikke bli forvirret av leverandører [len] + prop; Bare erstatt disse navnene med deres virkelige verdier: MozBoxShadow.
Men hva om ingen av disse verdiene passer? I så fall synes nettleseren ikke å støtte eiendommen, i hvilket tilfelle vi burde returner falsk.
mens (len--) hvis (leverandører [len] + prop i div.style) return true; returnere false;
Det burde gjøre det for vår funksjon! La oss teste det ut ved å bruke en klassenavn til html element, hvis nettleseren støtter, si, tekst-takts eiendom (som bare webkit gjør).
hvis (støtter ('textStroke')) document.documentElement.className + = 'textStroke'; Med en klasse navn som vi kan nå krok på, la oss prøve det ut i stilarket vårt.
/ * fallback * / h1 farge: svart; / * tekststroke støtte * / .textStroke h1 farge: hvit; -webkit-tekst-slag: 2px svart;
var støtter = (funksjon () var div = document.createElement ('div'), leverandører = 'Khtml Ms O Moz Webkit'.split ("), len = vendors.length, returfunksjon i div.style) returner sant; prop = prop.replace (/ ^ [az] /, funksjon (val) return val.toUpperCase ();); mens (len--) if (selgere [len] + prop i div.style) // nettleseren støtter bokseskygge. Gjør det du trenger. // Eller bruk et bang (!) for å teste om nettleseren ikke gjør det. return true; return false;;) (); hvis (støtter ('textShadow')) document.documentElement.className + = 'textShadow'; For en mer omfattende løsning, se på Modernizr-biblioteket.
