Ще більше семантики в HTML5: нові елементи і функції

20

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

Елемент details

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

Зазвичай такий віджет створюється з допомогою HTML і PHP. Включення нового тега в HTML5 відкидає JS і спрощує реалізацію для верстальників, що прискорює завантаження сторінки.

Ось так може виглядати в розмітці:

Some Magazines of Note

  • Bird Watcher’s Digest
  • Rower’s Weekly
  • Fishing Monthly

У прикладі вище користувач буде бачити вміст тега summary, все інше від нього приховано. По кліку на summary буде відображатися прихований контент.

Якщо всередині тега details відсутня summary, браузер сам задасть короткий опис за замовчуванням (наприклад, «Details»). Якщо необхідно, щоб прихований контент був видний за замовчуванням, можна використовувати Булев атрибут open на тезі details.

Тег summary можна використовувати тільки в якості дочірнього елемента details, і він повинен бути першим дочірнім елементом.

На момент написання статті тег details підтримується не повністю, але він постійно поліпшується. Прогалини у підтримці можна відшкодувати JS полифилами. Є версія jQuery від Mathias Bynens і версія на звичайному JavaScript від Maksim Chemerisuk.

На веб-сторінках досить часто можна зустріти впорядковані списки з допомогою тега ol. В HTML5 з’явився новий Булев атрибут reversed. Якщо його встановити, всі номери в списку інвертуються, що дозволяє задавати списки в зворотному порядку. Також в HTML5 повернули атрибут start, який вважався застарілим в HTML4. Атрибут start дозволяє задати стартовий номер у списку.

Обидва атрибути reversed і start добре підтримуються. На момент написання статті тільки IE не підтримує інвертовані впорядковані списки. Якщо потрібен полифил, можна взяти скрипт одного з авторів книги.

Стилі із заданою областю дії

В HTML5 тег style, використовуваний для прямої вставки стилів сторінку (на відміну від підключення стилів по посиланню), дозволяє використовувати Булев атрибут scoped. Розглянемо наступний приклад:

Page Title

h1 {
color: blue;
}

Article Title

Article content.

Тут присутній атрибут scoped, тому стилі всередині style застосовуватися тільки до батьківського елементу та його дочірніх елементів (якщо дозволено каскадування), а не до всього документа. Це дозволяє легко переносити певні області документа (такі як article, наприклад) разом зі стилями на інші сторінки.

Дуже корисна функція, але реалізація у всіх браузерах займе якийсь час. Зараз стилі з заданою областю дії підтримуються тільки в Firefox. Раніше такі стилі підтримувалися в Chrome, але були видалені з-за високої складності коду». На момент написання статті команда IE не будує найближчих планів на додавання цієї функції.

Атрибут async для скриптів

У тега script з’явився новий атрибут async, чий принцип дії схожий на defer. Атрибут defer змушує браузер почекати повного парсинга розмітки сторінки, після чого вже завантажується скрипт. Новий атрибут async дозволяє асинхронно завантажувати скрипт. Тобто скрипт завантажується в міру можливостей, не заважаючи інших елементів на сторінці. Обидва атрибути defer і async Булеві.

Обидва атрибута необхідно використовувати тільки, коли в тезі script прописана посилання на зовнішній файл. В старих браузерах можна використовувати обидва атрибути, щоб хоча б один з них використовувався, якщо в цьому є необхідність. На практиці обидва атрибута не уповільнюють рендеринг сторінок в браузері по мірі завантаження скриптів. Тим не менш, async найчастіше корисніше, так як він завантажує скрипт у фоновому режимі, не заважаючи іншим завдань візуалізації, а сам скрипт виконується моментально після завантаження.

Атрибут async особливо корисний, коли у завантажуваного скрипта немає інших залежностей, а також коли завантаження скрипт покращує користувальницький досвід, не чекаючи завантаження сторінки. Також варто відзначити, що якщо на сторінці багато скриптів, атрибут defer завантажує їх у початковому порядку, чого не можна гарантувати з атрибутом async.

Елемент picture

Тег picture – одне з останніх доповнень до специфікації HTML5. Він покликаний вирішити проблеми з адаптивним дизайном, зокрема з адаптивними зображеннями. Тег picture дозволяє зазначати декілька джерел зображення. Так користувачі мобільних пристроїв зможуть завантажувати зображення низької якості, а користувачі планшетів і настільних ПК більш високого.

З тегом picture в парі використовуються теги source (їх також використовують для video і audio) на додаток до нових атрибутів srcset і sizes. Ці два атрибути можна використовувати на picture, img і source.

Eric Portis з сайту A List Apart написав чудову статтю, в якій почалася бурхлива дискусія щодо способів застосування нових функцій в адаптивних зображеннях.

Інші функції

Нижче наведено список нових функцій HTML5, які ви захочете спробувати. У всіх різна ступінь підтримки у браузерах:

тег dialog, який являє собою «частина програми, з якою взаємодіє користувач для виконання завдання (наприклад, діалогове вікно, інспектор або вікно)»;

атрибут download для тега a – використовується для вказівки того, що цільовий ресурс повинен бути завантажений, а не відкритий (підходить для PDF, наприклад);

атрибути sandbox і seamless для тега iframe. sandbox дозволяє запускати зовнішню сторінку з обмеженнями, а seamless інтегрує контент з iframe набагато ближче з батьківським документом, з-за чого стилі застосовуються більш плавно;

тег menu і його дочірні елементи menuitem, з допомогою яких можна створити список інтерактивних команд. Наприклад, в меню редагування можна додати опції копіювати, вирізати і вставити, за необхідності додаючи функціонал з скриптів;

тег address, з допомогою якого можна розмічати контактну інформацію, яка застосовується до найближчого тегу article або body.

Все це нові елементи, які ми не торкнулися в цій статті лише тому, що наше місце обмежена. Перевіряйте час від часу специфікації на наявність змін або доповнень.