CSS1K

CSS1K — проект, созданый разработчиком Opera Software по имени Jacob Rask под влиянием таких проектов как CSS Zen Garden и JS1K для того, чтобы показать что можно сделать лишь с помощью 1024 байтов CSS-кода.

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

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

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

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

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

Новый .clearfix хак

Nicolas Gallagher предложил новую версию всем известного .clearfix хака:


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

.cf:after {
    clear:both;
}

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

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

Пересмотренный CSS Reset

Прошло почти 4 года с того момента, как Эрик Мэйер написал первую версию обнуления дефолтных значений HTML элементов, известную теперь всем разработчикам, как CSS Reset.

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

В связи с набирающим обороты 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: Следующая бета-версия не заставила себя долго ждать: Continue reading

Дрессируем IE

В последнее время появляется все больше и больше скриптов, эмулирующих работу CSS3 правил в IE, и скриптов, создающих элементы и атрибуты HTML5. Я вижу в этом только позитивные моменты:

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

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

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

В связи с тем, что Internet Explorer под мак не в обиходе уже как минимум 3-4 года, появилась чуть облегченная версия всем известного clearfix‘a:


.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 Reset Stylesheet

Многие веб-разработчики используют обнуление дефолтных стилей для HTML-элементов в браузерах, так называемые ластики или CSS-ресеты. Кто-то пишет свои собственные, кто-то просто обнуляет значения padding и margin у всех элементов. Я предпочитаю CSS-ресет от Eric Mayer.

С приходом 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.

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

CSS-хаки для IE 8

Продолжаем тему Internet Explorer 8. Освоим CSS-хаки:

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

.ie8only { color /***/: #fff9 }

Работает только в 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

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

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

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

Эффект тени для картинки с помощью 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, то это ваши проблемы :)