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

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

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

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

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

Перевод не претендует на 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 запустил бесплатный сервис шрифтов с растущей библиотекой.  Все шрифты в библиотеке доступны и для частного хранения/использования.

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

WOFF

WOFF был официально добавлен в W3C Fonts Working Group 8-ого апреля, 2010 года. Microsoft неожиданно спонсировала его внесение вместе с Opera и Mozilla. Поддержка WOFF заявлена в тестовых билдах IE9 для разработчиков. WOFF будет стандартом “транспорта” для шрифтов. Поддержка WOFF уже реализована в Firefox 3.6+, и разработчики Chrome анонсировали поддержку WOFF в ближайшем будущем.

К сожалению WOFF был разрекламирован способами, которые могут ввести в заблуждение. Давайте на секунду остановимся, так как важно знать чем является WOFF и что не менее важно, чем он не является.

Как и его старший брат, EOT (Embedded Open Type), WOFF  файл является по сути архивированым файлом шрифта. Он не является шрифтовым форматом, сам по себе. Это файл шрифта, который «собрали в дорогу». Как PNG и JPEG для BMP и TIFF, так и WOFF для TTF и OTF. (В отличии от сжатого изображения, оригинальный шрифт может и должен быть распакован из сжатия.) На практике, WOFF и EOT очень похожи и  соотношения сжатия для них более-менее одинаковы.

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

IE9 и DirectWrite

IE9 использует Windows DirectWrite API для отрисовки шрифтов. Если вы еще не скачали предпросмотровую версию IE9  я рекомендую вам попробовать, это может вас приободрить. Проведя некоторое время с IE9 preview, вы не захотите возвращаться к IE8 и XP. (Mac-юзеры, не ржать.) Отрисовка шрифтов в IE9 это нечто гораздо большее, чем мы ожидали. Несомненно на уровне с Маком, а в некоторых случаях даже лучше. Каково бы не было ваше мнение, разница сократилась значительно. Одним из отличных побочных эффектов фокуса на веб-шрифтах стало заострение внимания на том, как  желание отрисовки шрифтов в браузерах под Windows  сравнивается с отрисовкой в браузерах на OS X. Обратите внимание на то, что DirectWrite является Windows API, а не специфично для  IE, и другие браузеры, такие как Firefox тоже реализуют его.

IE9 и @Font-Face с помощью CSS3

Удивительно, но то что делает @font-face годным кросс-браузерным решением сегодня, это то что IE поддерживает @font-face уже более десяти лет. Тем не менее, IE9 будет первой реализацией @font-face так как описано в спецификации CSS3.

Вот основные изменения:

Форматы шрифтов

Дополнительно к TrueType (TTF) шрифтам, IE9 будет поддерживать PostScript-приправленные OTF CFF шрифты, так же как и  “большая пятерка” браузеров. Удаление этой преграды для совместимости само по себе очень хорошо, но с предупреждением: только если в интересах обратной совместимости для IE 6–8, это произойдет за несколько лет до того как веб-шрифты перестанут быть TrueType. IE 6–8 будут поддерживать только TrueType шрифты, запакованные как EOT. Кроме этого есть и другие проблемы отрисовки в браузерах под Windows, о которых надо помнить.

Остается надеяться что дизайнеры шрифтов помогут в этом, создавая свои шрифты доступными в TrueType с адекватным TrueType хинтингом. Либо, как вполне серьезно предложил мне один дизайнер шрифтов, все должны воздержаться от использования веб-шрифтов, пока IE8 не уйдет со сцены. Ха! Слишком поздно.

Синтаксис

Внутри @font-face “декларации” в CSS3, вы, как веб автор, должны делать то, что операционные системы делают для вас с «безопасными» шрифтами. Вы должны группировать шрифты в семейства, декларируя их под одним именем семейства. Вы должны разделять членов этого семейства, декларируя для каждого из них быть различной комбинацией font-style (normal, italic) и font-weight (normal, bold).

Обратите внимание на то, что селекторы font-weight и font-style имеют различные значения внутри @font-face правила от тех же селекторов вне правила в основной таблице стилей. Внутри декларации, font-weight: bold означает, “это жирный участик этого семейства шрифтов;” вне декларации  font-weight: bold означает, “применить жирность к этому тексту,с помощью участника этого семейства шрифтов, который декларирован как жирный.”

В IE6–8 @font-face работает тем же способом. Однако для того, чтобы EOT-файлы работали правильно, некоторые наименования и описательная информация внутри TTF-файла из которого создан EOT, должны совпадать с CSS декларацией. В большинстве случаев это не проблема. Но иногда, некоторые поля внутри таблиц данных шрифта должны быть изменены. В случае необходимости, все проблемы изучены и легко могут быть исправлены. (Подробности в документации для EOTFAST.)

Инструментарий для Веб-шрифтов

Необходимый инструментарий, которым должны обладать веб авторы:

Font Squirrel Генератор

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

Кроме того, возможно вы захотите ознакомиться с некоторыми бесплатными утилитами, которые используются за кулисами в таких местах как Font Squirrel, Kernest и Google:

• FontForge полновесный редактор шрифтов со всевозможными конфигурируемыми вкусностями на стороне сервера. Открытый исходный код.
• sfnt2woff это набор утилит с открытым исходным кодом для упаковки TTF и OTF CFF шрифтов в WOFF-файлы.
• ttf2eot это предшественник EOTFAST. Он создает несжатые «легкие» EOT-файлы.
• TTX это средство конвертации OpenType и TrueType шрифтов  в и из XML.
• Fontue это движок с открытым исходным кодом для вывода веб-шрифтов и скриптов для обработки шрифтов. Приветствуются вклады в Github.
• WebFont Loader это JavaScript-библиотека, которая позволяет лучше контролировать загрузку шрифтов, чем позволяет Google Font API. Создана в сотрудничестве между Google и TypeKit.

EOTFAST

Разработан мной и Филлипом Тейлором из Кембриджа,  EOTFAST является бесплатной и простой для использования альтернативой Майкрософтовскому конвертору, WEFT. Используйте EOTFAST для создания оригинально сжатых EOT файлов, совместимых с IE 6–8 и более быстрой загрузкой страницы. Обратите внимание на то, что EOT формат не был признан нерекомендованным и будет продолжать работать во всех режимах рендеринга в IE9, создавая тем самым легкий путь работы со всеми версиями IE, не прибегая к условным комментариям.

Доверительные лицензии

Доверительные лицензии—шрифты по оптовой цене, которые предоставляются в виде устанавливаемых TTF или OTF файлах для упрощения разработки, на равне с публикацией на веб-серверах — доступны в Font Spring. Этот сайт предоставляет, как каждый подобный сайт должен был бы, образцы шрифтов, так что вы в действительности видите то товар, перед тем как покупаете его. Надеюсь, остальные подобные сервисы примут эту простую модель лицензирования за основу.

Шрифтохранилища и «маскирующие» сервисы (FHOS)

До появления @font-face, браузеры полагались на операционные системы в вопросе шрифтов, так что нелицензионное использование оных на сайтах не было проблемой. Операционные системы являлись не только технологической основой, но и законодательной. Права на использование «безопасных» шрифтов для веба пришли с операционной системой. Но @font-face обходит операционные системы, так как шрифты приходят с веб-сервера. Создатели коммерческих шрифтов предстают перед перспективой потери контроля и абсолютно новыми правовыми реалиями. Помимо этого появляется перспектива огромного нового рынка,но внутри индустрии шрифтов не настолько воодушевлены ею, как обеспокоены потенциальной потерей контроля. Рынок веба неизучен, тогда как рынок печати закреплен. Конфликт новых и старых медиа возрождается, в этот раз в шрифтах.

Заботы создателей коммерческих шрифтов гораздо глубже, чем сценарий ситуации когда посетитель сайта видит понравившийся ему шрифт, роется в CSS и скачивает его. Позвольте мне предложить объяснение, чтобы вы могли лучше понять почему существуют сервисы шрифтов, использующие «маскировку», а в некоторых случаях и запутанные,  и тупые лицензионные соглашения.

Производители шрифтов видели что произошло с индустрией музыки, книг, газет, журналов и банков изображений и они бояться что то же самое произойдет с ними. Это называется iTunes Effect, and it’s about price.

Дизайнеры шрифтов все еще очень сфокусированы на принте. В общем, основные деньги находятся в обслуживании профессиональных клиентов в индустрии печати: книги, журналы, художественное оформление и так далее. Цены обычно варьируются в зависимости от количества пользователей продукта. Основной их страх в том, что как только шрифты появятся в сети, они станут продуктом широкого потребления, существующая бизнес-модель рухнет и произойдет обесценивание шрифтов. Дизайнеры шрифтов боятся того, что не смогут запросить с клиента, скажем, 420$ за четыре семейства шрифтов для 6-10 пользователей, в мире где шрифты предоставляются на сайтах для «условно» неограниченного количества посетителей, которые вобще ничего не должны платить за это. Что если интернет снижает цены в секторе печати и сам по себе фактически не генерирует дохода?

Предостережение покупателям

В ответ на «интернет угрозу», некоторые коммерческие дизайнеры шрифтов выбрали шрифтохранилища и «маскирующие» сервисы. По существу, эти сервисы используют модель Amazon Kindle, но вместо книг вы получаете то, из чего сделаны книги — шрифты. Они раздаются отмереным, контролируемым путем так, что создатели шрифтов занют куда каждый из шрифтов идет и кем используется. Маскировка фокусируется на предотвращении обычного скачивания и возможности создания устанавливаемого в операционную систему шрифта, и поэтому шрифт становится недоступным для работы в таких програмах как InDesign. Основная задача подобных сервисов — удержать семейства шрифтов в своих руках.

Увеличение дискуссий между предтавителями производителей шрифтов, такими как Microsoft, Adobe, Monotype Imaging и другими, в следствии появления Typekit’а в прошлом году, в последние месяцы привело к созданию таких маскирующих сервисов какMicrosoft’s font distribution proxy, Ascender Corp, Extensis (специалисты в програмном обеспечении для управления и лицензирования шрифтов), Monotype Imaging, и коллектив, включающий Font Bureau от David Berlow.

Я могу сказать вам  что ребята из Extensis, Ascender и Monotype счастливы и полны энтузиазма предоставлять шрифты для веба. Но они уж точно не будут спешить рассказывать вам, что система распространения этих шрифтов создана в ограничениях умной, но «грязной» DRM-подобной структуры. Это понятно. Но попытки идентифицировать и предотвратить случаи нелицензированого распространения через код доказали свою нецелесообразность фактически для всех и в перспективе, все попытки маскировки шрифтов выглядят тщетными и нецелесообразными.

Дизайнер шрифтов Ray Larabie выразил это лучше всех:

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

Покупатель, будь благодарен

Как обычно, есть и обратная сторона. Можно рассматривать FHOS как фазу. Сервисы все время обновляются. Например WebINK сервис от Extensis бесплатный устанавливаемый «мастер предпросмотра» шрифтов Type Drawer, который позволяет, среди прочего, мнгновенно менять определенные шрифты на странице, просто перетаскивая их. Это позволяет сэкономить кучу времени и это то, что нужно дизайнерам в работе. На данный момент это проприетарная разработка WebINK, но она формирует направление развития сервисов.

Проверочный список сервисов шрифтов

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

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

1. Какие точно препятствия созданы в попытке предотвратить скачивание и установку шрифтов в операционной системе? На сколько вырастает число запросов к серверу в результате?
2. Отключено ли кеширование? Будут ли пользователи видеть  сначала «необстиленые» шрифты, которые потом будут сменяться нужными? (Flash Of Unstyled Text)
3. Если разделение файла шрифта на части является техникой маскировки, то как это может повлиять на шаг и кернинг? И является ли разбивка файла шрифта на части дополнительным фактором риска в некоторых браузерах?
4. Действительно ли сервис соответствует стандартам и позволяет вам использовать стандарт CSS3 во всей ширине, как это позволяют сейчас современные браузеры, поддерживающие @font-face?
5. Понятны ли  Пользовательское соглашение или Условия использования? Согласны ли вы или ваш клиент с обязывающими положениями контракта? Если вы прекратите пользоваться сервисом и будете хранить свои шрифты у себя, надете ли вы компромисс в соглашении?
6. Какова политика конфиденциальности? Будет ли сервис мониторить и сохранять логи активности на вашем сайте, и если будет то как? Что будет происходить с этой информацией?
7. Будут ли условия контаркта определять права посетителей вашего сайта? Имеют ли право посетители вашего сайта использовать шрифт не только для отображения на экране, но и распечатывать его и создавать PDF? Будут ли подвергаться риску те пользователи, которые попытаются скачать файлы шрифтов индивидуально? (Давайте признаем, все мы смотрим как люди делают свои сайты, это интернет.)
8. Когда поддержка WOFF (и EOT) станет повсеместной,будет ли какой-то путь для хранения шрифтов у себя, или вы будете привязаны к сервису навсегда?

Комментарии приветствуются.

Расширеные функции OpenType

С того момента, как John Daggett из Mozilla возглавляет CSS3 Fonts Module, впечатляющая команда приглашенных экспертов в дизайне типографики обдумывает проблемы передовой типографики в W3C.Уже в ближайшее время это может иметь большое влияние на отображение математических символов и не-латинских языков.

Будущее Flash Text Replacement

Уже прошло несколько лет с момента выхода iPhone, а флэш на нем все еще не разрешен. Как и на iPad.  Недавнее высказывание Стива Джобса привлекло много внимания и сложно представить себе что Apple пойдет на попятную в этом вопросе. Плюс, iPhone и iPad поддерживают гораздо более простую и элегантную альтернативу для отрисовки шрифтов с использованием SVG — @font-face. Любому разработчику, планирующему новый проект, тяжело предтавить себе использование в нем технологии sIFR. @font-face более прост в освоении и ему не нужно иметь будущее, он уже будущее.

Библиотека шрифтов Google

Благодаря неожиданной разработке, которая произросла из неформальных разговоров с ребятами из Typekit, Google стал провайдером свободно лицензированых шрифтов через Google Ajax API. Это опенсорсный проект в котором можно найти документацию, примеры и информацию о том, как можно способствовать его развитию в GitHub репозитории.В отличии от многих опенсорсных проектов, у этого есть постоянный куратор Raph Levien.

Заставим это работать сегодня

А теперь давайте окончательно запутаемся: для IE 6–8 вы можете использовать только TTF шрифты,  обернутые как EOT или EOT “Lite” (несжатый). Для Firefox, Opera, Chrome, и Safari, вы можете использовать TTF или OTF файлы, как “сырые” или в некоторых случаях обернутые в WOFF файлы или как data URI внутри файла стилей. SVG будет основным форматом шрифтов, идущим вперед, но его основная добродетель сегодня заключается в поддержке в мобильном Safari для iPhone и iPad.

Да, это путает. Сначала. Всегда есть большие изменения. Но я ожидаю от веб-авторов сделать то, что они всегда делают. Найти путь заставить это все работать. Сырые материалы  здесь и здесь. Инструменты здесь и здесь. Решения здесь и здесь. Так сложите вместе несколько страниц примеров и темплейтов, и приготовьтесь к распутью. Время пришло.

Translated with the permission of A List Apart Magazine and the author[s].

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

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

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

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

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

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

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

DOCTYPE HTML5:

<!DOCTYPE html>

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

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

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