Сколько не разрабатывали стандарты, сколько не напрягался небезызвестный консорциум w3, сколько не ругали разработчиков софта недовольные разработчики сайтов - все равно поддержка css в браузерах реализована криво и не полностью (за исключением msie 5.5 под macintosh и netscape 6.0). Начиная с третьих версий массовых браузеров у веб-мастеров прибавилось головной боли. И эта боль вызвана разной реализацией css у разных браузеров. Более того, эта реализация в netscape 4.x настолько корявая, что список багов занимает 4 страницы мелким шрифтом без подробного описания.
Что же делать бедным веб-мастерам? Вариантов несколько:
Забыть про css и вообще его не использовать (совершенно непривлекательный вариант, потому как css на самом деле вещь полезная во многих отношениях и отказываться от полезного инструмента глупо); Свести использование css к минимуму, чтобы быть на 100% уверенным в одинаковости (более-менее приемлемое решение, но сгодится только как временное, потому что через годик-другой без css не обойдется ни один приличный сайт, а табличная верстка уйдет в небытие); Разобраться в css и ограничить себя применимостью одной таблицы стилей ко всем браузерам (это один из хороших вариантов, но весьма ограничивает возможности использования всех богатств и достоинств css); Детально разобраться в css и писать таблицу стилей, но используя фишки, скрывающие фрагменты кода от некоторых браузеров, добиваясь максимальной эффективности от каждого конкретного браузера (хорошее решение, применимо во многих случаях);
Детально разобраться в css и писать разные таблицы стилей для разных браузеров (тоже хорошее решение).
Последние три пункта (в особенности 4-ый и 5-ый) собственно и относятся к кросс-браузерному css. Вот и остановимся на них поподробнее и начнем с самого легкого.
Одна таблица стилей для всех браузеров. Это простейший метод добиться того, чтобы ваша страничка выглядела одинаково во всех браузерах. Но этот метод весьма ограничивает возможности использования всех богатств и достоинств css. Например, вы лишитесь возможности использовать line-height или margin-top, потому что некоторые браузеры некорректно работают с этими элементами.
Список всех багов слишком обширен, поэтому ограничимся наиболее явными и опасными:
Не используйте margin-top
Не используйте любые единицы измерения, кроме пикселей
Не прописывайте высоту линии (line-height)
Не используйте ключевое слово normal (оно все равно не нужно)
Не используйте числовые значения для font weights в сокращенной записи стилей для шрифта.
Устанавливйте margin-left и margin-right только для body.
Не используйте стили для li, dd и dt.
В дополнение ко всему, если вы используете таблицы, надо разделить селекторы для body на две части: одни для наследующихся, другие для не наследующихся. Например:
body {font-family: sans-serif;
color: red;
background: white;
margin-left: 7%;
margin-right: 5%;
margin-bottom: 2em}
Заменяется на
body {font-family: sans-serif;
color: red}
body {background: white;
margin-left: 7%;
margin-right: 5%;
margin-bottom: 2em}
Затем для каждого блокового элемента, кроме li, dd и dt, плюс span прописать наследующиеся свойства. Например:
address, blockquote, body, div, dl, h1, h2, h3, h4, h5, h6, ol, p, pre, span, ul
{font-family: sans-serif; color: red}
Это надо сделать из-за ie 3 и netscape 4, так как когда они обрабатывают страницу и встречают таблицу, то частенько убивают наследование от тэга body для тэга table и всего последующего контента.
Это довольно краткая инструкция, но она поможет написать рабочую каскадную таблицу стилей, которую будут обрабатывать одинаково практически все браузеры, поддерживающие css.
|
ТВОРЧЕСКИЕ ГАЛЕРЕИ
Фотография
Можно/нельзя
Что/где
