УрокПодключение 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 добавить или перекрыть пару стилей - смысла создавать файл я не вижу. В такой ситуации действительно проще использовать хаки.

Базовая информация о кэше и о работе с ним в Друпале
RDFa и плюшки
Навигация

Похожие материалы

Комментарии

Аватар пользователя maximus
maximus написал:

2 способ крайне не лучший с точки зрения правил кодинга

26.02.2011 17:23
Аватар пользователя Spleshka
Spleshka написал:

Угу, так я ж и написал - валидацию не пройдёт. А значит, правила кодирования нарушены :)

26.02.2011 20:28
Аватар пользователя dfdfdfdfd
dfdfdfdfd написал:

Bartik D7. CSS-хаки тут и там. Закругления уголков к примеру. Строго следуйте указке валидатора - сказки для новичков.
P.S.
Поставь уже наконец Better Formats. Нафига Plain text нужен.

25.05.2012 17:35
Аватар пользователя Антон Кондратов
Антон Кондратов написал:

Можно вместо

drupal_get_path('theme', 'имяТемы')

использовать

$directory

Или первый вариант чет-то лучше?

06.03.2011 00:53
Аватар пользователя Spleshka
Spleshka написал:

можно. Можно и path_to_theme() использовать. Разницы нет

06.03.2011 13:29
Аватар пользователя hobocta
hobocta написал:

Хорошо. Отныне буду знать)

07.03.2011 18:50
Аватар пользователя Ололо (:
Ололо (: написал:

>> Способ 1й. Самый правильный

Не судьба вообще без php? Просто линк в шаблоне не выполнить той же функции? ;) Или это фетишЪ такой?

12.03.2011 20:41
Аватар пользователя Spleshka
Spleshka написал:

без drupal_add_css стили не будут агрегироваться, а вместе с этим и кэшироваться. И да, фетиш

13.03.2011 15:12
Аватар пользователя Ололо (:
Ололо (: написал:

Это не разумно по той простой причине, что мы обычно имеем не больше одного хак-файла для каждой версии IE, грузиться которые будут тоже только IE. Что агрегировать-то?

13.03.2011 18:15
Аватар пользователя (:
(: написал:

Кэш будет и так и так ;) Сжатие - проблема сервера. Так зачем?

13.03.2011 18:17
Аватар пользователя Spleshka
Spleshka написал:

Значит, фетиш)

13.03.2011 18:24
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

Я не бот, ввел код

05.05.2011 09:18
Аватар пользователя Spleshka
Spleshka написал:

Это радует ;)

06.05.2011 04:09
Аватар пользователя tolyan15
tolyan15 написал: 
<?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]-->

Поясните пожалуйста, где тут имяТемы, которое нужно изменить. И куда конкретно помещать файл fix-ie.css ? Можно ли его оставить в другой папке (внутри папки CSS) и как прописать путь до него.

04.10.2011 17:20
Аватар пользователя Spleshka
Spleshka написал:

Здесь имени темы нет, оно и не надо в данном случае.
Файл fix-ie.css должен находиться в корне темы. Если вы хотите переместить его в папку css, то код будет таким:

<?php print $styles; ?>
<!--[if lte IE 7]>
  <link type="text/css" rel="stylesheet" href="<?php echo base_path() . path_to_theme(); ?>/css/fix-ie.css" />
<![endif]-->
04.10.2011 17:52
Аватар пользователя Саша
Саша написал:

А как подключить стиль для firefox'а?

22.10.2011 16:52
Аватар пользователя Spleshka
Spleshka написал:

Никак :) Если у вас летит что-то только в FF, скорее всего, вы что-то не так подключили. А в принципе можете посмотреть вот сюда - там есть небольшой гид по хакам css.

22.10.2011 17:01
Аватар пользователя Alan
Alan написал:

4й способ http://drupal.org/project/conditional_styles

02.04.2012 00:48
Аватар пользователя ish
ish написал:

Может поможет кому-нибудь.

использовал 1 способ для drupal7 и очень долго не мог понять почему работает только наполовину, то есть для примера в style.css у меня такой код:

#main-area { 
	border-width: 40px; 
	-moz-border-image: url(border-image.png) 40 stretch stretch; 
	-webkit-border-image: url(border-image.png) 40 stretch stretch; 
	-o-border-image: url(border-image.png) 40 stretch stretch; 
	border-image: url(border-image.png) 40 stretch stretch; 
	background: transparent; 
	clear:both; 
	display:block; 
	overflow:hidden; 
	}

естесственно ie 8 и ниже это не могут понять, поэтому я воспользовался 1 способом и в fix-ie написал:

#main-area { 
	border: 10px solid #fff;
	background: transparent; 
	clear:both; 
	display:block; 
	overflow:hidden; 
	}

но возникла проблема наложения одной css на другую, и мой IE8 стал брать из style.css размер border 40px, а из fix-ie.css цвет для него #fff
проблему решил добавлением в template.php строки для НЕ ie браузеров и приведения кода к такому виду:

function violetgreen_preprocess_html(&$vars) {
  drupal_add_css(path_to_theme() . '/fix-ie.css', array('weight' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE), 'preprocess' => FALSE));
  drupal_add_css(path_to_theme() . '/no-ie.css', array('weight' => CSS_THEME, 'browsers' => array('IE' => FALSE, '!IE' => TRUE), 'preprocess' => FALSE));
}

естесственно остается создать no-ie.css и переместить туда из style.css все описания, которые дублируются в fix-ie.css

а можно пойти по дугому пути и чтобы использовать не 3 цсс а 2 - просто заменить в template.php no-ie.css на style.css, но тогда не забудьте убрать из info файла темы строку stylesheets[all][] = style.css

03.04.2012 21:52

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