Different reality

Уже довольно давно я хочу упорядочить свои мысли по поводу развития браузеров, стандартов, технологий, перспектив и в связи с этим решил изложить их в виде статьи. Каких либо инноваций и откровений здесь не будет, но поводов поразмыслить достаточно.

Я занимаюсь клиентской разработкой уже 8 лет и за это время браузеры совершили гигантский скачок вперед. Во-первых их стало очень много. В зоопарке разработчика на данный момент 10(!) основных браузеров — IE6/7/8/9, Fx 3.6/4/5, Opera, Chrome, Safari плюс мобильные и специфические. К счастью, ветеран IE6 уже вскоре окончательно умрет, да и IE7 уже сдает позиции. Firefox поменял свой подход к версионности вслед за Chrome и будем надеяться что в скором времени мы будем работать только с последним релизом, не оглядываясь на цифры. Opera тоже заматерела и движется в сторону автообновления.

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

Внедрение стандартов в браузерах похоже на гонку вооружений. Кто быстрее, кто сильнее, кто больше и тд. На самом деле, мы, разработчики от этого только выигрываем. Но как всегда и во всем, иногда происходят перегибы. Когда видишь ссылку на тот или иной showcase с охами и ахами, заходишь на страничку, а там написано “Best viewed at latest Chrome” — сразу вспоминаешь про времена IE6 и начинает подташнивать. Стандарты это отлично, продвижение стандартов — еще лучше, но не таким же способом.

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

Иногда это абсолютно незаменимая вещь, которая спасает от красных глаз, многочасовой писанины кода и угроз расправы со стороны менеджеров, а иногда заводит в дебри и вылезает боком с совершенно неожиданного направления. Для примера скажу, что такой либой является CSS3PIE, которая эмулирует такие CSS3 свойства как border-radius, box-shadow, RGBA и поддержку градиентов в background для IE6-8. Для простых статических страничек и страничек с маленьким количеством элементов все работает чудесно и разработчики в восторге, но стоит применить PIE к элементам участвующим в анимации либо генерируемым с помощью Javascript, и начинаются танцы с бубном.

Но это относится к вещам, используемым as is. Modernizr например, использует другой подход. Изначально вы проверяете, поддерживает ли браузер тот или иной стандарт, и уже в зависимости от этого решаете что ему выдавать. На выходе, вам в любом случае надо будет либо восполнять недостающую функциональность с помощью JavaScript, либо использовать избыточный код и картинки. И в том и в другом случае вы платите за это производительностью.

Что мы имеем в итоге? Часть браузеров получают красивый, семантичный код и все плюшки, а часть браузеров затыкаются и загружают процессор, либо жрут траффик. За все, как известно, надо платить, но я предлагаю подумать за что именно и стоит ли платить. Старые добрые и проверенные решения еще никто не отменял.

Кстати, если уж припомнили всякие красивости, такие как закругленные уголки, тени и градиенты, то стоит отметить, что производители браузеров в первую очередь реализовали именно их, частично из-за того что их реализация была не слишком сложной и частично из-за маркетинга. Реализация новой box-model, взамен откровенно устаревшей существующей до сих пор плетется в хвосте. Так же отстают такие части стандартов как local storage, indexed database api, page visibility, Cross-Origin Resource Sharing и еще много других, которые реально важны для разработчиков, но не являются Eye Candy. что напоминает известную фразу о том, что народ требует хлеба и зрелищ. Главное чтоб было красиво.

В связи с предыдущим пассажем о наглядности и свистелках-перделках, хотелось бы упомянуть и о предназначении. Из ниоткуда, как грибы после дождя, стали появляться всевозможные игры, сделаные на HTML5 и CSS3. Их разработчики очень гордятся своими творениями и их можно понять. Ведь они так мучались чтобы сделать приложение с помощью технологий, которые для этого не предназначены. Но зачем? HTML был и остался языком разметки гипертекста, хоть и расширился и развился в соответствии с реалиями.

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

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 будет адекватной заменой существующим “костылям”, а в некоторых — нет.

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

Веб-шрифты на распутье

*Предоставленый здесь материал — мой перевод статьи Web Fonts at the Crossing из сайта A List Apart. Автор статьи Richard Fink.

Перевод не претендует на 100%-ную точность, но я постарался максимально точно передать мысли и слог автора. Комментарии приветствуются.

Начиная с Интернет Эксплорера 4 в 1998-ом, а затем с марта 2008-ого и до марта 2010-ого, один за другим, вся «большая пятерка» десктопных браузеров — Сафари, Файрфокс, Опера и Хром — выкатили сравнительно похожие реализации правила @font-face для привязки шрифтов.  Вместе с тем, неотъемлимая часть веб-издательского паззла, часть, которой не хватает с начала Веба, встала на место и теперь настоящая, веб-ориентированая типографика начинает принимать форму.

Для начала, обзор последних событий:

  1. 18-ого марта 2010 года была учреждена группа  Web Fonts Working Group в W3C. Её первая задача была утвердить  спецификацию WOFF как стандарт доставки sfnt (OTF и TTF) шрифтов в веб в «сжатом» виде.
  2. Была представлена отрисовка шрифтов в IE9 с помощью Windows’s DirectWrite в  IE9 Platform Preview.
  3. Появились первые инструменты для подготовки веб шрифтов, такие как Font Squirrel’s @Font-Face Generator и EOTFAST.
  4. Пошла новая волна «шрифтохранилищ»  в виде Typekit, Typotheque и бесплатного,  опенсорсного Kernest.
  5. Появились первые “трастовые/кредитные” лицензии на веб-шрифты от дизайнеров коммерческих шрифтов.
  6. CSS3 Fonts Module включил в себя некоторые продвинутые свойства OpenType.
  7. Adobe Flash, когда-то надежная, кросс-платформенная среда замены текста (sIFR), сейчас выглядит абсолютно убогой.
  8. Google запустил бесплатный сервис шрифтов с растущей библиотекой.  Все шрифты в библиотеке доступны и для частного хранения/использования.

Теперь пройдемся по пунктам… Continue reading

WebHiTech 2010

WebHiTech 2010

Стартовал единственный в своем роде технологический конкурс вебсайтов Рунета WebHiTech 2010. Заявки на участие принимаются до конца октября. Заявить на конкурс можно не только свой сайт, но и любой понравившийся вам сайт в соответствии с правилами и номинациями.

Уже второй год я состою в жюри конкурса, что не дает мне права участия. Ну а вы, дерзайте.

Обновленный 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.

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

Валидация HTML5

HTML5 стал очень модным среди разработчиков сайтов. Да что там разработчики сайтов, я уже слышу связку слов “HTML5 / CSS3″ от менеджеров среднего звена, как минимум раз в неделю.

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

Проблема в том, что стандарт еще не доработан, большинство “вкусностей” еще впереди, хочется верить. Ну и как обычно, Internet Explorer не поддерживает фактически ничего из этого стандарта. Да что там фактически, ничего. Даже отрисовку элементов из HTML5 приходится задавать через Javascript.

До недавнего времени было довольно сложно валидировать документы на HTML5, так как валидаторы плевались на DOCTYPE без ссылки на DTD.

DOCTYPE HTML5:

<!DOCTYPE html>

Существовал только один HTML5 валидатор, да и тот в разработке.

На данный момент этот валидатор все еще находится в разработке, но работает уже довольно корректно. Помимо этого, валидатор всех валидаторов от отцов из W3C уже поддерживает валидацию HTML5, не без помощи Mozilla Foundation. Появилось расширение для Firefox.

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