CSS: советы и приёмы, часть 2 (Продолжение)
Иногда (чаще всего), чтобы решить проблему некорректной обработки CSS, браузеру Internet Explorer требуется посылать отличающиеся от обычных CSS-правила.
Существует много CSS-хаков (обходных путей), но я предпочитаю использовать несколько из них, и только в том случае, когда я не могу найти лучшего способа (без использования хаков) достичь нужного результата. Скоро появится Internet Explorer 7, в котором будет улучшена поддержка CSS. Также разработчики рекомендуют не использовать обходные пути (CSS-хаки) вообще. Поэтому самым безопасным будет использование специальных комментариев для IE (conditional comments) - все подробности ниже.
Чтобы спрятать правило от IE, ты можешь воспользоваться child selector (англ.):
html>body p {
/* declarations */
} Звёздочка и html спрячет правило от всех браузеров, кроме IE:
* html p {
/* declarations */
} Иногда тебе может понадобиться выдать определённый CSS для IE/Win, но не для IE/Mac. Для этого тебе нужно использовать закомментированный обход с обратным слэшом:
/* \*/
* html p {
declarations
}
/* */
Ещё одно решение - я использую его всё чаще и чаще, так как я считаю, что следующий способ наиболее устойчив к будущим изменениям, нежели CSS-хаки. Я говорю о специальных комментариях (conditional comments). Ты можешь использовать эти комментарии, чтобы выдавать для IE/Win совсем иной CSS-файл, содержащий все необходимые правила, предназначенные для правильной работы именно этого браузера. Я считаю, что это самый лучший способ, предотвращающий использование обмана и грязи в CSS-файлах. Также, ты избегаешь возможности испортить "настоящий" CSS-файл собственными расширениями IE, такие как выражения (expressions), которые иногда нужны.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
Такие комментарии дают ещё одну выгоду, предотвращающую "вспышку нестилизованного содержания" (Flash of Unstyled Content), которая появляется в IE/Win в том случае, если в элементе head нет элементов link или script.
Каков размер этого квадрата?
Если что-то пошло не так, начни проверку своего CSS. Любой может допустить ошибку. Если нет никаких ошибок в CSS, то необходимо начать анализировать происходящее. Мне нравиться прописывать цвета заднего фона тем элементам, с которыми у меня возникают проблемы, чтобы отчётливо увидеть пространство, которое занимают эти элементы. Некоторые предлагают использовать бордюры (borders), что работает во многих ситуациях. Проблемой в этом приёме является то, что бордюры увеличивают размеры элемента, таким образом верхний и нижний бордюры предотвращают соединение вертикальных отступов. Цвета заднего фона намного безопасней.
Ещё одно потенциальное свойство для нахождения проблемы - свойство outline. Очертание контура очень похоже на бордюры, но не влияют на объёмы или позиционирование элементов. Единственный минус - отсутствие поддержки свойства outline во многих браузеров. Насколько я знаю, на данный момент это свойство поддерживают Safari, OmniWeb, и Opera.
Стиль CSS кода
При написании CSS, существует много различных подходов к использованию отступов, переносов на другую строку и пустого пространства. За всё время я использовал различные методы, но остановился на следующем стиле (на данный момент): selector1,
selector2 {
property:value;
}
Когда я группирую селекторы, я обычно ставлю каждый из них на новую строку. Я считаю, что искать таким образом элементы в CSS намного легче. Далее я ставлю пробел между последним селектором и открывающейся скобкой. Каждое объявление находится на отдельной строке, без каких-либо пробелов вокруг двоеточия, разделяющего свойства (property) от значений (value). Я заканчиваю каждое объявление точкой с запятой. Можно не ставить точку с запятой после самого последнего объявления, но при этом очень легко забыть о добавлении точки с запятой, перед тем как добавить новое объявление, что приводит к появлению в CSS трудно находимых ошибок.
Наконец, закрывающая скобка ставиться на отдельную строку.
Да, пустое пространство может быть хорошим фактором для удобочитаемости кода, но мне нравится, когда всё как можно проще, без особого негативного влияния на удобочитаемость.
Данная статья разрешена для публикации только на http://visavi.net/