Een van de grootste dilemma's waarmee webontwikkelaars worden geconfronteerd, is de incompatibiliteit van verschillende versies van Internet Explorer met de huidige webstandaarden. Hoewel Microsoft CSS3 en zelfs HTML5-ondersteuning voor IE9 heeft beloofd, kunnen Windows-gebruikers, en met name bedrijven, nog jarenlang IE8, IE7 of zelfs de gevreesde IE6 blijven gebruiken.

Dientengevolge zal het coderen van een site met exclusieve CSS3-functies alleen een groot deel van de bezoekers van uw website vervreemden, en zal het verplichten van een browser die voldoet aan de standaarden, zoals Mozilla Firefox of Google Chrome, alleen arrogant overkomen.

Een mogelijke oplossing voor het probleem is om een ​​modernisator te gebruiken. Dit is een script of een toepassing die verschillende trucs gebruikt om uw site te laten verschijnen zoals het hoort in alle browsers. CSS3 Pie is een javascript-gebaseerde modernizer die Internet Explorer helpt om coole CSS3-functies te herkennen, zoals afgeronde hoeken, zachte slagschaduwen en verloopvullingen. Het is snel, gemakkelijk en werkt meestal met heel weinig aanpassingen.

Installatie en instellingen

Deze korte tutorial gaat ervan uit dat je al een website hebt met CSS3-elementen. Om CSS3 Pie werkend te krijgen, moet je twee dingen doen: upload het javascript-pakket en voeg speciale code toe aan je CSS-bestand.

1. De download van de css3pie.com-website bevat een aantal bestanden, maar als alles volgens plan verloopt, hebt u alleen PIE.htc nodig, dit is een gecomprimeerd tekstbestand. Upload het naar een plaats op uw webserver waar uw CSS-bestand er toegang toe heeft.

2. Open uw CSS-bestand in uw teksteditor en zoek de elementen die CSS3-eigenschappen bevatten. Voeg binnen die elementen de volgende regel toe:

 gedrag: url (PIE.htc);

Het pad naar uw PIE.htc-bestand moet exact zijn, dus als het niet in dezelfde map staat als uw CSS-bestand, wijzig het dan overeenkomstig.

Het laatste element zou er ongeveer zo uit moeten zien:

 # element1 {border: 1px solid # 696; opvulling: 60px 0; text-align: center; breedte: 200 px; -webkit-border-radius: 8px; -moz-border-radius: 8px; grensradius: 8px; achtergrond: # EEFF99; gedrag: url (PIE.htc); }

Als het correct zou werken, zou u de resultaten moeten zien in IE 6, 7 en 8 onmiddellijk na het uploaden van het gewijzigde CSS-bestand.

Probleemoplossen

Als u helemaal geen wijzigingen ziet, zou u hoogstwaarschijnlijk het pad naar uw PIE.htc moeten aanpassen of zelfs de volledige URL moeten gebruiken. Onthoud dat IE alleen een htc-bestand accepteert van hetzelfde domein als de site en dat 'www.site.com' en 'site.com' als twee verschillende domeinen worden beschouwd.

In sommige gevallen moet u PIE_uncompressed.htc of zelfs PIE.php proberen om het correct te laten werken. Raadpleeg de documentatie voor meer informatie.

Ik heb gemerkt dat de combinatie van transparantie en vetgedrukte tekst resulteert in een aantal gekke uitziende woorden in IE8. Mogelijk moet u in die situaties nog steeds transparante afbeeldingsachtergronden gebruiken.

De combinatie van CSS3 Pie en sommige jQuery-functies lijkt een fout te veroorzaken in IE. Ik heb hier geen oplossing voor gevonden, maar de pagina laadt en wordt desondanks toch correct weergegeven.

Modernisering

Met zeer weinig moeite kan CSS3 Pie uw website er aantrekkelijker laten uitzien in alle belangrijke browsers, zonder de hoofdpijn van het vormen van hoekafbeeldingen of het maken van valse slagschaduwen. De voorpagina van de site bevat een demo, zodat u CSS3-eigenschappen kunt aanpassen en de live resultaten in Internet Explorer kunt bekijken. Het beste van alles CSS3 Pie is gratis en open source en gratis te downloaden.