Акция CSS Naked Day направлена на то, чтобы показать с одной стороны насколько сайты могут некрасиво выглядеть без css, а с другой стороны показать насколько грамотно веб-разработчик написал html структуру страницы – страница должна нормально и логично отображаться и без css.

Присоединяйтесь к нам!
P.S. Кстати сам автор этой идеи что-то не спешит её распространять на 2010 год – последние изменения страницы акции касаются только 2009 года. Ну да мы и сами с усами.

Для всех версий Internet Explorer-а сделана сравнительная таблица, для остальных браузеров только ссылки на css-файлы.

Просмотрев такие сравнительные таблицы можно по новому приступать к созданию reset.css.

#someElement {
	background: red; 			/* нормальные браузеры */
	*background: green; 		/* IE7 и ниже */
	_background: yellow;  		/* только IE6 */
}

Однако всё это не способствует прохождению валидации файла стилей. Честно говоря в своих немногочисленных работах никогда не пользуюсь хаками – либо использую условные комментарии (для IE), либо «не судьба» – точнее приходится решать проблемы другими способами или отказываться от чего-то.

Условные комментарии для IE стали доступны с 5-й версии Internet Explorer и поддерживаются только Internet Explorer-ом.

	<!--[if IE 6]>
	Код только для IE6 - любой html, css, javacsript
	<![endif]-->

Официальная документация – условные комментарии на MSDN.

Синтаксис условных комментариев

Пропущена точка с запятой
CSS правила состоят из пар описаний – свойство-значение, разделённых между собой точкой с запятой. В соответствии с спецификацией CSS последнее описание может не заканчиваться точкой с запятой, т.к. фигурная скобка и так отделяет всё правило от остальных как стена. Например:

body {
	background-color: #444;
	color: #eee
}

Проблема только состоит в том, что если вы решите добавить в правило другое описание, вы можете запросто забыть поставить в последнем описании точку с запятой:

body {
	background-color: #444;
	color: #eee
	font-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;
}

К нулю единицу измерения указывать необязательно, оно и логично – не всё-ли равно ноль единиц чего?

Спасибо за внимание. Читайте документацию

Группа в составе редакторов Tantek Celik, Chris Lilley, David Baron и авторов Steven Pemberton, Brad Pettit наконец-то представила предварительную версию CSS Color Module Level 3. Работа над ней, судя по датам драфтов велась на протяжении более пяти лет: с 14 мая 2003 года по 21 июля 2008.

Все замечания и комментарии по данному релизу будут приниматься до 1-го сентября 2008 года, затем этот модуль получит статус Candidate Recommendation и будет включён без изменений в готовящуюся спецификацию CSS 3.

Если я внимательно прочитал – то единственное стоящее изменение – это добавление свойства opacity – прозрачность.

Если есть ещё что-то напишите в комментариях – не дайте помереть идиотом

Итак как ЭТО делает:

• Никита Селецкий (и почему он делает ЭТО именно так)
• МегаГУРУ – Эрик Мейер – если кто-то не знает – именно его reset используется в таких популярных CSS фреймворках как 960.gs и Blueprint.css
• команда разрабочиков Yahoo UI
• Эд Элиот – один из бывших разработчиков Yahoo
• Kile Neath (по материалам Smashing Magazine)
• Christian Montoya (по материалам Smashing Magazine)
• Dave Woods (также подробно объясняет почему именно он включил конкретные правила с свой reset

Кстати, в ходе поиска по просторам интернета, выяснилась IнTерсная деталь – западные веб-разработчики в большинстве своём используют reset Эрика Мейера, а отечественные – либо свой собственный reset, либо Yahoo UI Reset. Хотя конечно и Эрик тоже пользуется популярностью.

А чем пользутесь вы? Добро пожаловать в комментарии.

Отчёт I:Working Group Operations, Communication, and Charter
Обсужались текущие дела, способы обсуждений внутри группы и вынесения результатов этих обсуждений на всеобщий обзор. Также обсуждался новый устав группы – текущий прекращает свой действие в июле сего года.
В новый устав внесли предложения компании Apple о анимации и фильтрах.
Касательно шрифтов в WEB в новом уставе прописано взаимодействие с группой SVG.

Группа решила переделать сайт CSS, добавить туда больше документации и сделать существующую более понятной (убрать оттуда ненужный мусор).

Отчёт II:Test Suites and Pending Publications
Решено менять статус Candidate Recommendation для профиля Mobile без учёта решения вопроса по свойствам marquee и overflow.

Группа так и не вынесла никакого решения относительно цветов CSS3.

Относительно пространства имён CSS также небыло вынесено никакого решения. Продолжается взаимодействие с рабочей группой по XHTML2.

Отчёт III:Синтаксис и селекторы
Отчёт IV: Блочная модель
Эти два отчёта не содержат никаких интересных вещей лично для меня – что называется обсуждение вопрос в рабочем порядке.

Отчёт V: Будущие возможности
Самые интересные на мой взгляд.
Tree List Styles – продвигается идея оформлять обычные списки (<UL>) с помощью CSS в виде деревьев.
ul > li
{
display: list-item;
list-style-type: tree-line;
|outline-color:powderblue;
}
Должно получиться нечто вроде

Multi-Style Elements (aka Collapsible Elements)
Основная идея – иметь для каждого элемента два псевдо-класса :normal и :alternate. Существование этих псевдоклассов сделает элемент переключаемым. Пока на ранней стадии обсуждения и вообщем области применения сложно себе пока представить.

Constants
Обсуждается ввод констант и макросов для задания значений CSS-свойств.

text-orientation
Новое значения этого свойства – glyph-orientation. Ориентация текста по SVG. Конкретики пока никакой, но я так понимаю это будет интересно выглядеть.

Отчёт VI: CSSOM – объектная модель CSS
Решение – общие соглашения в модели плохо разработаны и нуждаются в расширении, однако стандартизация существующих интерфейсов – приоритетная задача.