Популярность шестой версии Internet Explorer является причиной траты немалого времени на адаптацию кода страниц, идентично отображаемых во всех других браузерах, а иногда — и вовсе камнем преткновения, не позволяющим использовать в работе какую-то часть стандарта. Зачастую оформление страницы естесственным образом разделяется у меня на три этапа. На первом происходит, собственно, разработка дизайна с тестированием в Firefox (выбор браузера обоснован множеством удобных расширений). На втором — проверка, что все номально отображается в Opera, Safari и IE7. А на третьем — доработка под IE6 (иногда даже не надфилем, а молотком и пассатижами).

Хорошая статья на эту тему была опубликована пару дней назад на сайте CSS-Tricks. Ниже привожу ее перевод (повествование ведется от лица автора).

Автор: Крис Койер, css-tricks.com
Перевод: Александр Мусаев, paradigm.ru
Оригинал статьи: «IE CSS Bugs That’ll Get You Every Time», http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/

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

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

Блочная модель

Вероятно, это самый распространенный и один из самых неприятных багов в IE до шестой версии. Допустим, мы хотим определить блок:

div#box {
   width: 100px;
   border: 2px solid black;
   padding: 10px;
}

IE6 сделает ширину блока равной 100px. В действительности ширина должна быть равна 124px, и все современные браузеры отобразят блок именно так.

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

Чтобы избежать этих проблем, я вообще не использую свойство padding для элементов, отвечающих за разметку страницы. Вместо этого можно задавать отступ непосредственно для тех элементов, которые содержат контент (например, <p>).

Удвоение полей

Ошибка проявляется при определении свойств float и margin.

div#box {
   float: right;
   margin-right: 20px;
}

IE6 увеличит ширину поля с 20 до 40px. Обычно эффект пропадает после добавления элементу <div> свойства display:inline;. Но ценой такого решения станет отсутствие возможности задавать ширину для такого <div>, так же как и для всех других inline-элементов.

Как и в предыдущем случае, проблему можно обойти. Понадобится либо добавить padding для родительского элемента, либо задать его в самом <div>. На свойство padding действие бага не распространяется.

Ограничений ширины и высоты

Применение свойств min-width и min-height само по себе является очень естесственным и логичным. Поэтому осознание факта их недоступности остается весьма безрадостным. IE 6 не просто воспринимает их неправильно, а вообще игнорирует.

min-height может быть очень полезен, например, для нижнего колонтитула страницы (иногда называемого «подвалом»). Допустим, мы хотим ограничить его высоту величиной 100px, чтобы обеспечить полное отображение фоновой картинки. При этом фиксация высоты свойством height остается нежелательной, т.к. объем текста в блоке может увеличиться.

Если ограничиться указанием min-height, для IE 6 это будет равноценным полному отсутствию опрелеления высоты. Зато указание height будет воспринято по смыслу именно как min-height. Иногда этим можно воспользоваться.

«Эффект лестницы»

Предполагается, что последовательность плавающих объектов должна выстраиваться в линию. Везде происходит именно так, но IE 6 зачем-то добавляет невидимый перенос строки после каждого блока, что приводит к ступенчатому отображению элементов. Проблема исправляется обнулением line-height. Более подробно это описано в отдельной заметке.

Отсутствие hover

Большинство современных браузеров допускает определение псевдо-классов hover для любых элементов. В IE 6 это возможно только для <a>. И даже в нем hover не будет отображаться при отсутствии атрибута href. Можно воспользоваться хитрым фиксом или просто смириться.

Альфа-канал для PNG

Удивительно, что в браузере Microsoft так долго отсутствовала поддержка этого формата (до седьмой версии). Cуществует огромное количество возможных решений и они описаны отдельным постом. Стоит помнить, что обычные PNG файлы (без прозрачности) отображаются нормально и их использование этого формата зачастую предпочтительнее GIF.

Ссылки по теме

Пожалуй, дополню этот пост всего одной ссылкой, которую просто не могу не дать — на интервью с архитектором Internet Explorer Алексом Могилевским, выложенное вчера на Хабре в качестве дополнения к подкасту Radio-T #82.

Интервью так же можно скачать с Народ.диска.

background-size

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

На данный момент работает в Opera 9.5, Safari 3 и Konqueror (их селекторы называются соответственно -o-background-size, -webkit-background-size and -khtml-background-size).

Множественные background-image

Множественного определения фона все ждали еще с первой версии CSS, и, наконец, она включена в стандарт. Селектор background можно будет определять так:

background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg)  top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;

Работает в Safari, Konqueror и OmniWeb.

word-wrap

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

У селектора могут быть два значения: normal и break-word.

Я проверил работу селектора в седьмой версии Internet Explorer. В шестом IE этого сделать не получилось, т.к. сегодня по непонятной причине, при попытке открытия любой ссылки, он перебрасывает ее в Firefox (?!). По сведениям css3.info, селектор так же работает в Safari.

Многоколоночное форматирование текста

Отформатировать текст в «газетном» стиле можно будет задав ширину колонки селектором column-width, или указав нужное количество колонок с помощью column-count. Для определения размера отступов между соседними колонками предназначается селектор column-gap.

-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;

Пока работает только в Safari 3 (с префиксами селекторов -moz- и -webkit-).

Цветовая модель HSL

Возможность задавать цвета не только в RGB, но и в HSL , на мой взгляд, — довольно ожидаемое нововведение. Цвета в новом формате задаются, как не сложно догадаться, тремя параметрами:

1. Тон (hue), определяемый углом положения соответствующей точки на цветовом круге (от 0 до 360 градусов).
2. Цветность (saturation) — от 0 до 100%.
3. Яркость (lightness) — так же в процентах. 0% соответствует самому темному оттенку, 100% — самому светлому (проще говоря, яркость изменяет цвет от черного до белого).

Пример:

<div style="background-color: hsl(0,100%, 50%);"></div>
<div style="background-color: hsl(240,100%, 50%);"></div>
<div style="background-color: hsl(120,100%, 50%);"></div>

Работает в Opera 9.5, Safari 3, Konqueror и Mozilla.

Цветовые модели HSLA и RGBA

В уже существующем форматом записи цвета RGB, а так же в новым HSL можно будет использовать дополнительный, четвертый параметр — alpha, задающий уровень прозрачности. Alpha может принимать дробные значения от 0 до 1 (0 соответствует полной прозрачности).

Примеры:

<div style="background-color: hsla(0,100%,50%,0.4);"></div>
<div style="background-color: hsla(0,100%,50%,0.6);"></div>
<div style=”background: rgba(255, 0, 0, 0.8);”></div>
<div style=”background: rgba(255, 0, 0, 1)  ;”></div>

Теоретически работает в Safari 3 и пререлизах Firefox 3.

Ссылки по теме:

• css3.info — All you ever needed to know about CSS3.

Интервью у него берет Джозеф Лоуери — автор бестселлеров «Dreamweaver CS3 Bible» и «CSS Hacks and Filters». В данный момент он заведует маркетинговым отделом в компании WebAssist.

Автор: Джозеф Лоуери
Оригинал: http://adobe.com/newsletters/edge/december2007/articles/article5/index.html
Перевод: Александр Мусаев, paradigm.ru

Джозеф Лоуэри: Во время подготовки к этому интервью, я познакомился с вашей статьей, написанной в июне 1999 года о поддержке браузерами CSS и будущем этой технологии. Никто не сомневается в вашем опыте, тем не менее, как именно вам удается делать такие прогнозы?

Эрик Мейер: Согласно изначальному плану, технология CSS разделена на модули, каждый из которых формировался на определенном этапе. Сложность здесь состоит в том, что каждый из таких временных интервалов, как правило, сильно заторможен. Даже у самых «простых» модулей формируется многолетней история развития.

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

Развитие браузеров тоже складывалось все это время примерно так, как было описано в статье, хотя, разумеется, я не мог предвидеть смерть Netscape 5 и подъем Mozilla. Сомневаюсь, что такой прогноз вообще было возможно сделать в то время.

ДЛ: Вернемся к настоящему. Было ли, по-вашему, появление Microsoft Internet Explorer 7 большим прыжком в его развитии?

ЭМ: Это было больше похоже на большой прыжок на месте. Я имею ввиду, что в новой версии исправили множество дефектов IE 6 (например, ошибки парсера, проблемы с разметкой и т.д.). Кроме того, в ней добавили ряд базовых возможностей CSS 2 (главным образом — селекторы и жесткое позиционирование). В IE 7 все это появилось единовременно, что стало хорошей новостью для всех нас.

Теперь же становится очень интересно, застрянет ли эволюция IE 7 на месте, как было с IE 6, и станет ли этот браузер все больше отставать в развитии от конкурентов, или расширение его возможностей продлится. Очень надеюсь на второй вариант.

ДЛ: Насколько мне известно, CSS 3 сейчас находится в стадии обсуждения и разработки в W3C. Можете ли вы в общих чертах описать, какие новые свойства и селекторы можно ожидать дизайнерам от этого стандарта?

ЭМ: Вы неправильно поняли. То, что сейчас обсуждают и разрабатывают, — это отдельные модули CSS, каждый из которых относится к определенному этапу развития технологии.

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

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

Что же касается новых возможностей, которые ждут нас в будущем, можно привести ряд новых селекторов. В частности :nth-child(), :last-of-type и некоторые другие. Так же появится :not(), который будет полезен, но чье описание пугает меня уже сейчас. Помимо них, мне самому очень нравится формат описания цвета RGBA, в котором «A» означает «alpha», а так же форматы HLS и HLSA (для модели цветовоспроизведения hue-lightness-saturation, — прим. переводчика). Мне бы очень хотелось видеть эти возможности, реализованными в браузерах как можно быстрее.

Кроме всего перечисленного, планируется модуль поддержки кодировок с широкими возможностями, которые, вероятно, должны здорово понравится тем, кто все еще мечтает о возможности существования ASCII-арта в веб.

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

ДЛ: Похоже, спецификация CSS сегодня является предметом больших разногласий. Какие у этого основные причины? Что вы, как бывший участник W3C, думаете о возможных последствиях этих противоречий?

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

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

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

ДЛ: Можете ли вы спрогнозировать очередность появления новых возможностей в браузерах, после того, как спецификация начнет рекомендоваться? Грядет новый рассвет эпохи CSS-хаков?

ЭМ: Даже если одни браузеры будут внедрять новые возможности, в то время как другие — нет, мы уже усвоили для себя принцип прогрессивного развития: расширенные возможности нужно использовать таким образом, чтобы они положительно сказывались в отношении пользователей тех браузеров, которые их поддерживают. При этом необходимо избегать любого ухудшения пользовательских характеристик в отношении тех, кто остался со старыми браузерами. Хороший тому пример — использование генерируемого контента для вставки URL ссылок в текст перед его печатью (подробности см. в статье «CSS-дизайн: подготовка к печати» на «A List Apart»).

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

ДЛ: Сейчас активно развиваются возможности рендеринга CSS в программах для разработки веб-страниц. В частности, в Dreamweaver. Как вы считаете, это повлияет на качество работы дизайнеров?

ЭМ: Безусловно. Я общался со многими молодыми дизайнерами, у которых уже сейчас в голове не укладывается, зачем использовать таблицы для страничной разметки. Они просто этого не понимают. Такие перемены в индустрии во многом обоснованы функциональностью инструментов для создания веб-страниц и тем, как сейчас развиваются браузеры (оба фактора одинаково значимы).

ДЛ: Наша компания недавно сотрудничала с вами, в ходе разработки расширения Dreamweaver под названием «Eric Meyer’s CSS Sculptor». Ваша жизнь изменилась в лучшую сторону после того, как ваше имя прославило это название?

ЭМ: Да, на конференциях теперь меня встречают овациями, за что я несказанно благодарен, Джо. А еще (только никому не говорите) я недавно построил огромный бассейн у себя в подвале, чтобы хранить в нем заработанные на этом деле деньги. Это здорово приближает меня к заветной мечте — воплотить в себе образ Скруджа МакДака.

Других существенных перемен не произошло.

ДЛ: Если серьезно, как вы считаете, повлияло ли появление CSS Sculptor на работу пользователей Dreamweaver? И, если да, то каким именно образом?

ЭМ: Я надеюсь, это повысило скорость разработки страничной разметки с помощью CSS. CSS Sculptor — один из программных продуктов, которыми я пользуюсь сам. А это уже большой комплимент в его сторону, т.к. я отношусь к старой школе веб-дизайнеров, предпочитающих кодирование вручную (имею 14-летний опыт в этой сфере).

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

ДЛ: Как бы вам хотелось видеть развитие поддержки CSS в Dreamweaver?

ЭМ: До тех пор, пока эта поддержка остается адекватной возможностям актуальных версий браузеров, она будет меня устраивать.

ДЛ: Что вы посоветуете веб-дизайнерам, которые только начинают свою работу? Тем, кому предстоит применять CSS в будущем?

ЭМ: Самый главный совет, который я могу дать: практика, практика и еще раз практика. Без нее не будет никакой разницы, сколько книг, статей и спецификаций вы прочитаете. Все это никогда не заменит практического опыта, приобретенного экспериментированием.

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

Не стоит так же говорить, что дизайнеры всегда должны уметь творить. Они просто обязаны обладать этой способностью, чувствовать природу той среды, в которой они работают, а так же понимать, что можно получить от таких инструментов, как Dreamweaver и Sculptor.

ДЛ: Какие информационные ресурсы вы могли бы порекомендовать?

ЭМ: Одним из лучших ресурсов по CSS является wiki, на которой обсуждается эта технология. На сайте css-discuss.incutio.org собрано огромное количество информации, накопленной в ходе пятилетней работы специализированной рассылки. Там можно найти описание плюсов и минусов применения различных CSS-техник, объяснения на простом языке сложных аспектов использования CSS, тонны ссылок на другие ресурсы и многое другое. Это первый источник информации, к которому обращаюсь я сам, когда хочу что-то выяснить относительно CSS.

Помимо вики, стоит обратить внимание на PositionIsEverything.net, материалы сайта House of Style, а так же краткие руководства Расса Уикли. Для расшифровки сложных селекторов я рекомендую SelectORacle. Ну и конечно же стоит дополнить список всевидящим оком Google.

ДЛ: Не стоит забывать еще об одном интересном ресурсе — вашем блоге на meyerweb.com. Эрик, большое спасибо за то, что поделились с нами своими мыслями о настоящем и будущем CSS.

От переводчика

Хочу добавить от себя, что нашел очень полезным SelectORacle. Сервис дает описание на человеческом языке сложных селекторов CSS и может быть очень полезен при изучении оных. Интерфейс Eric Meyer’s CSS Sculptor для Dreamweaver выглядит следующим образом:

Другие скриншоты и презентацию этого продукта можно найти на официальном сайте. Ниже привожу ссылки на книги вышеупомянутых авторов, которые теоретически продают в России:

Обсуждение на Хабре →

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

Вводная «лирическая» часть текста сокращена, т.к. она во многом пересекается с ранее опубликованным обзорным постом об HTML 5, в котором был приведен фрагмент интервью того же автора.

Автор: Лахлан Хант, http://lachy.id.au
Оригинал: http://www.alistapart.com/articles/previewofhtml5
Перевод: Александр Мусаев, http://paradigm.ru

Введение

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

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

Структура

HTML 5 предоставляет множество новых элементов, благодаря которым структурирование веб-документов будет существенно упрощено. Множество страниц, основанных на HTML 4, содержали в себе типичные структурные фрагменты, таких как заголовок, колонки текста, нижний колонтитул и т.д. На сегодняшний день обычным решением считается определение этих блоков с помощью контейнеров div с указанием для каждого из них имени соответствующего класса или уникального идентификатора.

На иллюстрации приведена типовая разметка страницы с двумя колонками, сделанная с помощью контейнеров div с атрибутами class и id. В ней содержится «шапка», горизонтальный блок навигационных элементов, блок для основного текста страницы, вспомогательная колонка справа от него и нижний колонтитул.

Элементы div активно используются по той причине, что текущая версия стандарта HTML испытывает недостаток в семантических элементах, с помощью которых можно было бы описывать перечисленные выше блоки страниц более конкретно. В стандарте HTML 5 учитывается этот недостаток и предоставляется ряд новых тегов для отдельного описания каждого блока типовой разметки.

Контейнеры div заменяются в нашем примере новыми элементами: header, nav, section, article, aside, и footer. HTML-код при этом принимает следующий вид:

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

Существует ряд причин отдавать предпочтение перечисленным выше новым тегам. Например, при их использовании снимается существовавшее ранее ограничение в шесть уровней заголовков (h1-h6). В спецификации подробно описан алгоритм формирования оглавления, в котором не только учитываются новые структурные элементы, но и сохраняется обратная совместимость с предыдущей версией стандарта. Это нововведение может быть использовано для автоматической генерации оглавлений, что упростит навигацию внутри веб-страниц.

В следующем примере совместно используются контейнеры section и h1:

<h1>Level 1</h1>
<section>
  <h1>Level 2</h1>
  <section>
    <h1>Level 3</h1>
  </section>
</section>

Обратите внимание, что для лучшей совместимости с существующими браузерами, помимо h1 так же возможно использование заголовков других уровней (h2-h6).

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

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

<header>
  <h1>A Preview of HTML 5</h1>
  <p class="byline">By Lachlan Hunt</p>
</header>

<header>
  <h1>Example Blog</h1>
  <h3>Insert tag line here.</h3>
</header>

Элемент footer представляет собой завершающий блок секции, к которой относится (аналог нижнего колонтитула для страницы «бумажного» документа). Такие блоки, как правило, содержат вспомогательную информацию о секции. Например, ссылки на связанные материалы, информацию о правах на копирование и т.д.

<footer>© 2007 Example Inc.</footer>

nav предназначен для навигационных ссылок, что полезно как для межстраничных переходов внутри сайта, так и для внутристраничной навигации (для организации оглавления).

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Контейнер aside используется для вспомогательных материалов, например, для определения дополнительных колонок с второстепенным текстом (сайдбаров).

<aside>
  <h1>Archives</h1>
  <ul>
    <li><a href="/2007/09/">September 2007</a></li>
    <li><a href="/2007/08/">August 2007</a></li>
    <li><a href="/2007/07/">July 2007</a></li>
  </ul>
</aside>

Элемент section интерпретируется как секция общего назначения. Такой секцией может быть, например, параграф.

<section>
<h1>Chapter 1: The Period</h1>
<p>It was the best of times, it was the worst of times,
   it was the age of wisdom, it was the age of foolishness,
   it was the epoch of belief, it was the epoch of incredulity,
   it was the season of Light, it was the season of Darkness,
   ...</p>
</section>

(в примере приведена выдержка из «Повести о двух городах» Чарльза Диккенса)

article определяет независимые секции документа, страницы или сайта. Этот элемент может использоваться для выделения новостей, сообщений на форуме, постов или комментариев на блоге и т.д.

<article id="comment-2">
  <header>
    <h4><a href="#comment-2" rel="bookmark">Comment #2</a>
        by <a href="http://example.com/">Jack O'Niell</a></h4>
    <p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time>
  </header>
  <p>That's another great article!</p>
</article>

Аудио- и видеоматериалы

В последние годы аудиозаписи и видеоролики получили широкое распространение в интернете благодаря многочисленным сервисам, облегчающим их публикацию (YouTube, Google Video, MySpace, etc.). Из-за недостатка встроенных возможностей HTML, большинство сайтов, размещающих подобный контент, используют Flash, в качестве вспомогательного средства. Выбор этой технологии обычно обоснован тем, что Flash на данный момент имеет наиболее широкую поддержку среди браузеров, по-сравнению с альтернативными технологиями, с помощью которых можно было бы обеспечить воспроизведение мультимедиа-контента (QuickTime, Windows Media).

Огромное количество мультимедиа-плееров, написанных на Flash, является подтверждением того, что разработчики чаще всего предпочитают самостоятельно формировать их интерфейс, не смотря на то, что в большинстве случаев пользователям предоставляется одна и та же функциональность (воспроизведение, пауза, перемотка и управление громкостью). Планируется, что в будущем эти функции будут поддерживаться самими браузерами, что обеспечит базовую возможность для встраивания аудио- и видеозаписей в веб-страницы, а так же возможность управлять этими элементами через DOM API.

С помощью новых тегов video и audio это будет действительно просто. Большая часть функций их API будет совпадать, с одной лишь разницей в ориентации на воспроизведение визуального и невизуального материала.

У Opera и WebKit уже есть релизы с частичной поддержкой тега video. Уже сейчас можно загрузить экспериментальную версию браузера Opera или последнюю еженочную сборку WebKit для демонстрации работы приведенных ниже примеров кода. Opera имеет поддержку Ogg Theora, а WebKit понимает все форматы, что и QuickTime, включая кодеки сторонних разработчиков.

Самый простой способ вставки видеозаписи в веб-страницу состоит в применении контейнера video, как показано на следующем примере. Атрибут controls предназначен для определения того, нужно ли будет отобразить интерфейс стандартного медиаплеера или нет (в нашем случае элементы управления воспроизведением будут отображены).

<video src="video.ogv" controls poster="poster.jpg"
   width="320" height="240">

   <a href="video.ogv">Download movie</a>

</video>

Необязательный атрибут poster может быть использован для определения статического изображения, отображаемого в контейнере video до того, как начнется воспроизведение записи. Существуют форматы видео, которые имеют аналогичную встроенную возможность (напрмиер, MPEG4), но использование описанного выше подхода позволяет добиться этой функциональности без привязки к конкретному кодеку.

Точно таким же образом можно встраивать в документы аудиозаписи с помощью элемента audio. Большинство атрибутов у тегов audio и video совпадают, но у audio по понятным причинам отсутствуют width, height и poster.

<audio src="music.oga" controls>
    <a href="music.oga">Download song</a>
</audio>

В стандарте HTML 5 предусмотрен элемент source для вставки ссылок на аудио- и видеофайлы в нескольких альтернативных форматах, из которых браузер сможет делать выбор наиболее предпочтительного варианта, на основе поддерживаемых им кодеков и указанных в коде типов формата контента. При использовании вложенных тегов source, атрибут src контейнеров audio и video должен быть опущен, в противном же случае, теги source будут проигнорированы.

<video poster="poster.jpg">
    <source src="video.3gp" type="video/3gpp"
       media="handheld">
    <source src="video.ogv" type="video/ogg"
       codecs="theora, vorbis">
    <source src="video.mp4" type="video/mp4">
</video>

<audio>
  <source src="music.oga" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
</audio>

Для разработчиков, которые сами желают контролировать функционирование пользовательского интерфейса и обеспечивать лучшее его соответствие общему дизайну страниц, предоставлен специальный API, через который можно управлять процессом воспроизведения. В этом API определены методы play() и pause() (смысл которых понятен из названия), а так же свойство currentTime, которое в следующем примере используется для «перемотки» видеозаписи в начало.

<video src="video.ogg" id="video"></video>

<script>
  var video = document.getElementById("video");
</script>

<p>
   <button type="button" onclick="video.play();">Play</button>
   <button type="button" onclick="video.pause();">Pause</button>
   <button type="button" onclick="video.currentTime = 0;">
      << Rewind</button>
</p>

(похожий пример на opera.com)

Существует множество других атрибутов и функций API, помимо перечисленных в данной статье. Их подробное описание можно найти в актуальной на данный момент рабочей версии спецификации.

Представление документов

В отличии от предыдущих версий HTML и XHTML, описанных в терминах их собственного синтаксиса, HTML 5 описывается согласно терминам Document Object Model (DOM). Для внутреннего представления документа браузером используется древовидная структура.

Ниже приведен простейший пример структуры документа, состоящего из названия страницы, заголовка и одного абзаца текста:

Такое дерево содержит в себе элемент title в контейнере head, а так же h1 и p в body.

Основная причина (и преимущество) выбора DOM для определения стандарта HTML 5 состоит в том, что сам язык в таком случае может быть описан независимо от синтаксиса. Существуют два основных типа синтаксиса, согласно которым может быть представлен HTML документ: HTML-сериализация (так же известная как HTML 5) и XML-сериализация (или XHTML 5).

HTML-сериализация основана на обычном для более ранних версий синтаксисе HTML (созданном на базе SGML). Ее определение ориентировано на лучшее соответствие тому, как в действительности браузеры обрабатываю HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>An HTML Document</title>
  </head>

  <body>
    <h1>Example</h1>
    <p>This is an example HTML document.
  </body>
</html>

Как и в предыдущих версиях HTML, некоторые теги остаются опциональными, и их наличие автоматически подразумевается.

XML-сериализация использует XML 1.0 и пространства имен, так же как и XHTML 1.0.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>An HTML Document</title>
  </head>

  <body>
    <h1>Example</h1>
    <p>This is an example HTML document.</p>
  </body>
</html>

В отличие от предыдущего примера, здесь присутствует атрибут xmlns, а так же закрывающий тег p (чье наличие в контексте XML обязательно).

Для определения разницы между сериализациями, браузеры будут использовать значение MIME-типа. Любой документ, определенный как text/html, должен соответствовать требованиям HTML-сериализации. В случае же если MIME-тип имеет значение application/xhtml+xml, должны быть удовлетворены требования XML-сериализации.

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

Преимущества использования HTML-сериализации:

• Обратная совместимость.
• Хорошо знакомый синтаксис по предыдущим версиям стандарта HTML.
• «Мягкие» синтаксические правила, которые прощают мелкие ошибки. Благодаря этому, пользователи с меньшей вероятностью смогут увидеть сообщение от браузера о невозможности отображения документа (даже если ошибки в нем действительно присутствуют).
• Удобный, лаконичный синтаксис, в котором можно опускать некоторые теги и значения ряда атрибутов.

Примечание переводчика: многие из перечисленных преимуществ так же являются и недостатками. В частности, снижение жесткости синтаксических правил автоматически провоцирует порождение небрежного, «грязного» кода.

Преимущества применения XHTML-сериализации:

• Жесткие синтаксические правила XML заставляют писать более качественную разметку, что часто облегчает дальнейшую работу с контентом.
• Интеграция с другими основанными на XML стандартами (например, SVG и MathML).
• Совместимость со стандартными средствами обработки XML (часто применяется при обработке и публикации материалов).

Содействие развитию стандарта

Не смотря на то, что работа над HTML 5 идет семимильными шагами, до ее завершения остается еще немалое количество времени (по сегодняшним оценкам потребуется еще 10-15 лет). В течении этого времени, отзывы со стороны веб-дизайнеров, разработчиков CMS и браузеров, а так же иных специалистов, остаются крайне актуальными для успешного развития проекта. Инициатива всех желающих внести свой вклад в развитие HTML 5 не только приветствуется, но и активно поощряется.

Вспомогательные материалы и ссылки по теме:

• Отличия от HTML 4, в которых перечислены все изменения, произошедшие относительно предыдущей версии.
• Принципы HTML-дизайна — обсуждение принципов, на основании которых сейчас принимаются решения относительно процесса проектирования.
• Руководство веб-разработчика по HTML 5 — предназначено для помощи веб-дизайнерам и разработчикам в понимании всего, что им необходимо знать относительно HTML 5. Содержит рекомендации и демонстрационные примеры.
• W3C’s HTML WG
• Список рассылки HTML WG
• Вики HTML WG
• Список рассылки WHATWG
• Форум WHATWG
• Блог WHATWG

Обсуждение на Хабре: http://habrahabr.ru/blog/webdev/32158.html.

В HTML5 появится немалое количество новых возможностей, например, встроенные средства для более эффективного создания интерсактивных веб-приложений, интеграции мультимедийного контента, etc. В принципе, это хорошо и правильно, тем не менее, само существование и развитие этого стандарта порождает вопросы относительно его позиционирования. Для чего нужно возрождать HTML, когда уже много лет W3C рекомендует переход на XHTML, а в перспективе — на еще более суровый стандарт XHTML2? На фоне этих рекомендаций, логика которых вполне понятна, HTML5 кажется шагом назад, не смотря на нововведения в его функциональности.

Я нашел интервью одного из инсайдеров WHATWG, где затрагивается эта тема. Ниже приведен перевод ответов на некоторые наиболее интересные вопросы оттуда, в которых Lachlan Hunt говорит об HTML5 и предназначении этого стандарта.

[Q] …Итак, что же представляет собой HTML5?

[A] HTML5 представляет собой новое поколение стандарта HTML, над которым сейчас ведется разработка в WHATWG. Это попытка документировать и стандартизировать многие возможности HTML и DOM, которые уже давно и активно применяются разработчиками, но при этом имеют очень слабое описание в HTML4 а в более ранних версиях стандарта — вообще не присутствуют. Кроме того, HTML5 предлагает нововведения, разработанные для удовлетворения актуальных на сегодняшний день нужд разработчиков.

[Q] Как HTML5 уживется с XHTML2? Найдется ли применение им обоим?

Спецификация XHTML2 находилась в закрытой разработке, начиная с 2001-2002 годов, и рассчитывалась для замены стандарта HTML. Тем не менее, сейчас в ней имеются серьезные недостатки, кроме того качество этой спецификации оставляет желать лучшего. В ней изначально не предполагалась обратная совместимость и был определен ряд новых возможностей, которые будет либо невозможно, либо крайне трудно реализовать в наиболее распространенных на сегодняшний день браузерах. Многие из нас так же видели двусмысленность и недостатки в описаниях некоторых деталей, что могло сделать их совместимость недостижимой.

В итоге, мы скорее всего так никогда и не увидим имплементацию XHTML2 в основных браузерах. W3C принял решение продолжить работу над спецификацией XHTML2 в рамках отдельной группы, но смысл этого шага остался понятен тогда очень немногим. Для разъяснения ситуации была опубликована статья «Architectural vision for HTML/XHTML2/Forms Chartering».

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

[Q] Что такое WHATWG и какова его роль? Некое подобие подпольной группы сопротивления, состоящей из злобных гиков?

[A] В 2004 году Apple, Mozilla и Opera обеспокоились пренебрежительным отношением W3C к стандарту HTML, а заодно и к нуждам разработчиков. Эти компании противостояли инициативе W3C полностью перейти на XML и оставить HTML в прошлом.

На сегодняшний день, WHATWG — растущее сообщество производителей браузеров, веб-разработчиков и других людей, заинтересованных в создании нового поколения HTML и сопутствующих технологий, целенаправленно ориентированных на разработку и внедрение приложений для WWW.

Если бы не было WHATWG, мы до сих пор оставались бы в прошлом 10-летней давности. Прямым результатом их деятельности является открытие в W3C специальной группы для продолжения работы над HTML5. В отличии от иных рабочих групп W3C, она открыта для всех желающих принять участие. На момент написания этих строк, на рассылку WHATWG подписаны более 700 человек, и еще 300 учувствуют в W3C HTML WG. Среди них есть представители четырех главных разработчиков браузеров — Mozilla, Opera, Safari и IE, а так же множество веб-программистов, дизайнеров и других заинтересованных лиц.

Такие дела. Не могу сказать, что подписываюсь под высказываниями LH, т.к. смысл в переходе от HTML к XHTML все же есть (и смысл немалый), но констатация ряда фактов в этом интервью наводит на некоторые размышления.

В любом случае, каких-то революционных изменений не произойдет. HTML5 — это скорее смена направления развития. На wiki WHATWG сказано, что стандарт выйдет (внимание!) не ранее 2022 года (: А если учесть, что в оценке сроков разработчики обычно выдают слишком оптимистичные значения, так и вовсе можно расслабиться. Такие сроки делают цель проекта призрачной и аморфной. За это время слишком многое может измениться, и не исключено, что появится какой-нибудь XHTML3 с исправленными недочетами второй версии. Посмотрим.

Ссылки по теме:

• Ten questions for Lachlan Hunt @ WSG
• WHATWG community
• HTML 5 Working Draft
• Architectural vision for HTML/XHTML2/Forms Chartering @ W3C
• W3C Relaunches HTML Activity
• An HTML5-style «Google Suggest» — интересная статья на dev.opera.com, в которой приводится пример использования динамических элементов интерфейса из HTML5.