x
 
↑
Сентябрь
2 •
2 •
3 •
1 •

7 •
↓
Сергей Иванов
27 сентября 2012

Артём, как вы подключаете стили для ИЕ?

Сергей, как все :-)

Самый простой и грязный способ — «хаки» в основном ЦСС:

.title {
  display: inline-block;
  *zoom: 1;  /* ИЕ 6 и 7 */
  min-height: 100px;
  _height: 100px; /* ИЕ 6 */
}

Более гибко управлять стилями для Эксплорера до 9 включительно версии можно с помощью метода опорных классов, предложенного Полом Айришем:

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

ЦСС в таком случае будет аккуратнее:

.title {
  display: inline-block;
  min-height: 100px;
}
.ie6 .title,
.ie7 .title {
  *zoom: 1;
}
.ie6 .title {
  height: 100px;
}

Условными комментариями можно подключить дополнительный style_ie.css только для ИЕ, и там прописать все необходимые исключения:

<link rel="stylesheet" href="style.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="style_ie.css" />
<![endif]-->

Обычно это делают для успешной валидации, но управляться с двумя файлами неудобно — в отрыве от контекста хаки становятся нечитаемыми.


Недавно я нашёл способ, при котором все стили пишутся в одном месте, а каждый браузер получает отдельный файл с нужными правилами. Идея не нова, но мой способ отличается простотой реализации — нужен только «Компас».

Уже знакомый фрагмент там выглядел бы так:

.title {
  display: inline-block;
  min-height: 100px;
  @if $ie == 1 {
    /* Код для ИЕ 8, 7, 6 */
    *zoom: 1;  /* ИЕ 6 и 7 */
    _height: 100px; /* ИЕ 6 */
  }
}

Вот как это работает — есть файлы, в которых пишутся стили: _title.scss, _logo.scss, _article.scss

Они собираются в _style.scss:

@import "_title";
@import "_logo";
@import "_article";
 Об условных комментариях на сайте МСДН

А _style.scss импортируется уже в финальный style.scss:

$ie: 0; /* Не ИЕ */
@import "_style";

И ie-style.scss:

$ie: 1; /* ИЕ */
@import "_style";
 Файлы, начинающиеся с нижней черты, не компилируются Компасом в ЦСС напрямую, но используются для импорта.

При сборке препроцессор проверит переменную $ie и запишет в результирующий ЦСС только нужные правила. Остаётся правильно подключить файлы с помощью условных комментариев:

 Если вы используете «Стилус», обратите внимание на метод отделения стилей ИЕ Романа Комарова. 
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="style.css" />
<!--<![endif]--><!--[if lte IE 8]>
<link rel="stylesheet" href="ie-style.css" />
<![endif]-->

В примере выше я отделяю все Эксплореры < 9 версии разом, но при необходимости возможно и более точное разделение на версии.

Пользуясь таким методом, вы не только спрячете иешные костыли от остальных браузеров, но и ускорите загрузку в самом ИЕ, не отдавая ему, например, шрифты, закодированные в base64 (часто это сотни килобайт):

@if $ie == 1 {
  @font-face {
    font-family: 'PF Centro';
    src: font-url('pfcentro-regular.eot');
    font-weight: normal;
    font-style: normal;
  }
} @else {
  @font-face {
    font-family: 'PF Centro';
    src: url(data:application/x-font-woff;...) format('woff');
    font-weight: normal;
    font-style: normal;
  }
}

Уважаемые советчики, что я забыл?

 Обратите внимание: здесь стиль для ИЕ подключается не в дополнение к основному, а вместо него.

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии
Андрей Ситник
27 сентября 2012

Вместо @if $ie == 1 в новом Сассе 3.2 можно использованые блочные примеси. Будет что-то типа:

.title {
  display: inline-block;
  min-height: 100px;
  @include for_ie {
    / Код для ИЕ 8, 7, 6 /
  }
}
Ростислав Чебыкин
27 сентября 2012

Во-первых, прежде чем подключать отдельные стили для IE (или для любого другого браузера), стоит задуматься, нужно ли вообще заниматься browser sniffing’ом. По моему опыту, чаще всего — не нужно. Сейчас всё-таки 2012 год, а не 1995-й.

Далее, допустим, что у нас тот редкий случай, когда нужно. Если мы делаем не статические странички, а используем какой-нибудь серверный движок, то, на мой взгляд, все проблемы разделения браузеров целесообразно решать на сервере. Получить информацию о браузере в заголовках ХТТП и отдать обратно именно тот код, который предназначен для этого браузера. Без этих всяких несусветных условных комментариев и прочих закидонов.

Кстати, раз уж зашла речь про подключение ЦСС. Меня иногда спрашивают, где лучше держать код ЦСС — в одном файле или в нескольких. Если я отвечаю, что технически лучше в одном,— мне возражают, что тогда с этим файлом будет сложно работать верстальщику; гораздо удобнее, когда шрифты в одной таблице стилей, рамки — в другой, позиционирование — в пятой, и так далее.

И снова приходится объяснять, что верстальщик не обязан иметь дело с теми же файлами ЦСС, которые отправляются в браузер конечного пользователя. Мало того, если в крупном проекте такое происходит,— значит, что-то не так либо с проектом, либо с верстальщиком. Правильный путь — в том, чтобы верстальщик работал с кодом ЦСС так, как ему удобнее. Хоть десять файлов, хоть сто, хоть вообще не файлы ЦСС, а таблица в формате Эксель. А браузер при этом должен получать то, что ему удобнее. То есть, чаще всего — один большой файл ЦСС, который ещё и оптимизирован: без необязательных пробелов и переводов строк, и так далее. Соответственно, в недрах сайта должна быть какая-то машинка, которая автоматически переводит ЦСС из того формата, с которым работает верстальщик, в тот, который отдаётся браузеру.
Вадим Макеев
28 сентября 2012

Если в коде уже есть опорные классы, то звёздочка для свойства zoom не нужна — второй пример ЦСС-кода.

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.
Сайты для слабовидящих 2 • За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 • С чего начать изучение ЦСС? 1 • Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5 •




Недавно всплыло

Экран ожидания в поликлинике 6 • 1 • Почему дизайнер должен уметь писать текст? 8 • Все уже успели заметить, что вы почти во всех пятничных примерах советуете немного поунижаться 12 •