Filter Shadow fungerer ikke i Firefox

Enhver CSS som bruker "filter" som en eiendom er faktisk eies av Microsofts Internet Explorer og ikke kommer til å arbeide utenfor den nettleseren. Filteret attributt er ikke standard-kompatibel; Ikke bare vil det ikke fungere med Firefox og andre nettlesere, vil det ikke validere når kjøre på World Wide Web Consortium CSS validator. Dessverre er det ingen cross-browser løsning CSS skygger.

Filtre og CSS

Filtre er en proprietær Internet Explorer funksjonen. Den "filter" element for en tekstskygge krever en rekke egenskaper for å jobbe med tekst; Dette inkluderer å angi en zoom, en bakgrunnsfarge og filterelementene totalt:

.skygge {
zoom: 1;
color: # 000000;
background-color: #CCCCCC;
filter: chroma (color = # CCCCCC) skygge (color = # C0C0C0, retning = 120, styrke = 21);
}

Dette er ikke den eneste filteret spesifisert for bruk med Internet Explorer, og de alle har samme grunnleggende syntaks. Den er designet med CSS 2.1 i tankene, selv om det ikke regnes som gyldig CSS og regnes som en hack. Mens filteret fungerer i Internet Explorer, fungerer det ikke i noen annen nettleser.

CSS3 og Firefox

Løsningen for drop-skygger i Firefox og andre ikke-IE nettlesere er å bruke CSS3. CSS3 har en tekst-skygge og en box-shadow eiendom, som begge gjør akkurat det de høres ut som. Disse begge bruker samme syntaks for å angi den horisontale verdien, vertikal verdi og farge, samt opsjon uskarphet og spredning. Problemet her er at Internet Explorer har flekkete CSS3 støtte - og i april 2012, har IE9 og tidligere versjoner av IE ikke gjenkjenner skyggen eiendom som definert av CSS3. Men mellom de to elementene kan du lage et nettsted som fungerer både Firefox og IE.

Bruke Tekst-skygge og Box-shadow

Teksten-skygge og box-shadow eiendommene har samme grunnleggende konseptet. For eksempel, hvis du ønsker å sette alle H1 overskrifter for å ha en grå tekst skygge, ville CSS se slik ut:

H1 {text-shadow: 2 piksler 2 piksler 2 piksler #CCCCCC; }

Den første 2 piksler setter skyggen horisontalt ved to piksler, den andre setter skyggen vertikalt ved to piksler og tredje sett uskarphet avstand. Du kan utelate uskarphet piksler hvis du ikke vil ha en flekk på skyggen din.

Box-shadow er den samme, med et ekstra element mellom blur og farge: spredningen. Spredningen betegner størrelsen på boksen skygge.

Utvikling for flere nettlesere

Slik stiller skygget tekst som fungerer i både IE og Firefox, trenger du bare å ha både filterelementet og text-shadow eiendom på samme element. For eksempel, hvis du ønsket å lage H1 skygget i alle nettlesere, vil du bruke noe som ligner på:

.skygge {
text-shadow: 2 piksler 2 piksler 2 piksler #CCCCCC;
zoom: 1;
color: # 000000;
background-color: #CCCCCC;
filter: chroma (color = # CCCCCC) skygge (color = # C0C0C0, retning = 120, styrke = 21);
}

Dette er ikke gyldig CSS i at det ikke vil validere, men det vil skape en lignende skygget effekt i Firefox og IE.