Я заметил, что во многих шаблонизаторах, в HTML5, в различных фреймворках и на простых php-сайтах, добавляется data-device-type = «edicated «на <HTML>
тег.
Почему это сделано? Есть ли какое-то поведение браузера по умолчанию, которое реагирует на этот тип устройства данных? Зачем включать это всегда? Разве это не делает сам тип данных устройства устаревшим
Вот пример из HTML5 index.html:
<!DOCTYPE html>
<html lang="en-IN" class="no-js" data-device-type="dedicated">
<head>
<title>doordie.co.in - all info 2 all </title>
Как видите, <html>
элемент будет иметь этот тип данных устройства. Может кто-нибудь объяснить, почему это делается так часто?
data-device-type
не является атрибутом HTML5. Все атрибуты с префиксом data-
определяются приложением. «Настоящее» имя атрибута тогда просто device-type
,
По-видимому data-device-type
, data-device-agent
и другие, похоже, являются соглашением, которое было недавно принято веб-разработчиками — хотя я не могу найти никакого канонического или авторитетного источника. Поиск GitHub показывает многочисленные проекты, использующие его, но ни одна из них не имеет общей библиотеки JavaScript, которая могла бы использовать этот атрибут.
Но все, кажется, используют его одинаково: некоторый код на стороне сервера установит значение на что-то вроде «board» (для таких вещей, как Raspberry Pi), «edicated »(на первый взгляд такие вещи, как Amazon Kindle),« desktop »(для рабочие столы и ноутбуки), которые позволяют JavaScript читать значение и действовать соответственно — однако я не могу найти никакой достоверной информации.
Примечание: эти варианты использования, кажется, пахнут обнаружением клиента на стороне сервера. Это плохая идея, потому что вы никогда не можете доверять клиенту (именно поэтому строки браузера User-Agent больше не имеют смысла: все они пытаются притвориться другими браузерами, чтобы побеждать плохие методы прослушивания агента пользователя на стороне сервера).
Опять же, обратите внимание, что конкретные data-
атрибуты не входят в спецификации HTML5 и поэтому не имеют никакого особого значения в отношении веб-браузера. Если вы хотите увидеть, как какое-либо конкретное приложение использует значение атрибута, я предлагаю вам выполнить поиск исходного кода device-type
и посмотрите, какой код устанавливает и читает атрибут — он может быть на стороне клиента или на стороне сервера.
Глобальный HTML данные-* атрибуты используются для хранения данных (готовых к вызову позже css или javascript).
Пример:
var zzz = document.getElementsByTagName("div")[0].getAttribute("data-color");
var yyy = document.getElementsByTagName("div")[1].getAttribute("data-color");
document.getElementsByTagName("div")[0].style.background = zzz;
document.getElementsByTagName("div")[1].style.background = yyy;
div::after {
content: attr(data-append);
font-weight:bold;
}
<div data-append=" _SUCCESS" data-color="greenyellow">A simple div</div>
<div data-append=" _FAILURE" data-color="tomato">Another simple div</div>