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.

iOS har et skjult enhånds tastatur i Xcode

Når skjermstørrelsene på smarttelefonen øker, må utviklerne sørge for at de kan finne måter å klargjøre brukergrensesnittet for enhåndsbruk. I dag er det oppdaget at Apple allerede har jobbet med et enhånds tastatur som kan (eventuelt) aktiveres via kant-swipe. Funksjonen har ennå ikke blitt fullført skjønt.Utvikler Stev

(Tekniske og design tips)

Slik endrer du Microsoft Edge New Tabs Page

I likhet med mange andre nettlesere vil en ny faneblad i Microsoft's Edge-nettleser sende deg til en ny faneside. Den nye kategorien som åpnes føles mer som et sentralt hub, da det inneholder nyheter, informasjon og en liste over de beste nettstedene dine.Selv om den nye fanen siden kan være mye informativ, er det ingen benektelse at den siden føles full av rot . Så

(Tekniske og design tips)