Все больше и больше веб-разработчиков работают над таблицами и приходят к идее использования CSS для управления макетами сайтов. И, учитывая множество преимуществ использования CSS, таких как более быстрое время загрузки, улучшенный доступ и более простое управление сайтом, почему бы и нет?
Проблема с CSS
Исторически основной проблемой с использованием CSS было отсутствие поддержки браузера. Это уже не так, поскольку браузеры версии 5, которые обеспечивают хорошую поддержку CSS, теперь используют более 99% используемых браузеров.
Проблема, которая остается, заключается в том, что браузеры могут иногда интерпретировать команды CSS по-разному, что само по себе заставляет многих разработчиков поднимать руки вверх и переключаться обратно на идеальные по размеру таблицы. Не бойся, хотя! По мере того, как вы будете больше узнавать о CSS, вы постепенно начнете понимать различные интерпретации браузера и поймете, что их не так уж и много, и что, при необходимости, их специфические особенности могут быть приспособлены к использованию различных обходных путей или хаков.
Как работают CSS-хаки
Способ CSS-хаков работает так: отправьте одно правило CSS в браузер (ы), который вы пытаетесь обмануть, и второе правило CSS, которое переопределяет первую команду для других браузеров. Если у вас есть два правила CSS с одинаковыми селекторами, второе правило CSS почти всегда будет иметь приоритет.
Скажем, например, вы хотите, чтобы пространство между областью заголовка страницы и ее содержимым составляло 25 пикселей в Internet Explorer. Этот разрыв может хорошо выглядеть в IE, но в Firefox, Opera и Safari разрыв огромен — вы решаете, что разрыв в 10px выглядит намного лучше. Чтобы добиться идеального внешнего вида во всех браузерах, вы можете использовать следующие два правила CSS:
#header {margin-bottom: 25px}
#header {margin-bottom: 10px}
Первая команда предназначена для IE, вторая для всех остальных браузеров. Как это работает? Ну, в данный момент этого не произойдет, потому что все браузеры могут понимать оба правила CSS. Таким образом, они все будут использовать второе правило CSS, потому что оно идет после первого.
Вставив хак CSS, мы можем выполнить обнаружение браузера, скрыв второе правило CSS от IE. Это означает, что IE даже не будет знать, что правило существует, и поэтому будет использовать первое правило CSS. как нам это сделать? Читай дальше что бы узнать!
Обнаружение браузера для Internet Explorer
Чтобы отправить разные правила CSS в IE, мы можем использовать дочернюю команду селектора, которую IE не может понять. Дочерняя команда выбора включает два элемента, один из которых является дочерним для другого. Итак, html>body относится к дочернему элементу body , содержащемуся в родительском html .
Используя пример поля заголовка, наша команда CSS будет:
#header {margin-bottom: 3em}
html> body #header {margin-bottom: 1em}
IE не может понять второе правило CSS из-за CSS-команды html>body , поэтому он игнорирует его и использует первое правило. Все остальные браузеры будут использовать второе правило.
Обнаружение браузера для Internet Explorer 5
Поначалу может показаться странным отправлять разные правила CSS в разные версии браузера, но в случае IE5 это очень необходимо. Проблема заключается в неправильном толковании IE5 модели коробки. Когда мы указываем ширину элемента в CSS, отступы и границы не включаются в это значение. IE5, однако, включает эти значения в значение ширины, что приводит к уменьшению ширины элементов в этом браузере.
Следующее правило CSS приведет к ширине 10em для всех браузеров, кроме IE5, что даст ему ширину всего 5em (IE5 будет включать два набора отступов и рамки, как слева, так и справа, при расчете ширины) :
#header {padding: 2em; граница: 0.5em; ширина: 10em}
Решение этой проблемы? Хак с блочной моделью , изобретенный Тантеком Чейликом, который стал довольно известным в мире CSS в результате этого взлома — и это правильно. Чтобы выполнить обнаружение браузера и отправить другое правило CSS в IE5, вы должны использовать следующее:
#header {padding: 2em; граница: 0.5em; ширина: 15м; голосовая семья: ""} ""; Голос семья: наследовать; ширина: 10em}
Как г-н Челик разработал, как это сделать, никто не знает! Важно то, что он работает: IE5 будет использовать первое значение ширины 15em, 5em которого будет занято двумя наборами отступов и границ (по одному для левой и правой). Это в конечном итоге даст элемент шириной 10em в IE5.
Затем значение 15em будет переопределено вторым значением ширины 10em всеми браузерами, кроме IE5, который по какой-то причине не может понять команду CSS, которая приходит сразу после всех этих загогулинов. Это не выглядит красиво, но это работает!
Существует небольшая проблема со взломом блочной модели, поскольку он часто может «убить» следующее правило CSS в IE5.0. Тем не менее, есть множество других хакерских моделей, которые вы могли бы реализовать вместо этого.
Обнаружение браузера для Internet Explorer на Mac
Проще говоря, IE на Mac делает странные вещи с помощью CSS. Браузер несколько устарел, так как Microsoft объявила, что не собирается выпускать обновленную версию. Таким образом, многие веб-разработчики кодируют свои CSS-ориентированные сайты, чтобы сайт работал в IE / Mac, хотя он может не предлагать такой же уровень расширенной функциональности или дизайна, который предлагается пользователям других комбинаций платформы и браузера. При условии, что пользователи IE / Mac могут получить доступ ко всем областям сайта, это считается подходящим способом сделать что-то.
Спрятать команду с помощью хака IE / Mac CSS просто. Он включает в себя набор штрихов и звездочек вокруг столько правил CSS, сколько вам нужно:
/ * Скрыть от IE-Mac * /
#header {margin-bottom: 3em}
#footer {margin-top: 1.5em}
/ * Конец скрытия * /
IE / Mac просто игнорирует все эти команды. Этот CSS-хак действительно может быть очень полезен, если есть определенная область сайта, которая не работает должным образом в IE / Mac. Если этот раздел не является основным для использования сайта посетителями, вы можете просто скрыть его от IE / Mac, например, так:
#noiemac {display: none}
/ * Скрыть от IE-Mac * /
#noiemac {display: block}
/ * Конец скрытия * /
Первое правило CSS скрывает весь раздел, которому присвоен идентификатор noiemac (т. Е. <div id="noiemac"> ). Второе правило CSS, которое IE / Mac не видит, отображает этот раздел.
Обнаружение браузера для Netscape 4
Netscape 4 имеет ограниченную и несколько ошибочную поддержку CSS. Создание CSS-макета для этого браузера, чья доля на рынке сейчас упала значительно ниже 1%, может быть чрезвычайно сложной задачей. В настоящее время стало обычной практикой полностью скрывать CSS-файл от этого браузера. Это может быть достигнуто с @import директивы @import для вызова CSS-документа:
<style type = "text / css"> @ import url (cssfile.css); </ style>
Netscape 4 отобразит нестандартную версию сайта, так как не может понять эту директиву @import .
Проверка вашего сайта в разных браузерах
На момент написания статьи основными интернет-браузерами были IE5, IE6, Firefox, Opera и Safari. (Посетите TheCounter.com, чтобы получить актуальную статистику браузера.) Вы можете скачать все эти браузеры, а также ряд неясных, в архиве браузеров Evolt . Если вы не уверены, как это сделать, узнайте, как установить несколько версий IE на ваш компьютер .
В идеале вы должны проверить свой сайт во всех этих браузерах, как на ПК, так и на Mac (кроме IE6 и Safari, которые доступны только на ПК и Mac соответственно). Если у вас нет доступа к Mac, вы можете получить скриншот своего сайта в Safari, запустив его через iCapture Дэна Вайна, или вы можете заплатить, чтобы использовать Browsercam , которая предлагает более обширную услугу захвата экрана.
Вывод
В целом современные браузеры имеют очень хорошую поддержку CSS — вам, безусловно, достаточно использовать CSS для управления макетом и презентацией. Иногда, однако, некоторые элементы страницы будут выглядеть по-разному в разных браузерах.
Не беспокойтесь слишком сильно, если вы не знаете причину: поиграйтесь с правилами CSS и внесите некоторые изменения методом проб и ошибок, например, возможно, изменив значение отступа до допустимого предела. Если это не сработает, вы можете исправить это с помощью этих хаков CSS, и ваши веб-страницы должны отлично выглядеть во всех браузерах!