Vill man få t ex rundade hörn och skugga på en webbsida med en ram var man förr tvungen att använda olika hacks men numera finns det i senaste versionen av CSS stöd för att få dessa effekter direkt i CSS-koden. Vill man t ex få rundade hörn på en box använder man parametern border-radius (-webkit-border-radius för Safari och Google Chrome och –moz-border-radius för Firefox), vill man dessutom få en skugga på boxen lägger man till parametern box-shadow, –webkit-box-shadow och –moz-box-shadow för att täcka in alla olika webbläsare.
Då kan man få en sida att se ut t ex så här:
Detta har dock inte fungerat i Internet Explorer utan där skulle ovanstående sida se ut så här:
Inga rundade hörn eller skugga alltså.
Det har funnits olika lösningar på det här men ingen som har fungerat speciellt bra som jag har sett i alla fall… tills nu. Idag hittade jag äntligen lösningen på problemet hur man ska få CSS3-effekter att fungera även i Internet Explorer. Den lösningen hittar ni på den här sidan:
CSS3 support for Internet Explorer 6, 7, and 8
Det enda man behöver göra för att få CSS3 att fungera även i Internet Explorer är alltså att ladda hem filen ie-css3.htc, lägga den i roten av den webbplats du jobbar med och sedan lägga in koden behavior: url(ie-css3.htc); i definitionen av den typ av divider du vill applicera effekten på. I exempelsajten ovan, www.blacongo.se (som jag för övrigt har byggt i WordPress), ligger innehållet (det som ligger i den vita rutan) i en divider som heter wrapper. I temats css-fil är wrapper definierad så här:
#wrapper { background: #fff; margin-top: 20px; margin-bottom:20px; padding: 0 20px; border:thin solid #000; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; -moz-box-shadow:2px 2px 15px #000; -webkit-box-shadow:2px 2px 15px #000; -khtml-box-shadow:2px 2px 15px #000; box-shadow:2px 2px 15px #000; }
Vill man nu få rundade hörn och skugga även i Internet Explorer lägger jag nu till behavior: url(ie-css3.htc); i slutet av #wrapper så att det ser ut så här:
#wrapper { background: #fff; margin-top: 20px; margin-bottom:20px; padding: 0 20px; border:thin solid #000; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; -moz-box-shadow:2px 2px 15px #000; -webkit-box-shadow:2px 2px 15px #000; -khtml-box-shadow:2px 2px 15px #000; box-shadow:2px 2px 15px #000; behavior: url(ie-css3.htc); }
Spara css-filen och ladda upp den. Ftp:a sedan upp filen ie-css3.htc till roten av webbplatsen och ladda därefter om sidan i Internet Explorer för att se resultatet.
Anledningen till att sökvägen till filen ie-css3.htc inte är relativ till den mapp css-filen ligger i är att Microsoft en gång i tiden beslutade sig för att strunta i webbstandarder och valde att göra sökvägen relativ till roten av webbplatsen istället för relativ till mappen filen man jobbar med ligger i.
Så här ser Blå Congos webbplats ut i Internet Explorer efter applicerandet av ovanstående:
