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 был и остался языком разметки гипертекста, хоть и расширился и развился в соответствии с реалиями.

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

Браузеры | 4 комментариев

CSS1K

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

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

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

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

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

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

CSS | Комментировать

Новый .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 | 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: Следующая бета-версия не заставила себя долго ждать: Читать дальше 

CSS | Комментировать

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

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

CSS, HTML | 11 комментариев