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

Суть проекта состоит в том, что любой желающий должен создать CSS-файл, описывающий отображение заданного HTML-документа, уложившись лишь в 1 килобайт CSS-кода. На данный момент уже существуют около 30 стилей и я, конечно же, тоже не смог отказаться от участия. Challenge accepted, так сказать.

Проект хостится на Github, и если вы хотите облегчить автору жизнь, то форкайте его там же и заливайте свои версии туда же. Более подробные инструкции есть на сайте проекта.

Участники проекта просто молодцы и сделали очень впечатляющие стили.

Дерзайте и вы. Удачи!

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

Миниатюрное и элегантное решение. Хозяйке на заметку.

Когда Эрик писал первую версию, он расчитывал на то, что сообщество веб-разработчиков подхватит эту идею, тщательно ее разжует и даст ей логическое продолжение. Но этого не произошло. Произошли кое-какие изменения, но незначительные. Ресет был воспринят как факт.

В связи с набирающим обороты HTML5, появился CSS Reset, заточеный под HTML5, в котором были добавлены новые HTML элементы. По сути, это просто адаптированый ресет Эрика Мэйера.

Эрик решил что 4 года, это достаточное время для пересмотрения и решил начать работу над новым ресетом, который будет соответствовать современным реалиям. Вот первая бета:

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0b1 | 201101
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define visible focus styles!
:focus {
	outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

Это не окончательная версия ресета и Эрик прямо заявляет о том, что мы конечно можем ее использовать, но он не рекомендует, так как еще вполне вероятны изменения и дополнения. При написании этого ресета, ресет, адаптированый для HTML5 от html5doctor.com, был использован как проверочный.

Изменения, относительно него выглядят так:

• Удален font из селектора первого правила.
• Удалено свойство background: transparent.
• Добавлено font: inherit в первое правило.
• Добавлены HTML5 элементы в селектор первого правила.
• Создано отдельное правило для HTML5 элементов, декларирующее для них свойство display: block.
• Удален комментарий про cellspacing, который уже не очень актуален в наши дни.
• Добавлен и уточнен комментарий по поводу описания стилей для визуального отображения псевдо-класса :focus.

Повторюсь, это только бета-версия ресета, и еще вполне возможны изменения, так что stay tuned.

Update 11.01.11: Следующая бета-версия не заставила себя долго ждать:

В ней Эрик отказался от обнуления outline при событии :focus, а так же от ins и del.

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0b2 | 201101
   NOTE: THIS IS A BETA VERSION (see previous line)
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

• разметка страниц становится более чистой и семантичной
• отпадает необходимость использовать изображения для теней, закругленных уголков и бордеров
• inline-валидация форм
• продвижение веб-стандартов
• сохранение существующей разметки после того, как использование скриптов будет не нужно

Как вы наверняка знаете, для интернет эксплорера нужно “включить” все новые элементы и атрибуты из HTML5, чтобы работать с ними. Remy Sharp написал скрипт, включающий все элементы HTML5 в IE. Все что нужно, это вызвать скрипт в head‘e, так как IE должен знать о элементе до того, как отрисовать его.

Для эмуляции некоторых CSS3 правил можно использовать CSS3 PIE. На данный момент поддерживаются, либо частично поддерживаются следующие правила:

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient как background image
• rgba

CSS3 PIE использует Behaviors для эмуляции, что накладывает некоторые ограничения и возможные неудобства:

• Вы должны будете подключать PIE Behavior в каждом правиле, со свойствами CSS3
  (behavior: url(PIE.htc);)
• У всех элементов, в которых используется PIE должен быть выставлен position:relative
• Возможны проблемы с производельностью в интерактивных элементах

В общем, в некоторых случаях PIE будет адекватной заменой существующим “костылям”, а в некоторых — нет.

Удачных опытов!

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix { zoom: 1; } /* IE6 */
*+html .clearfix { zoom: 1; } /* IE7 */

Хозяйке на заметку.

С приходом HTML5, принесшим с собой новые элементы, возникла нужда в адаптации CSS-ресета. Что и было сделано. На сайте html5doctor.com опубликована адаптированая под нужды HTML5 версия CSS-ресета от Eric Mayer. Вот она:

/*
html5doctor.com Reset Stylesheet
v1.6
Last Updated: 2010-08-18
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted inherit;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

Что нового в адаптированой версии?

Сначала автор удалил нежелательные в HTML5 элементы, такие как acronym, center, и big. Затем добавил новые элементы из HTML5, чтобы обнулить их дефолтные значения и прописал свойство display: block; для тех из них, которые должны рендериться как блочные элементы.

Свойство outline: 0; на событии :focus тоже было удалено из ресета, так как автор адаптированой версии считает что уж лучше дефолтное выделение на событии :focus, чем никакого. Я склонен согласиться с этим мнением. Дело в том, что Eric Mayer добавил это свойство в CSS-ресет в надежде на то, что разработчики будут описывать его сами. По факту этого не происходит или происходит редко. Поэтому уж лучше дефолтное выделение.

В ресет добавлены стили для нового элемента mark, созданного для маркировки текста в контексте. Мне не совсем ясно почему автор выбрал именно те стили и свойства, которые он выбрал, так что обращаю на это ваше внимание.

Адаптированый ресет распространяется с лицензией Creative Commons, так что его можно использовать в персональных и коммерческих проектах. Можно скачать с Google Code.

Послесловие

Этот CSS-ресет ни в коем случае не претендует быть окончательным и истиной в высшей инстанции. Мне например не ясно зачем автор добавил в ресет следующие свойства:

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

Этот ресет можно использовать как заготовку для написания собственного, с учетом HTML5.

Дерзайте, делитесь результатами.

1. Быстрое решение:

.ie8only { color /*\**/: #fff\9 }

Работает только в Standards Mode

2. Более разумный подход к вопросу:

В файле стилей для IE, подключеном через условный комментарий создаем такую структуру:

html>/**/body #id { property: value; }

Почему именно в отдельном файле? Потому что такую конструкцию прочтут все современные браузеры, включая IE8. Нужно помнить, что в таком случае все остальные хаки, предназначеные для IE6/7, должны быть прописаны через их собственные специфичные хаки (тогда IE8 ничего не заподозрит):

• IE 6 — * html
• IE 7 — *+html

Существуют различные методы визуального разграничения информации в таблицах для большего удобства восприятия. Такие как разделение строк таблицы различным цветом. Этот способ известен под названием “Полосатые таблицы“

Сегодня я хотел бы поговорить о столбцах (колонках) таблицы. Признавайтесь, сколько раз вы чертыхались, прописывая класс для каждой ячейки в каждой строке, чтобы выделить ту или иную колонку фоновым цветом? :)

Сейчас это конечно уже в прошлом, существуют решения с использованием JS, CSS3 и всевозможных js-фрэймворков. Мы их рассматривать сейчас не будем, благо поисковики никто не отменял.

Существует простое, кроссбраузерное решение, основаное только на HTML/CSS. А именно colgroup. Решение это совсем не ново, но почему-то незаслужено забыто многими разработчиками. Перейдем прямиком к разметке:

<table>
		<caption>Столбцы / колонки:</caption>
		<colgroup>
			<col />
			<col class="alt" />
			<col />
			<col class="alt" />
			<col />
		</colgroup>
		<tr>
			<th>FF2/3</th>
			<th>IE6/7</th>
			<th>Opera</th>
			<th>Safari</th>
			<th>Other</th>
		</tr>
		<tr>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
		</tr>
		<tr>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
		</tr>
		<tr>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
		</tr>
		<tr>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
		</tr>
	</table>

Чем этот код отличается от обычной разметки таблицы? Наличием тегов colgroup и col. Собственно colgroup является родительским контейнером для элементов col, которые и определяют нужные нам столбцы. Достаточно указать тому или иному столбцу класс и вуаля — у нас есть колонки, выделенные по вашему вкусу.

Вот так выглядит CSS:

table {
border: 1px solid #333;
border-collapse: collapse;
}
th, td {
padding: 2em;
text-align: center;
border-spacing: 1em;
}
th {
background: #ddd;
color: #fff;
}
/*Стиль для столбца*/
col.alt {
background: #ddf;
}

В принципе ничего сложного, и уж тем более инновационного, здесь нет. Таким способом можно задавать стиль для любого столбца таблицы.

Проверено в FF2/3, IE6/7, Opera 9.5, Safari|(Win)

Список поддерживаемых стилевых правил. Спецификация.

CSS, которому уже 12 лет, изначально был задуман и разрабатывался как средство для описания внешнего вида документа. С тех пор утекло много воды и технология претерпела значительные изменения и дополнения. На данный момент, рабочая версия по стандарту W3C, принятая в 2006 году – Уровень 2.1. Уровень 3 находится в состоянии разработки (есть черновик), и ожидается с нетерпением многими разработчиками.

Вокруг будущего CSS ходит много слухов и предположений, коротые муссируются и множатся, выливаются в дискуссии и споры. Ведь по сути, если хотя бы половина предлагаемых изменений будет осуществлена, то CSS превратится в (полноценный?) язык программирования визуальной составляющей веб-документов.
И все бы хорошо, если бы это не вносило смуту в ряды разработчиков, часть которых небезосновательно утверждает что использование переменных на уровне документа это благо, так как позволяет с большей легкостью изменять значения тех или иных свойств, да и сами свойства. Другая часть разработчиков не согласна с этими утверждениями и твердит о том, что переменные – зло, так как толка от них мало, они только путают и тд.

И те и другие утверждения имеют право на существование в определенных ситуациях, так как ситация неоднозначна. Но переменные – это еще ничего. Как на счет анимации элементов? До сих пор анимация является прерогативой Javascript’a, который может быть потеснен с этой должности, по крайней мере частично.

Такие моменты, как вращение элементов вокруг своей оси, смещение по плоскости и сжатие с растягиванием, могут быть подхвачены берсерками CSS и внедрены по-самое-не-балуйся. Причем любой, более-менее разбирающийся в CSS, но не разбирающийся в Javascript, скажет что был бы этому рад. В данной ситуации, Javascript, как основное средство создания динамики в веб-документах, отходит на второй план, если не дальше.

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

Может быть я сгущаю краски и все не так сложно. Давайте рассмотрим такую ситуацию. Предположим, в теории, что Эра CSS наступила и все самые смелые планы по расширению и выделению CSS в новый язык сбылись. Как я вижу это?

Использование переменных на уровне файла стилей вырастет в желание использовать глобальные переменные. В каждом проекте, состоящем больше чем из 3/5/10 страниц будет глобальный мастер-файл стилей с переменными, файл стилей, отвечающий за анимацию, файл, отвечающий за типографику и тд. Будет путаница с переменными, так как не ясно каков будет приоритет их применения. Построчно, как чтение CSS-файла сейчас, или нет? Можно ли будет выносить переменные?

Javascript станет транспортом информации от клиента к серверу и абстрагируется от оформления окончательно. Так как возможностей CSS не будет хватать для полного управления элементом (я просто не верю, что этот момент наступит), то часть разработчиков будет продолжать использовать JS для создания динамики страниц. Порядка это не добавит.

Разметка документов упростится до минорной, в любом случае, немалая ее часть будет генерироваться JS и видоизменяться в CSS. div’ы (divisions) станут основными базовыми элементами разметки. С помощью CSS они будут принимать любую форму, от круга до многоугольника. Возможностей станет гораздо больше и у дизайнеров не будут скованы руки.

Веб от всего этого только выиграет. Откроется большой простор для деятельности и креатива. Читая по кофейной гуще о возможных путях развития CSS, у меня уже чешутся руки создать что-нибудь эдакое!

А теперь ушат ледяной воды. Кто-нибудь спросил разработчиков браузеров, в частности MSIE, о их планах на будущее? Или все прогрессивные разработчики будут писать сайты исключительно для альтернативных браузеров (а не для людей)? А остальные по-старинке, будут оформлять контент с помощью CSS2.1(2.9?), где динамика, анимация и прочее останутся вотчиной ECMA Script’a?

Любые фундаментальные изменения должны быть четко структурированы и осмыслены; роли ведущих игроков должны быть распределены и расписаны, иначе не избежать неразберихи. А еще хорошо бы, чтобы такие глобальные вещи как языки разметки, программирования и оформления перестали быть Рекомендациями и превратились бы в Стандарты, за спиной которых стоит Организация, требующая их выполнения и соблюдения.

Развитие CSS – несомненное благо. И оно всенепременно затронет другие компоненты Веба. Вопрос только в том, что из фантазий войдет в реальность, а что так и останется нереализоваными мечтами? Время покажет.

С помощью этой техники, можно создавать эффект тени для картинки, буквально в пару строк. Что нужно сделать?

Для начала напомню, что для создания двойной/нестандартной рамки для изображений нужно задать отступ шириной в 1px для картинки и прописать для нее либо border с параметрами цвета и толщины, либо положить картинку в контейнер и задать для контейнера отступ и фоновое изображение.

В данном случае все проще. Нужно задать padding и border для картинки всего лишь с двух сторон, вместо четырех и фон. Например вот так:

.shadow{
border-bottom:2px solid #eee;
border-right:2px solid #eee;
padding-bottom:2px;
padding-right:2px;
background:#ccc;
}

Вот живой пример:

Не уверен что на картинке с белым фоном это выглядит так как надо, но все же :)

С неменьшим успехом можно проделывать подобное, задавая фоновое изображение и играя с его позиционированием.

Естественно, что можно и нужно эксперементировать чтобы добиться нужного эффекта, но суть ясна.

P.S. В Quircks Mode в Интернет Эксплорере 6 не будет работать padding для img, но если вы все же работаете в Quircks Mode, то это ваши проблемы :)