TGViewer
<divelopers> <divelopers> @alexnozer_dev · 1.18K subscribers
Post #317 831
Новый элемент <amount>

В прошлый понедельник я писал про элементы <time> и <data>, основная суть которых — связать человекочитаемый контент в произвольной форме с машиночитаемым эквивалентом в строгой форме. У этих элементов есть ограничения.

<time> предназначен для разметки даты, времени и длительности и не может использоваться для других данных. <data> не привязан к типу данных, но в атрибуте value может быть записано только значение без единиц измерения.

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


В Mozilla предлагают добавить новый элемент <amount> для разметки различных количественных значений в удобном для чтения представлении с учётом локализации. Дополнительно можно будет аннотировать данные.

Предлагается 3 атрибута:

- value — машиночитаемое значение, если контент не представлен в виде числового значения;
- unit — единица измерения в системе СИ, если значение представляет физическую величину;
- currency — код валюты по стандарту ISO 4217, если значение представляет цену.

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

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

<!-- 42.2 валидное число -->
<amount>42.2</amount>

<!--
42,2 невалидное число из-за запятой
вместо точки, как принято в немецком языке
Атрибут value содержит валидное значение
-->
<amount value="42.2" lang="de">42,2</amount>

<!-- km валидная единица измерения в СИ -->
<amount>42.2km</amount>

<!--
Из-за запятой значение не валидно
Атрибут value содержит валидное число
Атрибут unit содержит валидную единицу измерения
-->
<amount value="42.2" unit="km" lang="de">
42,2km
</amount>

<!--
Цена отформатирована в удобном виде с $ и запятой
Атрибут currency содержит международный код валюты
Атрибут value содержит валидное числовое значение
-->
<amount currency="USD" value="64000">
$64,000
</amount>


Автор ссылается на проведённое в 2000-х годах исследование о форматах измерений физических величин от сообщества микроформатов. Оно привело к предложению формата hmeasure, которое в 2010-х годах преобразовано в h-measure.

На сайте The Web We Want, где разработчики могут оставлять свои пожелания новых функций, а другие могут голосовать за них, есть соответствующее пожелание и связанная дискуссия в github-репозитории.

Браузеры смогут использовать мета-данные элемента <amount>, чтобы предложить пользователям отображение значения в формате, принятом в том или ином языке и привычном для пользователя. Это включает разделители целых и дробных частей чисел.

Также затрагивается тема доступности <time> и <data>, которые не оказывают эффекта на вспомогательные технологии, о чём я тоже упоминал. По всей видимости, <amount> должен лучше интегрироваться с вспомогательными технологиями.

В целом предложение логичное и полезное. В eCommerce, где много цен c валютами, размерных сеток, габаритов, объёмов и разных количественных значений, элемент <amount> был бы крайне полезен.

#html
  • 👍 13
  • ❤ 3
  • 🎉 3
  • 🌚 3
More from @alexnozer_dev
  1. Sep 21, 2026Реализация пользовательских атрибутов Под конец прошлого года я рассказывал об API пользов…
  2. Sep 14, 2026Подклассы Event вместо CustomEvent Многие библиотеки предоставляют систему событий в качес…
  3. Sep 11, 2026Эволюция стилей в темах Shopify Адам Ватан на днях поделился новостью, что Shopify выкупил…
  4. Sep 9, 2026Persistent Widgets Многие сайты не должны быть SPA. Но иногда эта архитектура продиктована…
  5. Sep 7, 2026Processing Instructions и маркеры В DOM всё представлено в виде узлов (Node) разных типов.…
  6. Sep 1, 2026@scope и потоковая передача HTML Ноам Розенталь поделился интересной техникой, в которой с…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →