5 устаревших фишек в HTML5
28-го октября 2014 года HTML5 официально стал рекомендацией W3C. Это конечно, не новая тема, и многие разработчики знают об особенностях HTML5: семантике, доступности, всевозможных API, и так далее.
Тем не менее, в процессе эволюции стандарта, были добавлены некоторые элементы, атрибуты и API-интерфейсы, а затем изменены или вовсе устранены. Именно поэтому в нашей области так трудно идти в ногу со всеми новостями и обновлениями. Многие из Вас, возможно, не успели уследить за тем какие фишки HTML5 были признаны устаревшими или удалены. В этой статье мы рассмотрим основную пятёрку.
Устаревший и Нежелательный
Прежде чем мы углубимся в особенности, которые будут охвачены в этой статье, я хочу быть уверен, что Вы знаете разницу между терминами нежелательным (deprecated), с которым большинство из вас могут быть знакомы, иустаревшим.
Спецификация HTML 4.01 определяет нежелательные элементы (deprecated), как то, что Вы не должны использовать, но что до сих пор поддерживается браузерами. В свою очередь, устаревшие элементы - это то, что занесено в список только в исторических целях и не поддерживается браузерами.
Спецификация HTML5 даёт новое определение. Термин нежелательный (deprecated) уже не используется, а у терминаустаревший (obsolete) новый смысл. В частности, термин, устаревший, можно применить к элементам или атрибутам, в следствии использования которых возникают предупреждения. Хотя данные элементы не рекомендуемы, вполне возможно, что браузеры будут их поддерживать в течение длительного времени, в соответствии с принципом обратной совместимости. Примерами устаревших особенностей являются атрибут border
элемента img
и атрибут name
элемента a
.
Ещё один пример разницы этих терминов в HTML 4.01 и HTML5: элемент font
является нежелательным в HTML 4.01, и устарел в HTML5.
Учитывая это, давайте обсудим основную пятёрку устаревших элементов.
1. Элемент hgroup
Спецификация определяет hgroup
, как элемент, используемый для группировки набора из одного или нескольких элементов h1
-h6
, например, названий разделов и сопутствующих подзаголовков.
Этот элемент был создан, чтобы предоставить лёгкую возможность создания подзаголовков, и для решения важной проблемы алгоритма схемы документа. Фактически, при группировке многократных элементов заголовка в hgroup
, алгоритм построения структуры, скроет все уровни заголовков, кроме наивысшего.
Я был поклонником этого элемента, с тех пор, как о нём узнал, но, к сожалению, в апреле 2013 г. он был удален из спецификации консорциума W3C.
Пример его использования приведен ниже:
<article> <hgroup> <h1>5 deprecated features of HTML5</h1> <h2>Sometimes specifications are changed and you need to refactor your code</h2> </hgroup> <p>In this article we'll discuss...</p> </article>
Сегодня, если Вы хотите добавить подзаголовки на своих страницах HTML, Вы можете использовать фрагмент подобный этому, как рекомендуется в спецификации:
<article> <h1> 5 deprecated features of HTML5 <span>Sometimes specifications are changed and you need to refactor your code</span> </h1> <p>In this article we'll discuss...</p> </article>
Другие возможные варианты можно найти в спецификации HTML5.1.
Теперь, с учетом выше-сказанного, хоть это и странно, но WHATWG версия спецификации по-прежнему включаетhgroup
.
2. Атрибут pubdate
В первых набросках спецификации элементу time
добавили атрибут pubdate
. Он должен был содержать логическое значение, указывающее, что данная дата была датой публикации родительского элемента article
или, в случае отсутствия элемента article
, всего документа.
Пример использования показан ниже:
<article> <h1>The title of my article</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc laoreet luctus rhoncus.</p> <footer> <p>Published on <time datetime="2014-10-25" pubdate>October the 25th, 2014</time></p> </footer> </article>
В этом случае, 25 октября 2014 будет датой публикации контента внутри элемента article
.
К сожалению, pubdate
был удален из спецификации. Тем не менее, Вы можете по-прежнему указать данную информацию с помощью схемы BlogPosting и его значения datePublished
, как показано в следующем примере:
<article itemscope itemType="http://schema.org/BlogPosting"> <h1 itemprop="headline">The title of my article</h1> <p itemprop="articleBody">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc laoreet luctus rhoncus.</p> <footer> <p>Published on <time datetime="2014-10-25" itemprop="datePublished">October the 25th, 2014</time></p> </footer> </article>
3. Атрибут scoped
Атрибут scoped
- это ещё один флаг, предназначен для использования в элементе style
, что позволяет указать, что CSS внутри атрибута style
ограничен в применении к содержанию внутри родительского элемента.
Его цели: добавление стилей, которые необходимы только для ограниченного набора элементов на странице, или добавление пользовательских стилей в wiki или CMS.
Scoped также предназначен, для того, чтобы сделать содержание "портативным", чтобы Вы могли взять весь фрагмент HTML из одного документа, и поместить его в новый документ (возможно с помощью JavaScript).
Пример его использования приведён ниже:
<article> <h1>The title of my article</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc laoreet luctus rhoncus.</p> <section> <style scoped> p { color: red; } </style> <h2>Another title</h2> <p>This paragraph will be red.</p> </section> </article>
В то время, поддержка scoped
была убрана из Chrome, но он, по прежнему, поддерживается в Firefox.
4. Элемент command
Элемент command
был пустым элементом, представляющий собой команду, которую пользователь может вызвать. В любом случае не стоит беспокоиться, потому что он в настоящее время устарел.
Пример его использования, взятый со страницы MDN, показан ниже:
<command type="command" label="Save" icon="icons/save.png" onclick="save()">
5. Элемент center
Вам, наверное, интересно, почему я его упоминаю, так как этот тег устарел ещё в HTML4. Элемент center
был элементом блочного уровня, который позволял горизонтально центрировать всё его содержание, включая внутренние элементы.
В HTML5, этот элемент считается устаревшим из-за его презентационной натуры.
Вывод
Таким образом, чтобы подвести итог: в случае если вы пропустили некоторые из новостей и дискуссий по стандартам HTML5, и до сих пор пользуетесь одним или более из этих элементов и атрибутов, вы уже в курсе, что они являются устаревшими.
Мы видели, как иногда элементы и атрибуты, которые казались полезными, не вызывали интерес у производителей браузеров или разработчиков. Поэтому они были удалены из спецификации.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/5-obsolete-features-html5/
Перевел: Станислав Протасевич
Урок создан: 29 Апреля 2016
Просмотров: 11094
Правила перепечатки
5 последних уроков рубрики "HTML5"
-
Расширяем возможности HTML за счёт создания собственных тегов
В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.
-
Определение доступности атрибута HTML5 с помощью JavaScript
Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.
-
HTML5: API работы с вибрацией
HTML5 - глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.
-
Создание форм с помощью Webix Framework — 4 практических примера
Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.
-
Знакомство с фрэймворком Webix
В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.