Share
Du har sett det gang på gang på Webdesigntuts +; en CSS3 opplæring som du er fristet til å følge, men mangel på støtte i eldre nettlesere hindrer deg i å se nærmere. Det finnes imidlertid en rekke verktøy for å hjelpe deg i situasjoner som disse. I dag skal vi finne ut hvordan du skal erobre CSS3 i eldre nettlesere, gjelder også Internet Explorer?
La oss ta en titt på en rekke teknikker for å gjengi de viktigste CSS3-egenskapene i eldre nettleserversjoner.
Til å begynne med, last ned og ta med alle nødvendige skript for denne opplæringen. I denne oppgaven skal du plassere alle skript i samme mappe som dine CSS-filer. Her er verktøyene vi trenger:
CSS3PIE er vår IE assistent. PIE står for Progressiv Internet Explorer, og det utvider oppførselen til Internet Explorer for å hjelpe den å gjenkjenne og vise CSS3 egenskaper.
Sjekk ut CSS3PIE nedlastingsmappen der du finner forskjellige filer. Vi skal bruke PIE.htc, og vi kaller det fra vårt CSS, så jeg foreslår at du legger det i samme mappe som vårt stilark.
Selectivizr brukes til å håndtere CSS3 Selectors. Den brukes sammen med et JavaScript-bibliotek, for eksempel jQuery eller Mootools. Jeg anbefaler at du velger Mootools, da den støtter alle Selectivizr-funksjonene (CSS selectors).
For denne opplæringen skal jeg bruke Google-vertskapet Mootools-biblioteket, så vi inkluderer det bare i hodet vårt:
Vi kan bruke jQuery til å gjengi et alternativ til CSS3s tekstskyggeegenskap. Vi trenger bare å laste ned jQuery-tekstskygge-plugin-modulen, og ta den med jQuery:
OK, det er dekket vårt verktøykasse, nå la oss se hvordan vi bruker disse verktøyene for å løse våre CSS3 hodepine?
Border-radius er trolig den mest kjente av CSS3 egenskaper. Heldigvis gjør gjengivelsen av det i Internet Explorer bare et tilfelle med å bruke CSS3PIE.
.boks border-radius: 10px; oppførsel: url (PIE.htc);
Som du kan se, må vi bare "kalle" PIE-skriptet, etter at du har definert vår ramme-radiusregel.
På samme måte som grense-radius, for at Internet Explorer skal gjenkjenne boksskygge, må vi bare inkludere PIE-skriptet. Merk at vi også kan erklære skyggefarge ved hjelp av RGBA-verdier.
.boks boks-skygge: 5px 5px 5px rgba (0, 0, 0, .75); oppførsel: url (PIE.htc);
Du kan også bruke RGBA-farger når du erklære en bakgrunnsfarge.
For å tillate CSS3 PIE å gi bakgrunnsgradienter, prepper vi bakgrunn: på følgende måte:
-kake-bakgrunn: lineær gradient ([|| ,]? , [, ] *);
Faktisk er det veldig lik de forskjellige andre nettleservalgsregler. Husk å ringe CSS3 PIE-oppførselen etterpå!
.boks bakgrunn: -webkit-lineær-gradient (topp, # 0072bc, # 00bff3); / * Safari, Chrome * / bakgrunn: -moz-lineær-gradient (topp, # 0072bc, # 00bff3); / * Firefox * / bakgrunn: -o-lineær-gradient (topp, # 0072bc, # 00bff3); / * Opera * / bakgrunn: -ms-lineær-gradient (topp, # 0072bc, # 00bff3); / * IE10 * / -pie-bakgrunn: lineær gradient (# 0072bc, # 00bff3); / * IE6 + * / oppførsel: url (PIE.htc);
Igjen, i dette tilfellet, må vi bruke -pai- prefiks:
.boks bakgrunn: url (img / flash.png) 20px 20px no-repeat, url (img / airplane.png) 90px 50px no-repeat, # 00BFF3; / * Moderne nettlesere * / -pie-bakgrunn: url (img / flash.png) 20px 20px no-repeat, url (img / airplane.png) 90px 50px no-repeat, # 00BFF3; / * IE6 + * / oppførsel: url (PIE.htc);
Den siste egenskapen CSS3 PIE henvender seg til er grensebildet:
.boks border-image: url (border.png) 27 27 27 27 runde runde; oppførsel: url (PIE.htc);
Nå er det på tide å bli skitten med Selectivizr. Inkluder JavaScript-biblioteket som vist ved starten av tut, da vil alle CSS3 Selectors bli gjenkjent av IE6+!
tabell tr: første barn bakgrunn: # 252525; tabell tr: nth-barn (2n + 1) bakgrunn: #ebebeb;
Denne effekten kan gjengis kryssbrowser mest enkelt ved hjelp av jQuery-biblioteket. Etter å ha tatt med det, ring bare textShadow () funksjon, peker til selgeren din:
For å fullføre effekten, bare legg til tekstskyggen til CSS.
.txt text-shadow: 2px 2px 2px black;
For å erstatte noen CSS3 egenskaper kan du også bruke IE filtre. Dette første eksempelet er for bakgrunnsgradienter:
.boks bakgrunn: #FFFFFF; filter: progid: DXImageTransform.Microsoft.gradient (startColorStr = '# 444444', EndColorStr = "# 999999"); / * IE6-IE9 * /
Denne andre, er ekvivalent med transformasjonsegenskapen. Syntaxen er imidlertid en slik hodepine at du anbefales å bruke en generator for å beregne den.
.boks / * IE8 + - må være på en linje, dessverre * / -ms-filter: "progid: DXImageTransform.Microsoft.Matrix (M11 = 0.9848077530122079, M12 = -0.17364817766693127, M21 = 0,17364817766693127, M22 = 0,9848077530122079, SizingMethod =" auto utvide")"; / * IE6 og 7 * / filter: progid: DXImageTransform.Microsoft.Matrix (M11 = 0,9848077530122079, M12 = -0,17364817766693127, M21 = 0,17364817766693127, M22 = 0,9848077530122079, SizingMethod = "auto expand"); margin-left: -14px; margin-topp: -21px;
Som du har sett, med ulike verktøy, kan vi sikre rimelig rendering av CSS3 i eldre nettlesere. Jeg håper dette oppfordrer deg til å ta oksen ved hornene og praktisere mange av effektene som kan oppnås med CSS3! Takk for at du leste.
Accentsconagua