15 верных путей чтобы сломать ваш CSS


Вольное изложение статьи 15 surefire ways to break your CSS. Автор Rob Glazebrook. Курсивом мои дополнения.

Пропущена точка с запятой
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, 0, 0, 0. Реальная специфичность селектора определяется следующим образом:

— Для каждого указанного в селекторе значения идентификатора к специфичности добавляется 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-элементе (самый высокий приоритет)


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.


26 июня 2011  2 9 275   css верстка Версия для печати


Похожие публикации

Блог им. madduck / Print.css — стиль для печати для wordpress

Я заметил на многих сайтах отсутствует отдельный стиль для печати. То есть, если кто-то захочет распечатать какой-либо материал с сайта, то на бумаге он будет выглядеть почти так же как и в сети,... читать далее

Блог им. 3ds / Колонки одинаковой высоты + border-bottom!

Begin На хабре наверно уже миллион статей про колонки одинаковой высоты. Вы спросите зачем нам нужна еще одна статья в 1001й раз? Вот в чем затык Проблема в том, что колонки одинаковой высоты с... читать далее

Блог им. RayZ / Задача: Кнопки в Internet Explorer и волшебные пространства

Столкнулся с проблемой укрощения кнопок под Internet Explorer. Для наглядности имеем следующий код: <html>   <style type="text/css">     .hacked {       width:auto;... читать далее

Блог им. Majestic12 / Имена системных цветов в CSS

C несказанной радостью обнаружил, что в стандарте CSS2 есть поддержка системных цветов. Думаю таблица ниже будет интересна всем кто когда-нибудь пытался откатить значения CSS до дефолтных. Вся эта... читать далее

Web-разработка / Верстка для мобильных устройств

Общая информация Так как мобильных устройств существует великое множество, то одна модель может поддерживать какие-либо возможности HTML/CSS, а другая наоборот — либо не поддерживать, либо... читать далее

О свойстве CSS "background"

ОписаниеПараметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту. Для более... читать далее

Комментарии (2)

  1. #1 написал: kurpatovi
    Группа: Гости
    1 апреля 2009 09:46

    Все бы сайты такими были :)
    • 0

       

  2. #2 написал: smartzone
    Группа: Гости
    24 июля 2011 14:20

    полезная заметка.
    осталось заставить себя следовать ее рекомендациям.

    но иногда это крайне тяжело.

    зато есть стимул - к чему стремиться.
    • 0

       

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте