Код CSS, который понимает только Internet Explorer

Браузер Internet Explorer не всегда утруждает себя соблюдением всех стандартов верстки W3C. В свое время это было «фишкой» Microsoft, которая пользовалась своим монопольным положением на рынке ПО, чтобы еще больше его упрочить. А до этого «вольное трактование» языка разметки помогло победить Netscape. Впрочем, речь в этой статье пойдет не о погибшем браузере и даже не о его победителях.

В результате отступления Майкрософта от некоторых стандартов HTML и CSS код может трактоваться по-разному браузером Internet Explorer и другими, «честными» браузерами (Firefox Mozilla, Opera, Safari и др.). Опытные веб-мастера и html-кодеры знают о нюансах создания качественного кроссбраузерного кода, но новички, у которых еще нет хорошего практического опыта верстки сайтов, часто набивают шишки и вспоминают родителей бывшего главы Microsoft. К сожалению, злость и обвинения – дело неконструктивное. Проблемы лучше решать, опираясь на опыт и шишки, желательно, чужие.

В этой статье я хотел бы рассказать об одной уловке при описании стилей CSS, позволяющей решить распространенную проблему: как сделать так, чтобы код верстки понимался только браузером Internet Explorer, но игнорировался всеми остальными «нормальными» браузерами. При этом JavaScript нам не понадобится, достаточно правок общего стиля CSS.

Чтобы код CSS понял только браузер IE нужно между свойством класса и значением свойства ставить не двоеточие, а знак равно. Другие браузеры, кроме Internet Explorer, такую команду проигнорируют, поскольку такая запись не описана в стандартах верстки W3C. Чтобы было понятнее, рассмотрим два практичных примера описания стиля CSS.

Пример 1: Как задать отступ блока только для IE

.example1_css_style {
margin-left: 20px;
margin-right=45px;
margin-top: 10px;
}

В этом классе первая строчка приказывает всем браузерам сделать отступ слева на 20 пикселей, а вторая – отступ на 45 пикселей справа, но только для Internet Explorer. Во всех остальных браузерах, кроме IE, отступа справа не будет.

Пример 2: Как задать разные значения одного и того же свойства CSS для каждого браузера

.example2_css_style {
margin: 0px 0px 0px 0px;
margin= 22px 22px 0px 0px;
}

В этом примере стиля CSS сначала все браузеры, в т.ч. и Internet Explorer, устанавливают нулевые отступы для блока. А во второй строчке только Internet Explorer делает отступы по 22 пикселя сверху и справа, другие браузеры эту команду не понимают и игнорируют. Т.е. для IE свойство стиля margin задается 2 раза, второй раз перезаписывая предыдущий, а для других браузеров – один раз, первый.

Вот такой простой пример того, как можно немного подправить верстку для разных типов браузеров с помощью CSS. Конечно, злоупотреблять им не стоит, иначе неоднозначности при описании вложенных стилей будут накапливаться, что приведет к появлению труднообнаружимых ошибок. Но для корректировки стилей CSS на последнем уровне вложенности, когда совсем не получается объяснить IE, что он не прав, применять эту хитрость можно. Пока опыта верстки сайтов не будет достаточно, чтобы интуитивно избегать возможных неоднозначностей в своем коде.