Slik aktiverer du CSS3 Border Radius i Internet Explorer 8 og under

CSS3 gir oss muligheten til å skape avrundede hjørner med border-radius . Men som du kanskje allerede vet, er denne nye funksjonen ikke gjenkjent i Internet Explorer 8 (IE8) og dens tidligere versjoner. Så når du bruker CSS3 Border Radius til et element, vises det fremdeles som en boks med spisse tips.

Du kan finne mange forskjellige råd på Internett som tyder på at du ignorerer IE8. Du ønsker at du kan gjøre det. Men hvis du jobber på et nettsted for en statlig institusjon eller en bank, kan du ikke ha valg. Du må fortsatt gjøre nettsiden så fin som den gjør i moderne nettlesere, som inkluderer muligheten til å bruke CSS3 Border Radius.

Hvis du virkelig må gjøre nettstedet ditt IE8-klart, mens du er i stand til å bruke CSS3-funksjonen, har vi bare tipset for deg.

CSS3Pie

CSS3Pie er en slags polypfyll for CSS3 dekorative funksjoner. Bortsett fra CSS3 Border Radius som vi skal diskutere i denne artikkelen, støtter CSS3Pie også Box Shadow and Gradients, selv om den er begrenset til Linear Gradient-typen.

Last ned CSS3Pie (her). Sett den inn i prosjektkatalogen din - jeg lagde den i css- mappen. Som du også kan se fra skjermbildet nedenfor, har jeg opprettet ett stilark så vel som en HTML-fil.

Åpne stilarket i kodeditor og sett ett av elementene i HTML-filen med avrundede hjørner, slik som:

 .border-radius {høyde: 100px; bredde: 100px; bakgrunnsfarge: # 2ecc71; -webkit-grense-radius: 50px; -moz-grense-radius: 50px; border-radius: 50px; } 

Da elementets bredde og høyde er begge 100px, og border-radius er satt til 50px, blir elementet en sirkel:

I IE8, som vi forventer, vil det fortsatt være en firkant (sukk), men ikke bekymre deg.

For å aktivere den avrundede behavior: url(css/pie.htc);, sett inn denne linjen: behavior: url(css/pie.htc);, som så.

 .border-radius {høyde: 100px; bredde: 100px; bakgrunnsfarge: # 2ecc71; -webkit-grense-radius: 50px; -moz-grense-radius: 50px; border-radius: 50px; oppførsel: url (css / pie.htc); } 

Legg merke til at filbanen i url() må være enten en absolutt bane eller i forhold til HTML-filen. Du kan også legge til denne linjen i en egen fil.

Du kan ha et stilark som er utpekt for Internet Explorer. Du kan sette behavior: url(css/pie.htc); i den filen, men sørg for at den er erklært i samme CSS-velg, slik som den.

 / * erklært i ie.css * / .border-radius {oppførsel: url (css / pie.htc); } 

Oppdater siden i IE8. Det avrundede hjørnet skulle nå tre i kraft (ta-da!). Det skal fungere i IE7 også.

Feilsøking

Internet Explorer kan oppføre seg uventet. Hvis dette ikke virker (kanskje det avrundede hjørnet ikke trer i kraft, eller det valgte elementet har forsvunnet), må du legge til position og zoom å løse problemet:

Bruke CSS3 Pie i WordPress

Du er ferdig med å sette nettstedet ditt i HTML-skjema. Du bruker også pie.htc på nettstedet for å aktivere CSS3 i IE8. På dette stadiet er du klar til å forvandle nettstedet til et fungerende WordPress-tema. I dette tilfellet, som WordPress er dynamisk, hvor sider kan tjene på forskjellige nettadresser, må vi angi en absolutt bane.

Du kan enten endre banen i CSS slik:

 .border-radius {behavior: url (http: // localhost / {website} / wp-content / themes / {the_theme} / css/pie.htc); stilling: relativ; zoom: 1; } 

Eller legg til interne stiler i header.php på denne måten:

Endelig tanke

Å ha kule ting som CSS3 Border Radius arbeid i IE8 er fascinerende, og CSS3Pie gjør det skje, samtidig som vi gir oss en mindre grunn til å hate IE8.

20+ sportsrelaterte freebies til design for OL

OL i 2016 holdes i Rio de Janeiro, Brasil, og igjen konkurrenter fra hele verden sammen og prøver å gjøre hverandre best i en rekke olympiske arrangementer som vil teste utholdenhet, utholdenhet, ferdigheter og idrett av idrettsutøvere.Hvis du ønsker å bli med oss ​​når du feirer denne hendelsen, trenger du de rette designressursene. I dette i

(Tekniske og design tips)

30 Friske og gratis UI-sett for ditt neste prosjekt (del 2)

Leter du etter flere UI-kits for å utvide webdesigners bibliotek av awesomeness? Vel, du kom til rett sted! I dette innlegget har jeg håndplukket 30 vakre UI-sett som definitivt vil være til stor hjelp for ditt neste prosjekt.Det finnes et bredt utvalg av kits med forskjellige temaer, stilarter og design å velge mellom - flat, minimalistisk, totonet og mer. Al

(Tekniske og design tips)