[Mootools][CSS] Jak sprawić, aby Internet Explorer obsługiwał CSS3?

W dzisiejszym artykule opiszę sposób na problem związany z selektorami CSS3 w przeglądarkach Internet Explorer 8 i niższymi. Z tym problemem spotkałem się pracując nad nowym szablonem dla tego bloga i postanowiłem się podzielić z Tobą rozwiązaniem tego problemu.

Rozwiązanie jest zaskakująco proste, ale nie pozbawione wad. Należy zastosować swoistego rodzaju emulator selektorów CSS3 napisany w JS, w postaci biblioteki selectivizr.
Jako że, najbardziej zależało mi na poprawnej obsłudze selektorów:

• :nth-of-type
• :first-child
• :first-of-type

To na podstawie tabeli:

Postanowiłem wykorzystać bibliotekę Mootools (zdziwiło mnie, że jQuery nie potrafi poprawnie obsłużyć tych selektorów w IE).
W pliku HTML dołączamy bibliotekę Mootools:

<script src="(ścieżka_do_folderu)/js/mootools-core-1.3.1-full-compat-yc.js"></script>

<script src="(ścieżka_do_folderu)/js/mootools-core-1.3.1-full-compat-yc.js"></script>

Następnie dodajemy plik emulatora:

<script src="(ścieżka_do_folderu)/js/selectivizr.js"></script>

<script src="(ścieżka_do_folderu)/js/selectivizr.js"></script>

I voila, dzieje się magia. Selektory na których mi w tym przypadku zależało idealnie działają we wszystkich wersjach przeglądarki Internet Explorer.
Należy pamiętać, że to rozwiązanie ma wadę. Do emulacji tych selektorów potrzebna jest włączona obsługa JS w przeglądarce (znakomita większość osób ma ją właczoną) i należy jako tako zadbać o poprawny wygląd strony przy wyłączonej obsłudze JS (przyznam się, sam nie do końca zadbałem o tą poprawność u siebie 😉 ).
Mam nadzieję, że ten artykuł pomoże rozwiązać Twój problem z selektorami CSS3 w Internet Explorerze.