При верстке сайта с помощью CSS вы обязательно наткнетесь на множество проблем. И всякий раз вы будете биться головой об стену в попытках обойти очередной глюк. Данный документ призван облегчить вам процесс разработки, и служит кратким справочником, к которому вы можете обращаться всякий раз, когда столкнетесь с непреодолимым препятствием.
Если у вас есть что добавить к этому документу, оставьте свой комментарий здесь.
Данный документ переведен на французский, немецкий, испанский, итальянский, венгерский, финский, русский, японский и китайский языки.
Что-то не так? Проверьте код валидатором!
При отладке своего кода вы сэкономите уйму времени и нервов, если в первую очередь проверите его валидатором. Чаще всего проблемы с компоновкой страницы вызваны неверным XHTML или CSS.
Возможно вы искали - Реферат: Блоки в документах
Создавайте и тестируйте свой CSS-код сначала в современных "продвинутых" браузерах, и лишь затем - в остальных, но не наоборот
Если вы тестируете сайт в некачественном браузере, ваш код начинает зависеть от неправильного отображения этим браузером. Когда настанет время проверить сайт в браузерах, верно поддерживающих стандарты, вы наверняка огорчитесь увиденным. Таким образом, начните с передовых браузеров, а потом добавляйте к коду трюки для менее удачных. Таким образом ваш код с самого начала будет соответствовать стандартам, и вам не придётся слишком много "колдовать" для поддержки других браузеров. Сегодня самыми передовыми браузерами являются Mozilla, Safari, или Opera.
Удостоверьтесь, что желаемый эффект действительно существует.
Существуют расширения CSS, специфичные для конкретных браузеров, но не входящие в официальную спецификацию каскадных таблиц. Если вы пытаетесь применить свойство filter или отформатировать внешний вид полосы прокрутки, знайте - вы используете специфичный код, работающий только в IE. Если валидатор вдруг пишет вам, что ваш код не соответствует спецификации, скорей всего это из-за того, что в нем присутствует такое специфические расширение, и оно не будет работать в других браузерах.
Применяя плавающие блоки, убедитесь в том, что они не мешают соседям
Похожий материал - Реферат: Проверочный список для веб-стандартов
"Плавающие блоки" коварны, и они не всегда ведут себя так, как ожидается. Если вдруг получилось так, что плавающий блок вылезает за пределы содержащего его элемента, или же он ведет себя не так, как вы хотите - удостоверьтесь в корректности того, чего вы хотите добиться. Обратитесь за подробностями к руководству Эрика Мейера.
Поля (margins) всегда "сворачиваются". Пользуйтесь вместо них отступами (padding) или границами
Если у вас вдруг появляется пустое пространство там, где оно вам не нужно, или наоборот - нету свободного пространства там, где оно вам нужно, это скорей всего происходит из-за полей (margins), которые имеют привычку "сворачиваться". AndyBudd в своей статье описывает этот глюк и дает советы, как его избежать.
Старайтесь не задавать элементу одновременно отступ/границу И фиксированную ширину
IE5 неправильно реализует блочную модель CSS, из-за чего ваша страница может превратиться в кашу. Существует несколько уловок обойти этот глюк, но лучше всего вообще с ним не связываться: задавайте нужный отступ в родительском элементе, а фиксированную ширину - в дочернем.
Как избежать мелькания чистого HTML в IE
Очень интересно - Реферат: Продвинутая CSS-верстка: шаг за шагом
Если вы используете внешнюю таблицу стилей, подключая ее с помощью директивы @import, то рано или поздно вы заметите, что IE успевает "сверкнуть" на экране неформатированным HTML прежде, чем применит к нему стили. Эту проблему можно решить следующим образом.
Не используйте min-width в IE
Он не поддерживает это свойство. Но он рассматривает width как min-width в некоторой степени, поэтому с помощью небольшого фильтра для IE, вы можете получить точно эффект min-width в IE.
Если что-то не так, уменьшите ширину
Иногда из-за погрешностей округления сложение вида 50% + 50% даёт в итоге что-нибудь типа 100.1%. Это приводит к тому, что заботливо созданная вами вёрстка "расползается" в некоторых браузерах. Лечится просто: уменьшайте ширину с 50% до 49% или даже 49,9%.
Вам будет интересно - Реферат: SVG: Замена Flash-у
IE показывает все не так, как надо?
Возможно, вы напоролись на знаменитый "Peekaboobug", особенно если баг проявляется при наведении курсора на ссылку. Смотрите решение в статье "Позиция - это наше всё!"
Будьте осторожны, задавая стили для "якорей"
Если в своем коде вы используете классические якоря (<aname="anchor">), то скоро заметите, что они тоже реагируют на псевдо-классы :hover и :active. Избежать этого можно, применив к якорям id, или же применяя для них слегка извращенный синтаксис типа :link:hover, :link:active
Помните о порядке описания ссылок.
Похожий материал - Доклад: Власть народу - относительные размеры шрифтов
Задавая псевдоклассы для ссылок, делайте это всегда вот в таком порядке: Link, Visited, Hover, Active (запомните этот порядок с помощью слов "LoVe/HAte"). Любые другие комбинации не работают так, как надо. Если требуется использовать также и псевдокласс :focus, то порядок описания будет таким: Link, Visited, Hover, Focus, Active (LVHFA для запоминания чего Мэтт Холи придумал фразу "LordVader'sHandleFormerlyAnakin")
Помните о правиле "TRouBLEd" для границ.
Значения для границ, полей (margins) и отступов (padding) сокращённо описываются в таком порядке: по часовой стрелке в направлении Top, Right, Bottom, Left (верхнее, правое, нижнее, левое). Таким образом, запись margin: 0 1px 3px 5px; означает, что верхней границы нет, левая равна пяти пикселям ну и так далее.
Явно указывайте единицы измерения у ненулевых значений