15 верных путей чтобы сломать ваш CSS
Пропущена точка с запятой
CSS правила состоят из пар описаний — свойство-значение, разделённых между собой точкой с запятой. В соответствии с спецификацией CSS последнее описание может не заканчиваться точкой с запятой, т.к. фигурная скобка и так отделяет всё правило от остальных как стена.
Например:
body {background-color: #444;color: #eee }
Проблема только состоит в том, что если вы решите добавить в правило другое описание, вы можете запросто забыть поставить в последнем описании точку с запятой:
body {background-color: #444;color: #eeefont-family: Helvetica, Arial, sans-serif }
В результате описание font-family никогда не сработает, т.к. парсер будет считать «font-family» частью значения свойства color. Я проставляю последнюю точку с запятой всегда — это как-то добавляет организованности в код. А несколько лишних байт в размере css-файла не играют большой роли, особенно при включенном кешировании браузера.
Пропущено двоеточие
Обычно такая ошибка возникает если люди тренируются в скорости печати на клавиатуре, а не в написании CSS кода. Такую ошибку очень трудно увидеть, т.к. она находится в середине строки. Сравните эти две строки:
body { font-family Helvetica, Arial, sans-serif; }body { font-family: Helvetica, Arial, sans-serif; }
Пропущена фигурная скобка
{Фигурные скобки} вокруг CSS правила — это как жизненный цикл — постоянный, естественный и ожидаемый. И если вы пропустите фигурную скобку (обычно закрывающую, по любой причине) — это всё равно что у вас есть мумия, которая отказывается умирать (да автор я смотрю шут и весельчак) — вы получите хаос.
Когда ничего не подозревающий браузер дойдёт до разбора этой пары правил:
body {font-family: Helvetica, Arial, sans-serif;#wrap {width: 960px; }
он просто подавится. Две открывающих фигурных скобки и только одна закрывающая: всё от #wrap (в данном примере) будет проигнорировано. Как видно — парсер подсветки кода тоже не справился с заданием.
Исправить такую ошибку очень легко — просто проверяете чтобы перед каждым новым правилом стояла закрывающая фигурная скобка. Как уже отмечалась, в основном, забывают проставить именно её.
Опечатки в названии css-свойства
Вообще говоря, я грамотный человек. Однако когда я «в процессе» я набираю текст настолько быстро, насколько с этой задачей справляются мои пальцы, и конечно иногда ошибаюсь. При обычном общении ошибки не очень важны — люди почти всегда могут определить что именно я хотел сказать. К сожалению компьютер более прихотлив.
div { border-bototm: 5px; }
Проще всего такие ошибки отслеживать в редакторах, которые умеют подсвечивать код (офигенное открытие и совет :) ). Например Notepad++ или Adobe Dreamweaver. Если свойство не подсвечено — значит в нём синтаксическая ошибка.
Опечатки в значениях
Опечатки встречаются не только в названиях свойств. Иногда они бывают и при написании значений и их бывает сложнее выловить:
#wrap { padding: 10px 20pz 25px 20px; }
Как видно опечатка в размерности — вместо px стоит pz. Из-за этого всё правило не работает.
Опечатки в названиях классов или ID
Неважно как часто я создавал div с ID «navigation» — я до сих пор нахожу такие правила у себя в коде:
#navigaiton { float: left; }
Эту досадную ошибку очень сложно выловить, т.к. здесь не поможет даже подсветка кода в редакторах.
Чтобы избежать таких ошибок — я очень редко набираю имена классов или идентификаторы при редактировании css-файлов вручную. Ctrl+c из html и ctrl+v в css.
Неправильный порядок значений
Некоторые CSS свойства являются комплексными, т.е. можно написать значения нескольких свойств через пробел в одну строку. К сожалению большинство таких свойств очень требовательны к порядку значенией:
div { font: 2em Helvetica, Arial, sans-serif; }a { font: "Times New Roman", serif 1.5em; }
Первое правило — корректное и текст всех div-ов получит специфическое начертание и размер. Второе правило — некорректное, т.к. порядок свойств не соблюдён.
О правильном порядке значений в таких свойствах можно прочитать в спецификации CSS. Я кстати всегда путаю этот порядок, поэтому такие свойства обычно тоже пишу копи-пастом, т.е. откуда-то копирую
Размерные величины без указания единицы измерения
Все измеряемые свойства должны иметь значения, с указанием единицы измерения:
#wrap { margin: 3; }
Три чего? Ems? Дюймов? Пикселей?
Про единицы измерения так же можно посмотреть в спецификации CSS.
Дублирующие правила
В больших сss-файлах встречаются полностью правила одних и тех же элементов. Работает всегда последнее — потом не удивляйтесь почему отступ не 2em, а 10px;
ul li { margin: 0 2em;... много кода ...ul li { margin: 0; padding: 10px; }
Конкурирующие правила
Подобная проблема может возникнуть когда вы её совсем не ожидаете. Например, если есть следующий XHTML:
<div id="navigation" class="nav">...</div>
Можно сослаться на этот элемент по имени класс или по id. Проблема возникает, если ссылаются и по классу и по id:
.nav { width: 50%; }... много кода ...#navigation { width: 500px; }
Работает последнее подходящее правило, как и в предыдущем пункте.
Обращаемся к классу как к ID (или наоборот)
Это пожалуй самая частая моя ошибка — каждый раз путаю — поставить точку или решётку :):
.navigation {float: left;width: 100%;height: 4em; }
И ничего не происходит, т.к. элемент имеет id = navigation, а не класс.
Использование несуществующих свойств
Не все CSS-свойства названы интуитивно понятно. Например:
body { text-size: 3em; }
Проблема в том, что хотя свойство вроде и должно принадлежать к текстовым свойствам, используется font-size. Тут конечно опять должны помочь редакторы кода с возможностью подсветки.
Использование несуществующих значений
Ошибка похожая на предыдущую:
td { vertical-align: center; }
Чтобы избежать таких ошибок внимательно изучаем спецификацию.
Неправильное соответствие свойства и значения
Данное CSS определение может показаться корректным даже для тренированного глаза:
a { text-transform: italic; }
Однако видим что правильному свойству неправильно присвоено правильное значение.
Не закрытый комментарий
Вот что не не нравится в css — так это отсутствие однострочных комментариев.
Можете найти отличия в этих двух описаниях?
/* Navigation goes here. */#nav {float: left;width: 100%;height: 3em; }/* Navigation goes here. /*#nav {float: left;width: 100%;height: 3em; }
Единственное отличие в том, что во втором правиле закрывающие символы комментария: /* вместо */. Соответсвенно всё второе правило будет закомментировано.
От себя ещё добавлю:
Есть ещё ошибки, связанные с непониманием короткого написания комплексных свойств margin, padding.
Вот примеры правильного написания:
div#mark {margin: 0;margin: 0 10px;margin: 0 10px 6px;margin: 8px 12px 10px 8px;}
Так вот — общий формат значений данного свойства таков:
margin: [top] [right] [bottom] [left];если указаны не все значения, то действуют следующие правилаmargin: [top] = margin: [top] [top] [top] [top];margin: [top] [right] = margin: [top] [right] [top] [right];margin: [top] [right] [bottom] = margin: [top] [right] [bottom] [right];
т.е. предыдущий пример идентичен
div#mark {margin: 0 0 0 0;margin: 0 10px 0 10px;margin: 0 10px 6px 10px;margin: 8px 12px 10px 8px;}
К нулю единицу измерения указывать необязательно, оно и логично — не всё-ли равно ноль единиц чего?
Спасибо за внимание. Читайте документацию :)
Источник: Уроки CSS на Хабрахабре
Полезные комментарии с хабрахабры:
seraph 27 марта 2009
Выдержка из книги Эрика Мейнра «CSS каскадные таблицы стилей. Полное руководство»:
— Для каждого указанного в селекторе значения идентификатора к специфичности добавляется 0, 1, 0, 0.
— Для каждого указанного в селекторе имени класса, псевдокласса или атрибута к специфичности добавляется 0, 0, 1, 0.
— Для каждого заданного в селекторе элемента и псевдоэлемента к специфичности добавляется 0, 0, 0, 1. Внутренне противоречие CSS2 состояло в том, что не было определено, обладают ли псевдоэлементы какой-либо специфичностью, но в CSS2.1 их специфичность явно определена и учитывается данным правилом.
— Комбинаторы и универсальный селектор не учитываются.
…
…первый нуль зарезервирован для встроенных объявлений стилей, специфичность которых превосходит специфичность всех остальных объявлений.
Steward
27 марта 2009
просто есть рекомендация как высчитывать стили и приоритеты (по увеличени приоритетности)
1. встроенный стиль браузера (самый низкий приоритет)
2. внешний css-файл
3. внутренний стиль
4. инлайн-стиль, т.е. стиль прописанный в аттрибуте style в самом html-элементе (самый высокий приоритет)
2 Комментарии