CSS3 triks for IE

Internet Explorer (IE) er en profilert nettleser sammen med hver installasjon av Windows. Mye til frustrasjon for webutviklere, derimot, har en tendens til IE å henge i støtte for nyere funksjoner, for eksempel Sheet nivå 3 støtte Cascading Style (CSS3). Selv om endringen er fortsatt treg, kan du bruke mange av de populære CSS3 triksene i IE 9 og nyere. Du kan også etterligne noen CSS3 triks i tidligere IE-versjoner med "filter" koden i CSS.

lineære gradienter

Internet Explorer-versjoner under ti støtter ikke CSS gradienter. Internet Explorer 10 støtter gradienter med bruk av "-MS" browser prefiks. Gradient bruk for IE 10 leseren samsvar med W3C anbefaling, så det ser ut som dette:

background-image: -MS-lineær-gradient (topp, # ff0000, # 00FF00);

Koden ovenfor gir en bakgrunn en lineær gradient som stopper i øverste høyre hjørne, som strømmer rett ned fra toppen, falming fra rødt til grønt. Den tilsvarende filter kode som vil generere denne gradient i pre-IE 10 nettlesere er som følger:

filter: progid: DXImageTransform.Microsoft.gradient (startColorStr = '# ff0000 ", EndColorStr =' # 00FF00 ');

RGBA Colors

RGBA farger kan erstatte heksadesimale koder der du vil bruke en semi-transparent farge. Bare IE 9 og over støtte RGBA farger. Koden for RGBA består av rød, grønn og blå fargeverdier, samt en prosentandel av alfa-kanal gjennomsiktighet angitt som en verdi mellom 0 og 1:

farge: RGBA (255,0,0,0.7);

Listen CSS stil setter en farge til rødt med en tetthet på 70 prosent. Du kan bruke et filter tilsvarende for å skape den samme effekten med denne koden:

filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ff000070, endColorstr = # ff000070);

Merk at start- og slutt farger ovenfor er identiske, og de to siste sifrene vedlegges både heksadesimale farger representerer åpenhet verdi mellom 0 og 99.

Box Shadows

Versjoner av IE som begynner med ni støtte den "box-shadow" eiendom som skaper skygger. Merk at "box-shadow" gjelder ikke tekst skygger. I versjoner som støtter "box-shadow," du trenger ikke å bruke en nettleser prefiks. Koden er som følger:

box-shadow: 5px 5px 10px #eeeeee;

Koden ovenfor skaper en skygge motvirket av fem piksler fra toppen (den første verdien) og venstre (den andre verdien). Radiusen uskarphet er satt til 10 piksler, og fargen av skyggen er en lys grå. Det er ingen filter tilsvarende som vil skape boks skygger i IE 8 og nedenfor; må du opprette en uskarp bakgrunn bilde og legg den i en DIV under ønsket element for å skape en skygge for tidligere IE-versjoner.

Border Radius

Internet Explorer begynte støtte for avrundede hjørner med versjon 9. "border-radius" eiendom skaper avrundede hjørner for HTML-elementer. Som navnet antyder, nettlesere bruke avrunding til grensen av et element; der ingen grense er satt, blir selve elementet avrundet. Her er koden:

border-radius: 20px;

border-top-venstre-radius: 10px;

Koden ovenfor viser både stenografi og longhand versjoner av denne eiendommen. Individuelle hjørner følger form av longhand versjon. Jo høyere verdien av en radius grense, jo mer rund et element blir.