среда, 21 июля 2010 г.

Валидность и стили в кроссбраузерном коде

Ну вот выдалась свободная минутка, решил сделать про запас несколько заметок по части веб-верстки. На данный момент в Интернете наиболее распространены 4 движка: Gecko (FireFox, SeaMonkey), Internet Explorer (Internet Explorer, Maxthon), WebKit (Google Chrome, Safari) и NetScape (NetScape Navigator, Opera). Все они по разному реагируют на таблицы стилей. Увы, Internet Explorer бьет все рекорды по некорректному отображению страниц, если быть точным, то по отображению не того, что задумывал веб-верстальщик. В связи с этим появились CSS "хаки" - куски кода, которые встраиваются либо в код, либо непосредственно в файл CSS, и все бы хорошо, если бы не... валидность. С одной стороны можно просто наплевать на нее, но, справедливости ради скажу, что валидность кода радует глаз не только заказчику, но и мне, как человеку, сдающему работу, кроме того валидность дает относительные гарантии по поводу отображения кода в разных браузерах. Выход для себя я нашел достаточно простой - php-сниппет, определяющий тип браузера, и подключающий нужный стиль в зависимости от движка:

<?

$browser=$_SERVER['HTTP_USER_AGENT'];
if(ereg('MSIE',$browser)){
    echo "/link href="[(site_url)]styles/styles_ie.css" media="all" rel="stylesheet" type="text/css"/\r\n";
}else{
    echo "/link href="[(site_url)]styles/styles.css" media="all" rel="stylesheet" type="text/css"/\r\n";
}

?>


Сниппет заточен для использования в среде MODx, и является более иллюстрацией, чем материалом для копи-паста. Итак, немного разберемся в коде: сначала получаем значение суперглобального массива $_SERVER, и значение его параметра HTTP_USER_AGENT  в частности, в котором хранится тип браузера. Далее - идет проверка на наличие в этом значении слова MSIE (MicroSoft Internet Explorer). Далее все просто - если есть, - вставляем линк на стиль styles_ie.css, если нет - соответственно. Во внутреннем тэге MODx [(site_url)] хранится корневой URL сайта (к примеру - http://example.com), и к нему приставляется остальная часть пути к CSS-файлу, в итоге получаем строку:

Для IE

<link href="http://example.com/styles/styles_ie.css" media="all" rel="stylesheet" type="text/css" />


Для других браузеров:

<link href="http://example.com/styles/styles.css" media="all" rel="stylesheet" type="text/css" />


Таким образом подвязка стилей будет происходить на лету, без использования хаков, с раздельными CSS-файлами, что, в свою очередь, поможет решить проблему валидности в кроссбраузерном коде.

Комментариев нет:

Отправить комментарий