Slik bruker du CSS3 Pie for å modernisere Internet Explorer
Et av de største dilemmaene mot webutviklere er inkompatibiliteten til ulike Internet Explorer-versjoner med dagens webstandarder. Selv om Microsoft har lovet CSS3 og til og med HTML5-støtte for IE9, kan Windows-brukere, spesielt bedrifter, fortsette å bruke IE8, IE7, eller til og med den fryktede IE6 i årene som kommer.
Som en følge av dette, vil koding av et nettsted med eksklusive CSS3-funksjoner bare fremmedgjøre en stor del av nettstedets besøkende, og forplikte dem til å laste ned en standardkompatibel nettleser, som Mozilla Firefox eller Google Chrome, vil bare komme over som arrogant.
En mulig løsning på problemet er å bruke en modernizer, som er et skript eller program som bruker en rekke triks for å gjøre nettstedet ditt slik det skal i alle nettlesere. CSS3 Pie er javascriptbasert modernizer som hjelper Internet Explorer til å gjenkjenne kule CSS3-funksjoner som avrundede hjørner, myke dråpeskygger og gradientfyll. Det er raskt, enkelt og fungerer mesteparten av tiden med svært lite justering.
Installasjon og oppsett
Denne korte opplæringen forutsetter at du allerede har et nettsted med CSS3-elementer. For å få CSS3 Pie-arbeid, må du gjøre to ting: Last opp javascriptpakken og legg til spesiell kode i CSS-filen.
1. Nedlastingen fra nettstedet css3pie.com inneholder en rekke filer, men hvis alt går som planlagt, er alt du trenger, PIE.htc, som er en komprimert tekstfil. Last opp den til et sted på webserveren din der CSS-filen din har tilgang til den.
2. Åpne CSS-filen i tekstredigeringsprogrammet, og finn elementene som inneholder CSS3-egenskaper. I disse elementene legger du til følgende regel:
oppførsel: url (PIE.htc);
Stien til PIE.htc-filen din må være nøyaktig, så hvis den ikke er i samme katalog som din CSS-fil, endrer du den tilsvarende.
Det endelige elementet skal se slik ut:
# element1 {grense: 1px solid # 696; polstring: 60px 0; tekst-align: center; bredde: 200px; -webkit-grense-radius: 8px; -moz-grense-radius: 8px; border-radius: 8px; bakgrunn: # EEFF99; oppførsel: url (PIE.htc); }
Hvis det fungerte riktig, bør du se resultatene i IE 6, 7 og 8 umiddelbart etter å laste opp den endrede CSS-filen.
Feilsøking
Hvis du ikke ser noen endringer i det hele tatt, kan du sannsynligvis trenge å justere banen til PIE.htc eller til og med bruke hele nettadressen. Bare husk at IE bare aksepterer en htc-fil fra samme domene som nettstedet, og "www.site.com" og "site.com" betraktes som to forskjellige domener.
Under noen omstendigheter må du kanskje prøve PIE_uncompressed.htc eller til og med PIE.php for å få det til å fungere riktig. Se dokumentasjonen for mer informasjon.
Jeg har lagt merke til at kombinasjonen av gjennomsiktighet og fet skrift resulterer i noen sprø ord i IE8. Du må kanskje fortsatt bruke gjennomsiktig bildebakgrunn i disse situasjonene.
Kombinasjonen av CSS3 Pie og noen jQuery-funksjoner ser ut til å gi en feil i IE. Jeg har ikke funnet en løsning for dette, men siden laster fortsatt og vises riktig til tross for det.
modernisering
Med svært liten innsats kan CSS3 Pie hjelpe nettstedet ditt til å se konsekvent attraktivt i alle de store nettleserne, uten hodepine for å måtte forme hjørnebilder eller lage falske dropshadows. Forsiden på nettstedet inneholder en demo, slik at du kan justere CSS3-egenskaper og se liveresultater i Internet Explorer. Best av alt CSS3 Pie er gratis og åpen kildekode og tilgjengelig for nedlasting uten kostnad.