CSS хаки и подстройка под браузер

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

Проблемы

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

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

Как работает хак по подстройке под браузер

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

Допустим, вы устанавливаете промежуток между заголовком и остальным содержимым в 25 пикселей в Internet Explorer. В IE это расстояние будет выглядеть нормально, но в Opera, Firefox и Safari промежуток будет слишком большим и гораздо лучше будет смотреться тогда, когда его величина составит 10px. Чтобы достигнуть того, чтобы во всех браузерах все выглядело одинаково, вам нужно создать следующие 2 правила:

#header {margin-bottom:25px}
#header {margin-bottom:10px}

Первая команда предназначена для IE, вторая - для всех остальных браузеров. И как же это будет работать? Ну, прямо сейчас не будет конечно, потому что все браузеры могут понять оба правила и, соответственно, будут использовать второе, потому что оно является последним.

Посредством же добавления CSS хака мы можем спрятать второе правило от IE. Это значит, что IE даже не будет знать, что второе правило существует, и поэтому будет использовать первое. Как это сделать? Читаем дальше.

Подстройка под Internet Explorer

Для того, чтобы заставить IE использовать нужное нам правило, мы можем воспользоваться командой выбора потомка, которую IE не понимает. Эта команда включает два элемента, один из которых является потомком другого. В нашем случае html>body ссылается на потомка, body, содержащегося в родительском элементе html.

Таким образом, наши команды преобразуются к следующему виду:

#header {margin-bottom:3em}
html>body #header {margin-bottom:1em}

IE не может понять второе правило CSS из-за того, что не знает, что нужно делать с выражением html>body , поэтому он будет использовать первое правило. Все остальные браузеры будут использовать второе правило.

Подстройка под IE 5

На первый взгляд может показаться довольно странным тот факт, что нужно использовать разные правила для различных версий IE, но для IE5 это действительно важно. Объясняется это тем, что IE5 неправильно "понимает" боксовую модель. По стандарту при установке ширины элемента в CSS, набивка и рамки НЕ включаются в это значение. Однако же IE5 каким-то непостижимым образом включает эти величины в ширину, вызывая тем самым уменьшение ширины элементов в браузере.

Нижеприведенное правило устанавливает ширину элемента, равную 10em, для всех браузеров, кроме IE5, в котором ширина элемента будет 5em (IE5 включает набивку с обеих сторон при расчете ширины + рамка):

#header {padding: 2em; border: 0.5em; width: 10em}

Решением этой проблемы является хак box model hack, придуманный Tantek Çelik, который благодаря ему стал довольно известен в среде активистов CSS. Сейчас вы увидите, что он из себя представляет. Итак, для того, чтобы подстроиться под IE5 и установить для него свое правило CSS, нужно использовать такую запись:

#header {padding: 2em; border: 0.5em; width: 15em; voice-family: ""}""; voice-family:inherit; width: 10em}

Как он до этого догадался, представить себе совершенно невозможно... Но самым главным является то, что это действительно работает, т.е. сначала IE5 установит ширину в 15 пикселей, в которую будут включены набивка с обеих сторон и рамки (слева и справа). Это даст искомую ширину 10em в IE5.

Далее значение 15em будет заменено вторым значением 10em всеми браузерами, кроме IE5, который по какой-то причине не понимает команды CSS, следующей сразу после хак-выражения. Это не самое красивое решение, конечно, но зато рабочее.

Подстройка под IE для MAC

IE для MAC, откровенно говоря, выделывает вообще непонятные вещи с CSS. Видимо, браузер можно начинать считать устаревшим :), поскольку Microsoft не собирается выпускать для него обновлений. Поэтому многие разработчики пишут код таким образом, чтобы сайт был хотя бы нормально виден в IE/Mac, а не обладал сравнимыми с остальными браузерами функциональностью и дизайном. Пользователям, которые используют IE/Mac, будут доступны все ресурсы сайта, и этого вполне достаточно.

Чтобы спрятать команды, используя хак IE/Mac CSS hack, нужно просто заключить каждое из них между блоками с тире и звездочками:

/* Hide from IE-Mac */
#header {margin-bottom:3em}
#footer {margin-top:1.5em}
/* End hide */

IE/Mac просто проигнорирует все эти команды. Этот хак может быть полезен в том случае, если определенная часть не работает должным образом в IE/Mac. Если же этот раздел не является основным, то вы просто можете спрятать его от IE/Mac таким образом:

#noiemac {display: none}

/* Hide from IE-Mac */
#noiemac {display: block}
/* End hide */

The first CSS rule hides the entire section assigned the noiemac id (i.e. <div id="noiemac">). The second CSS rule, which IE/Mac can't see, displays this section.

Первое правило CSS скроет весь раздел от IE/Mac, который имеет id noiemac (т.е. <div id="noiemac">). Второе правило, которое IE/Mac не видит, отобразит скрытый предыдущим правилом раздел, но не в IE/Mac.

Подстройка под Netscape 4

Netscape 4 имеет ограниченную и неправильную поддержку CSS. Делать разметку с помощью CSS под этот браузер, который теперь используется не более, чем одним процентом пользователей, может быть весьма трудоемкой задачей. По этой причине принято просто скрывать все файлы CSS от него. Этого можно достичь использованием директивы @import.

<style type="text/css">@import url(cssfile.css);</style>

Netscape 4 отобразит необработанную стилями страницу, поскольку не понимает директивы @import.

Проверка вашего сайта в различных браузерах

На время написания статьи наиболее распространенными браузерами были IE5, IE6, Firefox, Opera и Safari (самую свежую статистику можно посмотреть на TheCounter.com). Все эти браузеры + некоторые устаревшие можно загрузить с Evolt browser archive. Если вы не знаете как можно установить сразу несколько версий IE на ваш компьютер, посмотрите, как это можно сделать здесь.

Лучше всего конечно, чтобы вы проверили, как выглядит ваш сайт во всех этих браузерах, причем как на PC, так и на Mac. Если у вас нет Mac компьютера, вы можете сделать снимок экрана вашего сайта в Safari через iCapture или попробовать Browsercam, у которого имеются более широкий набор возможностей для этого.

Выводы

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

Статья написана Трентоном Моссом.

Комментарии по поводу перевода посылать сюда: