УрокПодключение CSS для отдельных браузеров
Как известно, не все браузеры одинаково воспринимают файлы стилей css. В основном, проблемы возникают со старыми версиями мелкософтовского творения Internet Explorer (7 версия и ниже). Кстати, если проблема возникает в современных браузерах (наподобие Opera, Mozilla Firefox, Chrome), то я настоятельно рекомендую пересмотреть вёрстку страницы.
Так вот. Проблема с браузерами есть. И я знаю как минимум три способа решения этой проблемы.
Способ 1й. Самый правильный
Стили для браузеров, которые некорректно понимают ваш css, пишутся в отдельном файле. Обычно этим браузером, как я уже говорил, является Internet Explorer, и файлики такие называются fix-ie.css
Решение для Drupal 6
Далее в блоке <head/> файла page.tpl.php пишется следующий код:
<head> ... <?php print $styles; ?> <!--[if lte IE 7]> <link type="text/css" rel="stylesheet" href="<?php echo base_path() . path_to_theme(); ?>/fix-ie.css" /> <![endif]--> ... </head> ...
Меняем имяТемы на реальное название своей темы - и когда вы откроете Internet Explorer версии 7 и ниже - этот файл будет добавлен в общий набор файлов стилей, и даже закэшируется, если кэширование включено.
За версию браузера, к которой будет подключен файл стилей, отвечает вот эта строка:
<!--[if lte IE 7]>
Здесь lte означает LESS THEN or EQUAL (т.е. - меньше или равно). Так же существуют:
- lt - строго меньше
- gt - строго больше
- gte - больше или равно
Выбирая нужное значение этого параметра, можно точно определить, к каким браузерам и их версиям продключать дополнительные стили.
Решение для Drupal 7
В седьмом Друпале для добавления стилей была разработана специальная функция (писать в template.php):
... function имяТемы_preprocess_html(&$vars) { drupal_add_css(path_to_theme() . '/fix-ie.css', array('weight' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 7', '!IE' => FALSE), 'preprocess' => FALSE)); } ... ?>
Способ 2й. Не самый правильный, но для небольших решений можно
Использовать так называемые хаки. То есть стили, которые будет понимать только определённые браузеры. Пример:
body { background: white; /* Белый фон */ background: black !!important; /* чёрный фон */ }
Во всех браузерах, кроме IE 6 и 7, фон будет белый. А в IE 6 и 7 - чёрный. Ещё пример:
body { background: white; /* Белый фон (для всех браузеров) */ *background: black ; /* Чёрный фон (для браузера IE7 и ниже) */ }
Эти стили поймёт только IE 7 версии:
*:first-child+html body { background: white; /* Белый фон */ }
Минусы использования:
- Большая вероятность того, что стили станут невалидными.
- Неизвестно, как воспримут эти хаки новые версии браузеров
Посмотреть список остальных хаков можно тут
Способ 3й. Странный, но вообще можно
Он мне пришёл в голову только в момент написания статьи. Стили ведь можно добавлять и с помощью скриптов :) Например, напишем скрипт, который будет для IE 7 менять цвет фона на чёрный:
if ($.browser.ie && $.browser.version == 7) { $('body').css('background', 'black'); }
Очевидные минусы:
- Читабельность стилей снижается
- Если у пользователя отключены скрипты (а у пользователей старых IE это не такая уж редкость) - стили не подключатся
- При невысокой скорости соединения с Интернетом сайт на глазах у пользователя будет "прыгать", применяя изменения от подгруженных скриптов
Вы можете выбрать любой из вариантов в зависимости от ваших нужд. Лично я почти всегда использую первый вариант. Но если мне надо для IE добавить или перекрыть пару стилей - смысла создавать файл я не вижу. В такой ситуации действительно проще использовать хаки.
- Spleshka
- 26.02.2011
- 27707
Комментарии
2 способ крайне не лучший с точки зрения правил кодинга
Угу, так я ж и написал - валидацию не пройдёт. А значит, правила кодирования нарушены :)
Bartik D7. CSS-хаки тут и там. Закругления уголков к примеру. Строго следуйте указке валидатора - сказки для новичков.
P.S.
Поставь уже наконец Better Formats. Нафига Plain text нужен.
Можно вместо
использовать
$directory
Или первый вариант чет-то лучше?
можно. Можно и path_to_theme() использовать. Разницы нет
Хорошо. Отныне буду знать)
>> Способ 1й. Самый правильный
Не судьба вообще без php? Просто линк в шаблоне не выполнить той же функции? ;) Или это фетишЪ такой?
без drupal_add_css стили не будут агрегироваться, а вместе с этим и кэшироваться. И да, фетиш
Это не разумно по той простой причине, что мы обычно имеем не больше одного хак-файла для каждой версии IE, грузиться которые будут тоже только IE. Что агрегировать-то?
Кэш будет и так и так ;) Сжатие - проблема сервера. Так зачем?
Значит, фетиш)
Я не бот, ввел код
Это радует ;)
Поясните пожалуйста, где тут имяТемы, которое нужно изменить. И куда конкретно помещать файл fix-ie.css ? Можно ли его оставить в другой папке (внутри папки CSS) и как прописать путь до него.
Здесь имени темы нет, оно и не надо в данном случае.
Файл fix-ie.css должен находиться в корне темы. Если вы хотите переместить его в папку css, то код будет таким:
А как подключить стиль для firefox'а?
Никак :) Если у вас летит что-то только в FF, скорее всего, вы что-то не так подключили. А в принципе можете посмотреть вот сюда - там есть небольшой гид по хакам css.
4й способ http://drupal.org/project/conditional_styles
Может поможет кому-нибудь.
использовал 1 способ для drupal7 и очень долго не мог понять почему работает только наполовину, то есть для примера в style.css у меня такой код:
естесственно ie 8 и ниже это не могут понять, поэтому я воспользовался 1 способом и в fix-ie написал:
но возникла проблема наложения одной css на другую, и мой IE8 стал брать из style.css размер border 40px, а из fix-ie.css цвет для него #fff
проблему решил добавлением в template.php строки для НЕ ie браузеров и приведения кода к такому виду:
естесственно остается создать no-ie.css и переместить туда из style.css все описания, которые дублируются в fix-ie.css
а можно пойти по дугому пути и чтобы использовать не 3 цсс а 2 - просто заменить в template.php no-ie.css на style.css, но тогда не забудьте убрать из info файла темы строку stylesheets[all][] = style.css
Комментировать