БлогNot. 12 возможностей HTML5, которые мы не используем

12 возможностей HTML5, которые мы не используем

Не используем потому, что привыкли решать задачи "по старинке", с помощью таблиц, скриптов или хитрых стилей CSS.

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

Мы не берём здесь в расчёт многочисленные теги семантической вёрстки (article, footer, header, section, nav и т.п.), графическую канву canvas и новые элементы ввода, реализуемые через атрибут type тега input (color, date, email, number, range, tel, time, url и т.п.).

Тем не менее, из очень редко используемых web-мастерами возможностей HTML5 можно бы было, наверное, составить и список гораздо длиннее... Везде сначала идёт HTML-листинг, потом результат его применения.

1. Подстановка вариантов ввода: datalist
<input type="text" list="names_id">
<datalist id="names_id">
 <option value="Вася">
 <option value="Маша">
 <option value="Петя">
</datalist>

Разумеется, эти варианты не мешают ввести что-то другое. Применимо ко всем элементам input.

Конкретно наш список в современном браузере должен регировать на "В", "М" или "П".

2. Раскрывающийся список: details и summary

Список при этом может быть многоуровневым и содержать ссылки, например:

<details>
 <summary>Разное</summary>
 <details>
  <summary>Тётеньки</summary>
   <ul>
    <li>Вера</li>
    <li>Ира</li>
    <li>Света</li>
    <li>Надя</li>
   </ul>
 </details>  
 <details>
  <summary>Ссылочки</summary>
   <ul>
    <li><a href="https://google.com" target="_blank">туда</a></li>
    <li><a href="https://yandex.ru" target="_blank">сюда</a></li>
    <li><a href="http://government.ru/" target="_blank">в никуда</a></li>
   </ul>
 </details>  
</details>

Разное
Тётеньки
  • Вера
  • Ира
  • Света
  • Надя
Ссылочки

Тег summary должен быть первым внутри details.

3. Подпись к картинке: figure и figcaption
<figure>
 <img src="http://blog.kislenko.net/pictures/9519.gif" alt="картинка">
 <figcaption>Подпись к картинке</figcaption>
</figure>

картинка
Подпись к картинке

4. Пометка текста фоновым цветом: mark

Очень просто и не нужно никаких дополнительных стилей или классов.

<mark>текст</mark>

текст

5. Измеритель диапазонов: meter
<p>Вода бывает:
<meter min="0" low="15" high="45" max="100" optimum="30" value= "10"></meter>Холодная &nbsp; 
<meter min="0" low="15" high="45" max="100" optimum="30" value= "30"></meter>Нормальная &nbsp; 
<meter min="0" low="15" high="45" max="100" optimum="30" value= "60"></meter>Горячая &nbsp; 
<meter min="0" low="15" high="45" max="100" optimum="30" value="100"></meter>Кипяток &nbsp; 
</p>

Вода бывает: Холодная   Нормальная   Горячая   Кипяток  

По идее, значения low и high разбивают диапазон от min до max на три отрезка: [min;low], [low;high], [high;max].

Тот отрезок, в который попадает точка optimum, считается зелёным, соседний с ним - жёлтым, самый дальний - красным.

Недостатки - браузеры капризничают с этим тегом, IE (если кто ещё пользуется) его не отображает, а красный получается только если значение заходит за два диапазона от оптимального, например, если optimum=10, low=20, high=30, тогда то, что больше 30 будет красным:

Тест <meter min="0" low="20" high="30" max="50" optimum="10" value="40"></meter>

Тест

6. Область вывода: output

Тег позволяет без дополнительных скриптовых тегов оформить область для вывода информации внутри тега формы.

<form oninput="res_area.value=(grad.value*Math.PI/180).toFixed(2);">
 <p>Введите угол в градусах: 
  <input type="number" name="grad" min="-360" max="360" minlength="1" maxlength="8" step="1">
 </p>
 <p>Угол в радианах = <output name="res_area">0</output></p>
</form>

Введите угол в градусах:

Угол в радианах = 0

Внутри атрибута oninput, разумеется, всё равно используется JavaScript для придания форме интерактивности.

7. Адаптивный контейнер для изображений: picture и source
<picture>
 <source media="(max-width: 460px)" srcset="http://blog.kislenko.net/pictures/12163.gif">
 <source media="(max-width: 768px)" srcset="http://blog.kislenko.net/pictures/12164.gif">
 <img src="http://blog.kislenko.net/pictures/12165.gif" alt="Цвета экрана" style="width:auto;">
</picture>

Цвета экрана

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

Внутри picture теги source должны находиться перед img.

Похоже, что варианты с max-width нужно перечислять по возрастанию ширины, а с min-width - по убыванию.

В атрибуте srcset можно применять и другие варианты медиа-запросов.

8. Индикатор прогресса: progress

Величина, показанная на индикаторе, конечно, задаётся статически, но её можно спокойно менять через JavaScript.

<p>Время: <progress id="progressBar" value="0" max="100"></progress></p>
<script>
function startTimer(id) {
 function doTimer() {
  let elem = document.getElementById(id);
  if (elem.value < 100) elem.value++;
 }
 doTimer();
 setInterval(doTimer, 1000);
}
window.addEventListener ('load', function (e) { startTimer('progressBar'); }); 
</script>

Время:

Здесь до истечения 100 секунд после загрузки индикатор прогресса должен "расти". Если уже прошло 100 секунд, обновите страницу нажатием клавиши F5 в браузере.

Увы, минимальное значение индикатора всегда 0.

9. Дополнительный текст над другим текстом: ruby и rt
<p>Абзац текста</p>
<p>Абзац с рубинчиком <ruby>x<rt>_</rt></ruby> над буквой</p>
<p>Ещё абзац текста</p>

Абзац текста

Абзац с рубинчиком x_ над буквой

Ещё абзац текста

На самом деле, это придумано для транслитерации иероглифов.

Недостаток - будет "рвать" отступы сверху и снизу.

10. Шаблон для загрузки скриптов: template

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

<template id="container">
 <p><span></span><span></span><span></span></p>
</template>
<script>
 var data = [
  { id: 1, name: 'Собака', action: 'Кусается'},
  { id: 2, name: 'Кошка', action: 'Царапается'}
 ];
 var template = document.querySelector('#container');
 for (let i = 0; i < data.length; i++) {
  let row = data[i];
  let clone = template.content.cloneNode(true);
  let cells = clone.querySelectorAll('span');
  cells[0].textContent = row.id+'. ';
  cells[1].textContent = row.name+': ';
  cells[2].textContent = row.action;
  template.parentNode.appendChild(clone);
 }
</script>

11. Метка времени: time
<p><time>1961-04-12</time> первый полёт человека в космос.</p>
<p>Или:</p>
<p><time datetime="1961-04-12">первый полёт человека в космос</time></p>

первый полёт человека в космос.

Или:

На физическое форматирование применение тега, как правило, не влияет.

12. Разрешённый разрыв слова: wbr

В отличие от нестандартного тега "непереносимого" текста nobr, который рекомендуется заменять стилями (white-space: nowrap;), тег допустимого переноса слова существует и очень прост:

<h5>превысоко<wbr>много<wbr>рассмотри<wbr>тельствующий<wbr>духовно<wbr>скрепочно<wbr>облаго<wbr>детель<wbr>ствовавший</h5>

превысокомногорассмотрительствующийдуховноскрепочнооблагодетельствовавший

Уменьшите ширину окна браузера, чтобы увидеть действие тега. Символ переноса браузеры не добавляют, но есть символ мягкого переноса &shy; вместо тега для этой цели.

Теги-неудачники в HTML5

  • aside - это тег не для размещения информации сбоку, а для выделения побочной информации в контенте;
  • audio и video - эти популярные теги на сегодняшний день далеко не универсальны. При их применении следует учесть, что не все браузеры поддерживают все популярные кодеки. Для решения этой проблемы делают несколько копий звука или видео в нескольких популярных форматах;
  • command - был задуман для отображения команды внутри тега menu. Тег никто не реализовал и в итоге его выпилили из стандартов. С самим тегом menu та же история;
  • data - тег для машинно читаемого содержимого никак не добьётся поддержки производителями браузеров;
  • dialog - то же самое.

 https://webref.ru/html - все элементы HTML5 с пометкой устаревших и новых

23.02.2020, 22:18 [1380 просмотров]


теги: html список форматы вебдезигн

К этой статье пока нет комментариев, Ваш будет первым