Warunkowe style CSS i JavaScript dla Internet Explorera w WordPressie

Przygotowując szablon strony, bardzo często zdarza się, że do poprawnego działania w Internet Explorerze, trzeba przygotować specjalne skrypty CSS i/lub JavaScript. Aby nie mieszać części dla IE z podstawowym kodem, stosuje się wyrażenia warunkowe, które obsługiwane są tylko przez przeglądarkę Microsoftu.

Zobaczmy przykład nagłówka strony, w którym zostało dołączonych kilka skryptów z warunkami dla Internet Explorera:

Plik style.css  zostanie wczytane przez wszystkie przeglądarki, jednak iefix.css  już tylko przez Internet Explorera o wersji wcześniejszej niż 9 (warunek if lt IE 9 ). Podobnie sprawa wygląda z JavaScript. W powyższym przykładzie  jquery-1.8.3.min.js  i  main.min.js  zostaną wczytane wszędzie, natomiast  html5.js  znowu tylko przez przeglądarki starsze niż IE9.

Zgodnie z dobrymi praktykami odnośnie programowania w WordPressie, załączenie plików CSS i JS bezpośrednio w pliku header.php nie jest dobrym pomysłem. Powinniśmy użyć do tego funkcji  wp_register_style, i wp_enqueue_style dla stylów oraz  wp_register_script i wp_enqueue_script dla JS (jeżeli nie korzystałeś jeszcze z tych funkcji, to zachęcam do przejrzenia świetnego tutoriala na ten temat, na stronie WpTuts+).

Warunkowy CSS dla Internet Explorera

Chcąc skorzystać z wyżej wymienionych funkcji do podłączania CSS dla IE pojawia się problem, ponieważ nie obsługują one wyrażeń warunkowych. Pytanie zatem, co zrobić w takiej sytuacji? W przypadku stylów okazuje się, że jest na to rozwiązanie. Przed wersją 3.6 WordPressa, kod dodający warunkowe style wyglądałby tak:

Po dodaniu stylu iefix.css, dokonujemy modyfikacji w zmiennej globalnej  $wp_styles  i dodajemy warunki dla Internet Explorera.

W wersji 3.6 WordPressa została wprowadzona funkcja wp_style_add_data (w chwili pisania tego artykułu, nie było o niej jeszcze informacji w Codexie), która jest wrapperem do  $wp_styles->add_data.  Z nową funkcją, kod będzie wyglądał tak:

A co z warunkowym JavaScript?

Niestety tutaj jesteśmy w gorszej sytuacji niż w przypadku stylów, ponieważ globalna zmienna ze skryptami  $wp_scripts  nie posiada funkcji takiej jak add_data . Brak tej funkcjonalności został zgłoszony pod numerem #16024 prawie 3 lata temu i od tego czasu trwają dyskusje.

Moim zdaniem, jeżeli dla stylów mamy gotowe rozwiązanie, to dla skryptów powinno istnieć analogiczne. Nie zgodzę się tutaj z argumentacją podaną w zgłoszeniu, że Microsoft wraz z wprowadzeniem IE10 porzuca skrypty warunkowe, więc nie ma sensu wspierania starych rozwiązań. To, że je porzuca w IE10, nie znaczy, że ludzie przestaną używać starszych przeglądarek!

Dla warunkowych skryptów JS, nie ma więc innej metody, jak dodawanie ich bezpośrednio w kodzie, w zależności od potrzeb przed lub po wywołaniu funkcji  wp_head()  w header.php.

A Wy jak radzicie sobie ze skryptami tylko dla IE w waszych szablonach?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *