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.

Slik installerer du WordPress lokalt med Vagrant

Utvikling lokalt er en av de beste tingene som kan skje med deg. Ikke bare lar du deg slippe opp med opplastings- / nedlastningstider, du kan lage så mange prosjekter som du vil, jobbe med ekte domener lokalt og generelt øke hastigheten på alt du gjør .Vagrant er et flott stykke programvare som lager reproduserbare og bærbare virtuelle maskiner som du kan bruke som lokale webserver miljøer. I de

(Tekniske og design tips)

Google Polymer - Hvordan det vil endre måten Web Apps er bygget

Sammen med Google Photos har Google også bygget Polymer fra bunnen av, og tar opp ytelsesforbedring og effektivitet. Tenk på Polymer som en SDK (Software Development Kit) på nettet, noe som gjør webapplikasjonsutvikling så mye raskere med en ny standard kalt Web Components.Webkomponenter tillater oss å lage egendefinerte elementer og koder for våre nettsteder . I det

(Tekniske og design tips)