chevron-left chevron-right

[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:
Zestawienie obsługi selektorów zależnie od frameworka JS

Zestawienie obsługi selektorów zależnie od frameworka JS

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>
Następnie dodajemy plik emulatora:
<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.

  • Coś nie mogę się przyzwyczaić do Twojego nowego szablonu 🙂 Artykuł fajny. Ja w ogóle zacząłem pracować na MooTools. Wg mnie jest lepszy niż jQuery, a bynajmniej lepiej mi się pracuje na tym frameworku.

  • wodzik

    A gdzie jest rss?! Blog bez rss to nie blog 😉

  • zapomniałem dodać 😉
    dzięki za zwrócenie uwagi

  • Bardzo mi się podoba ten skrypt. Obsługa selektorów w duecie z frameworkiem Mootools jest wręcz idealna. Najbardziej jestem zadowolony ze wsparcia dla :first-child i :last-child, których używanie wydaje mi się wręcz naturalne i pomaga unikać dodawania nadmiarowego kodu na stronach (np. w nawigacji). Dobry wpis.