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:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Tytuł strony</title>
<link rel="stylesheet" media="all" href="style.css" />
<!--[if lt IE 9]><link rel="stylesheet" media="all" href="iefix.css" /><![endif]-->
<!--[if lt IE 9]><script src="js/html5.js"></script><![endif]-->
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/main.min.js"></script>
</head>
<body>
...
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:
add_action( 'wp_enqueue_scripts', 'wpsam_theme_enqueue' );
function wpsam_theme_enqueue()
{
$version = '1.1';
// Rejestrujemy style
wp_register_style( 'style', get_template_directory_uri() . '/style.css', null, $version);
wp_register_style( 'iefix', get_template_directory_uri() . '/iefix.css', null, $version);
// Załączamy style
wp_enqueue_style( 'style' );
wp_enqueue_style( 'iefix' );
//dodajemy warunki dla IE
global $wp_styles;
$wp_styles->add_data( 'iefix', 'conditional', 'lt IE 9' );
}
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:
add_action( 'wp_enqueue_scripts', 'wpsam_theme_enqueue' );
function wpsam_theme_enqueue()
{
$version = '1.1';
// Rejestrujemy style
wp_register_style( 'style', get_template_directory_uri() . '/style.css', null, $version);
wp_register_style( 'iefix', get_template_directory_uri() . '/iefix.css', null, $version);
// Załączamy style
wp_enqueue_style( 'style' );
wp_enqueue_style( 'iefix' );
//dodajemy warunki dla IE
wp_style_add_data( 'iefix', 'conditional', 'lt IE 9' );
}
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?