Hvordan få IE for å støtte CSS3

Cascading Style Sheets (CSS) kontrollere utseendet og følelsen av nettsteder, og CSS3 er den nyeste spesifikasjonen for CSS. Mens CSS3 legger funksjoner som graderinger, skygger og avrundede hjørner, trenger Internet Explorer (IE) versjoner 6 til 8 ikke støtter CSS3 i det hele tatt. Legge til en poly-fyll fil - en HTC-fil som "fyller" støtten mangler IE - til webområdet ditt vil tillate deg å bruke noen grunnleggende CSS3 egenskaper. Av de få CSS3 poly-fills som finnes, den beste til å bruke for å legge til visuelle effekter er CSS3 PIE (Progressive Internet Explorer).

Bruksanvisning

1 Gå til CSS3pie.com og laste ned CSS3 PIE, en poly-fill script som legger begrenset CSS3 støtte for nettstedet ditt når de besøkende legger det i Internet Explorer versjon 6 til 8. Pakk CSS3 PIE på datamaskinen, og laste det opp til webserveren hvis din nettstedet er allerede på nettet.

2 Åpne CSS-filen tilknyttet nettstedet ditt. Velgere i CSS som "#mydiv" eller "tagname," sammen med eiendommen verdiparene som finnes mellom deres klammeparentes, sminke stil regler. Legg denne koden til hver stil regel inneholder CSS3 egenskaper:

atferd: URL (sti / til / PIE.htc);

Change "sti / til / PIE.htc" for å matche plasseringen av PIE.htc fil.

3 Finn noen lineær gradient i CSS-filen og skrive en ny eiendom-verdi-par:

-pie-bakgrunn: lineær-gradient (topp, # ffffff, # 000000);

Ovennevnte par erstatter ikke andre i koden din. Dette er et ekstra par som legger til støtte for CSS3 PIE bare. Ikke bruk "-pie-background-image". Endre verdier for graderingen, for eksempel retning eller farger, for å matche gradient du vil bruke.

4 Endre noen RGBA (rød, grønn, blå og Alpha) fargekode i CSS3 til heksadesimal. Den CSS3 PIE poly-fyll kan bruke fargeverdiene i RGBA men vil ikke gjengi fargene med noen åpenhet. La en RGBA verdi alene om at fargen ikke vil se dårlig når gjengis ugjennomsiktig.

Hint

  • Du kan oppnå mange CSS3 effekter ved hjelp av Javascript fallbacks. Disse fallbacks ofte bare legge en effekt på en gang, skjønt.
  • Vurdere å tillate at nettstedet skal degradere i eldre nettlesere. Dette betyr at selv om noen brukere ikke vil se avrundede hjørner eller gradienter, kan de likevel lese og bruke nettstedet.
  • CSS3 PIE fungerer best med vanlige, «statiske» HTML nettsteder. Da gjaldt maler eller temaer for dynamisk Content Management Systems (CMS), gjør poly-fyll fil ikke alltid fungerer eller kan oppføre seg på merkelige måter.
  • Denne teknikken vil ikke legge til tekst-skygging støtte for ditt nettsted. Du bør sjekke at fargen på teksten ikke forstyrrer lesbarhet når mangler skyggen.