Давайте поговорим о том, как написать хорошее описание фотографий в атрибуте alt.

В первой части мы обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.

Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.

Просто перескажите, что находится на картинке

Есть простой совет, чтобы создать идеальное описание.

Представьте, как вы звоните другу и рассказываете, что видите на изображении. 

Но не переусердствуйте, так как лучше, если описание будет лаконичным.

Разноцветный кот ест корм и облизывается (https://unsplash.com/photos/_FlMYRBExBk)
Разноцветный кот ест корм и облизывается (https://unsplash.com/photos/_FlMYRBExBk)

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

Используйте контекст, в котором находится картинка

Одна и та же картинка может иметь разное описание в alt в зависимости от контекста. Контекст — это то, что окружает иллюстрацию, например, текст статьи, если картинка туда встроена. 

Проще говоря,

Описание зависит от того, на чём сейчас нужно сфокусировать пользователя.

Посмотрите на картинку ниже и подумайте, какое описание вы бы указали в alt.

Есть несколько правильных ответов:

CSS is awesome

Подойдет для статьи о том, как работает CSS (плохо).

Белая кружка с надписью

Если ваша статья про кружки и никак не связана с веб-разработкой. 

Бардак на столе разработчика: кружки, переплетенные провода, карточки

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

Белый стол

Если продаёте столы и считаете, что то, что находится на столе, не имеет никакой разницы. Да хоть тарелка.

Белая кружка с надписью в квадрате "CSS is awesome" стоит на белом столе. Awesome выходит за пределы квадрата. 

Этот вариант подойдет, если вы не понимаете контекста статьи, но нужно поставить какую-то картинку и что-то там написать. Так тоже можно делать.

Главная мысль в этих примерах такая, что вам нужно акцентировать внимание на том, что сейчас более важно для статьи в этом изображении. Чтобы определить «сейчас», нужно понимать, о чём написано в статье рядом с этим изображением. Если в статье рассказывается о том, какие виды кружек бывают, то нужно описать детали кружки на изображении, например "Белая кружка с надписью "CSS is Awesome"". Всё, что есть на фоне, в этом случае не важно.

Не пишите alt, если картинка не несёт смысла

Нет ничего плохого в пустом alt, если изображение не несёт дополнительного смысла. Например, как описать мою аватарку в интерфейсе сайта?

Для контекста: на аватарке нарисована голова человека, который лежит на кровати и не может уснуть от копошащихся мыслей.

<img src="avatar.jpg" width="200" height="200" alt="Николай Шабалин">

«Николай Шабалин» совсем плохой вариант, так как он полностью дублирует текст справа. Аватарка используется в шапке сайта, поэтому описывать её нет смысла.

Не описывать картинку нормально, но будьте аккуратнее и всегда помните про контекст.

<img src="avatar.jpg" width="200" height="200" alt="">

Передавайте эмоции через alt

С первого взгляда не очевидно, что любая аватарка может передавать какие-то там эмоции, но в контексте иногда есть смысл их передать. Например, если бы статья была про бессонницу, то моей аватарке можно было бы написать alt «человек с кучей мыслей прям перед сном».

Радостный человек лежит в гамаке на закате (https://unsplash.com/photos/Kc4MGyzfOTI)
Радостный человек лежит в гамаке на закате (https://unsplash.com/photos/Kc4MGyzfOTI)

Эту картинку можно описать «Радостный человек лежит в гамаке на закате». Нужно ли писать здесь, что человек радостный, хотя мы даже не видим его лица? Это не обязательно, но можно так написать, если мы продаём гамаки, хотим дополнить картинку и сказать, насколько хорошо он себя чувствует в нашем удобном гамаке, лёжа в нём на берегу океана.

Про эмоциональное описание для изображений вы можете подробнее узнать в блоге Лео́ни Уотсон

Не заигрывайте с декором ради декора

Все мы знаем, что декоративные изображения обычно используются без описания, хотя такая возможность есть. Для этого можно использовать свойства content: "" или, если вы используете изображение в content: url(), то правильно будет написать так:

content: url("path/to/image.jpg" / "Описание декоративного изображения").

Но лучше использовать этот способ пореже, так как чаще всего декоративные изображения бессмысленны. Но если по какой-то причине вам хочется передать эмоции декоративного изображения, то такая возможность есть.

Не пишите в alt названия файлов или имя фотографа

Я часто смотрю, какое описание заполняют в атрибуте alt, и удивляюсь, насколько фантазия может пойти не туда. Часть заполненный альтернативный текст полностью бесполезен, так как не передаёт смысла изображения.

Какое описание не подойдёт:

  • imgX2 или 7e0273c07fef3b598590d3fdddf7808604f0a191435c2c0c — это просто название или хэш файла с картинкой.

  • название сайта или название статьи — возможно, это проделки для SEO.

  • имя фотографа — тут всё понятно.

Все эти варианты никак не помогут в основной задаче альт-текста — понять, что было на картинке, которая не загрузилась, или при чтении страницы скринридером.

Итого — как написать хороший alt-текст

Просто понятное описание — самое хорошее решение, если оно не слишком длинное. Отсутствие описания — нормально, но должно быть к месту. Эмоциональное описание — тоже хорошо, если вписано в контекст.

А вот шесть правил коротко:

  1. Просто расскажите, что видите на картинке — чем короче, тем лучше.

  2. Используйте контекст, в котором находится картинка — то есть учитывайте, что находится вокруг неё на сайте.

  3. Не пишите alt, если картинка не несёт отдельного смысла — например, аватарка в профиле.

  4. Не стесняйтесь передавать эмоции через alt — если кто-то радуется или грустит, напишите об этом, если уместно.

  5. Не пишите alt у декоративных изображений — например, у иконок.

  6. Не пишите в alt название файла или имя фотографа — alt нужен не для этого.

Экспериментируйте, пробуйте и не бойтесь ошибиться.

Комментарии (12)


  1. ifap
    02.06.2022 11:46

    «Николай Шабалин» совсем плохой вариант, так как он полностью дублирует текст справа.

    Это плохой вариант совсем по другой причине: на картинке не Николай Шабалин, а его аватарка, именно это и стоит написать в alt, если вообще что-то писать в данном случае. Большинство приведенных Вами примеров - декоративные изображения, не несущие смысловой нагрузки или несущие минимальную (то, что Вы называете эмоциональной). Alt имеет смысл заполнять либо когда в тексте есть отсылка к картинке (тогда незрячим пользователям следует объяснить, к чему она), либо чисто для SEO (и тогда правила заполнения совсем иные). "На картинке белая чашка с надписью бла-бла-бла на белом столе" - да всем плевать: зрячий проскроллит, а незрячий будет вынужден терпеть, что ему ездят по ушам.


    1. rudinandrey
      03.06.2022 08:37

      да всем плевать: зрячий проскроллит, а незрячий будет вынужден терпеть, что ему ездят по ушам

      гуглу не плевать, потом когда кто-то что-то ищет по картинкам, гугл вполне себе хорошо использует информацию из Alt для поисковых запросов.


      1. ifap
        03.06.2022 11:34

        Если Вам на сайт нужен трафик по белым чашкам - тогда см. про SEO, в остальных случаях хозяину сайта плевать, на что не плевать Гуглу ;)


        1. demimurych
          03.06.2022 21:50

          Ваши правила заполнения alt для SEO случая лучше чем те, о которых говорит автор материала, но очень далеки от тех, которые дают максимальный профит для решения подобных задач.

          Кроме этого, корреляция написанного в alt атрибуте с тем, что реально отображено на изображении, в случае SEO предельно важна. Google распознает образы медиа контента, и производит сравнения того что он опознал с тем, что написано в alt.

          При этом, основное влияние оказывает именно то, что распознал гугл, а не то, что написано в самом alt.

          Подобное поведение как подтверждено официально Google, так и имеет прямые подтверждения простыми экспериментами.

          При этом, поведение описанное Вами, действительно имело место быть, но до 2017 года. С 2018 года, поведение посковой системы в отношении медиа контента, и его влияния на страницу радикально изменилось. И в настоящий момент это влияние значительно выше, чем влияние фразовой составляющей той же страницы.


          1. ifap
            03.06.2022 22:09

            Я не понял, с чем Вы несогласны ;) О правилах как таковых я не писал, рассматривая (весьма поверхностно) лишь частный случай. Моя мысль заключалась в том, что alt в большинстве случаев важен лишь в машинно-читаемом контексте (будь то ассистивная технология или поисковик), т.е. для помощи машине в определении того, что изображено на картинке. Исключение, например, alt у картинок в навигационном меню, на случай непрогрузки/отключения самих картинок - тогда alt важен зрячему человеку.


  1. pda0
    02.06.2022 21:50
    +2

    В web 4.0 будут писать только alt. Нейросеть в браузере будет по описанию генерировать картинку. :)


  1. demimurych
    02.06.2022 22:47
    +5

    Материал содержит информацию которая не только противоречит официальной спецификации, но и современной практике спекулирования на ее (спецификации) слабостях с целью получения преимуществ в поисковой выдаче.

    И вот почему

    Прежде всего важно понимать, что существует две отправные точки формирования текста для alt атрибута:

    1. Строго согласно спецификации

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

    По этой причине, рассказывая о alt атрибуте, очень важно всегда давать описание обоих отправных точек.

    Начнем с первой части этого материала

    Alt — обязательный атрибут тега <img>

    С точки зрения спецификации:
    Атрибут alt никогда не был и никогда не будет обязательным атрибутом. Более того, именно в комбинации с тем, установлен ли alt атрибут вообще, если установлен то является ли его значение пустым в сочетании с заданным src атрибутом - определяется семантическая суть тега img, то есть то, ради чего тег img используется:

    1. alt атрибут не установлен вообще
      ```<img src="/img/example.jpg" >```
      Семантически это означает, что значение вставленного изображение не определено. Или не могло быть определено на момент публикации изображения. Например фотографию делал слепой фотограф, который не может составить текстовое описание.
      Оно может иметь, а может и не иметь отношение к контенту на странице. Если в этой ситуации присутствует title, то поисковая машина, или любой другой алгоритм машинного анализа контента страницы, может опереться на него, но влияние такого изображения на страницу будет минимальным.

    2. alt атрибут установлен, но его значение представляет из себя пустую строку
      ```<img alt="" src="/img/example.jpg" >```
      Семантически это означает, что изображение заявленное этим тегом носит сервисный характер. То есть оно не должно оказывать никакого влияния на основной контент страницы и носит исключительно декоративный характер.

    3. alt атрибут установлен, его значение отлично от пустой строки
      ```<img alt="some text" src="/img/example.jpg" >```
      Семантически это означает, что изображение имеет прямое отношение к основному контенту страницы. Его содержимое прямо описано текстом атрибута alt.

    С точки зрения слабостей поискового алгоритма от Google:
    Google игнорирует часть спецификации, которая позволяет тегом img обозначать декоративные(не служащие раскрытию контента) изображения. По этой причине, есть только одна практическая рекомендация: только изображения, которые служат дополнению или раскрытию контента должны верстаться с использованием тега img. Во всех прочих случаях (декорации, иконки и т.д.) должны использоваться альтернативные способы интеграции медиа элементов в страницу. Например CSS свойство background или псевдо элементы before after

    Как правильно писать

    Кратко. Максимальная рекомендуемая длина — 125 символов. 

    Чётко. Нужно ответить на вопрос, что именно изображено на картинке? Какую функцию она выполняет?

    Уникально. Не повторяйте текст, который уже есть на странице.

    С точки зрения спецификации:
    alt атрибут может быть любого размера. Содержать в том числе и разметку. Должен содержать описание того, чем является сюжет или смысл изображения. Так как img это часть фразового контента, то смысл изображения определяется в том контексте в котором оно заявлено, что означает, что alt атрибут может дублировать любой другой alt атрибут.

    С точки зрения Google:
    alt атрибут может быть любого размера, но оказывать влияние на поиск будут его первые 100 символов с выравниванием по границе ближайшего к пределу в 100 символов слова и в некоторых случаях предложения. Прочие слова буквы будут проигнорированы. Для Google изображение это ровно то о чем говорит спецификация - часть фразового контента. То есть Google анализирует значение изображение строго в контексте того контента где заявлено img. Но, Google не любит наличие контента с совпадающей фразовой частью. По этой причине, общей рекомендацией является добавления вариативности фразовой составляющей изображения.

    Примеры использования

    Ссылка
    <a href="/blog"> <img src="blog.jpg" alt="Перейти на главную страницу блога"> </a>

    Диаграмма
    <img src="chart.png" alt="Диаграмма с результатами опроса о том, что мешает пользователям на удалёнке">

    Картинка с текстом
    Просто переносим текст в alt:
    <img src="courses.png" alt="HTML Academy Бесплатные онлайн-курсы...">

    Ссылка
    с точки зрения спецификации
    Если это навигационная ссылка то - alt атрибут должен содержать пустое значение alt атрибута. Так как это изображение выполняет функции изображения сервисного характера то есть не раскрывает смысл контента страницы. Ссылка обязана содержать фразовую составляющую описывающую задачу ссылки. Фразовая составляющая может быть скрыта.

    Если это ссылка в рамках раскрытия контента страницы, alt атрибут должен быть установлен в соответствии с общими правилами.

    с точки зрения поисковой машины от google
    Используется общая рекомендация - чтобы долго не разбираться в том, почему Google неправильно понял что Вы хотели ему сказать - все изображение выполняющее роль сервисного характера, должны быть интегрированы в страницу при помощи механизмов исключающих использование тега img/

    Диаграмма
    с точки зрения спецификации
    типичный контент для тега figure

    с точки зрения поисковой машины от google
    типичный контент для тега figure

    Картинка с текстом
    с точки зрения спецификации
    применяются типичные правила для составления alt атрибута

    с точки зрения поисковой машины от google
    такой медиа контент не имеет никакого значения. В лучшем случае игнорируется, в худшем случае используется для пессимизации страницы содержащей подобный контент. Google уже минимум 3 года использует алгоритмы распознавания образов на изображении при анализе его контента.

    Figure и figcaption

    Всё равно пишем нормальный alt, так как в figcaption обычно маленькое описание:

    Figure это тег с особой семантической нагрузкой контент которого это не обязательно изображения. Проще всего понять его смысл можно на основе простого мысленного эксперимента: если контент тега figure может быть перемещен в любое место основного контента, без разрушения его (основного контента) смысла - то это figure. Наиболее наглядным примером является ситуация, с той самой диаграммой, когда пишется что то вроде: что показано на диаграмме 143. При этом диаграмма становится частью figure тега, и может быть размещена например в конце документа в разделе Appendix.

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

    Когда alt-текст не нужен

    Когда картинка декоративная и не имеет смысла.
    Иконки в кнопке.

    Это совершенно верно с точки зрения спецификации. Но напоминаю что Google игнорирует подобную, абсолютно верную конструкцию и пытается анализировать контент изображения как тот, который может иметь отношение к основному. Что может быть причиной "отстреливание себе ног". Итогом чего стала общая рекомендация - если изображение не раскрывает контент, оно не должно быть интегрировано посредством тега img.

    Когда alt-текст не нужен
    Аватарка: имя пользователя и так у нас уже есть.
    Превью к статье: у нас уже есть заголовок, и этого будет достаточно.

    И абсолютно неверная рекомендация, которая нагдяным образом демонстрирует, что автор материала не понимает что такое семантика языка HTML5. Зачем и как его нужно использовать.

    А теперь как устанавливать атрибут alt правильно
    На примерах выше, я наглядно показал, что автор материала как противоречит официальной спецификации, так и не ориентируется в том, каким образом, в настоящее время Google анализирует контент страницы.

    Для людей, которые не занимаются тонкостями оптимизаций страниц под поисковые алгоритмы есть два простых правила составления alt атрибута, которые им позволят и получить трафик из поисковых систем и/или быть полезным людям с читалками:

    1. Изображения которые не имеют отношения к основному контенту, должны интегрироваться в страницу любым способом, но не при помощи тега img

    2. Изображения которые дополняют или раскрывают контент страницы - обязаны быть сверстаны тегом img (не figure) и иметь alt атрибут. В случае необходимости привлечения поискового трафика, его размер должен быть около 100 символов. Плюс минус выровнено по границе слова.

    3. Содержимое alt атрибута должно быть таким, что если Вы удалите изображение, и вместо него впишите ваш alt текст - то контент должен сохранить свою органичность. То есть оставаться осмысленным.

    Пример
    Допустим у нас есть текст:
    В Новом Завете нет описания внешнего вида Христа. Тем не менее подавляющее большинство изображений похожи друг на друга.

    И изображение которое иллюстрирует сказанное:

    Тогда правильной версткой было бы следущее

    <p>
        В Новом Завете нет описания внешнего вида Христа. Тем не менее
        подавляющее большинство изображений похожи друг на друга 
    	<img src="jc.png" 
         alt="человек средних лет, с каштановой раздвоенной бородой,
              большими глазами, слегка вьющимися волосами." />
    </p>

    Итого
    Я дал общее представления того, как правильно использовать семнатический тег img как с точки зрения современного стандарта, так и с точки зрения спекуляции на особенностях поискового алгоритма от Google.

    Как можно заметить, материал статьи, лишь в некоторых деталях коррелирует как со спецификацией, так и с практикой SEO. Что ничего кроме сожаления вызывать не может.


  1. ifap
    02.06.2022 23:03

    Атрибут alt никогда не был и никогда не будет обязательным атрибутом.

    Эмм...

    Except where otherwise specified, the alt attribute must be specified and its value must not be empty;

    Хотя ссылка на т.н. "спецификацию" т.н. Live HTML такой пруф: сегодня must, завтра левая пятка безвестного автора зачесалась в другую сторону и он стал shall.


    1. demimurych
      03.06.2022 21:41
      +1

      Вы заблуждаетесь. И вот почему:

      Стандарт в редакции WHATWG это единственный действующий стандарт от группы которая занималась его разработкой с 2007 года. Одним из основных бенифициаров которого является Google.

      Появление стандарта в редакции WHATWG связано с расколом вызванным отвратительной работой W3c.

      Спустя 8 лет после раскола, w3c признала, что стандарт ссылку на который я давал, то есть в редакции WHATWG является эталонным. Доказательством чему, являются проставленные с сайта w3c прямые ссылки на редакцию WHATWG. Фактически стандарта в редакции W3c более не существует.

      Приписка Live означает, что в стандарт могут добавляться новые возможности без заявления версии. Но это не означает что описанные ранее возможности удаляются. О чем заявлено на сайте группы WHATWG.

      Except where otherwise specified, the alt attribute must be specified and its value must not be empty;

      Я описал все три случая, когда и при каких условиях происходит Except. За исключением очевидного - отсутствия атрибута src. В этом случае, прочие атрибуты не имеют значения, так как тег img приобретает семнатической значение nothing.

      Иными словами, мои отсылки в спецификацию живого стандарта, и детали описанные мной являются в настоящий момент официальной частью единсвенной спецификации HTML5 и описывают семнатическое значение тега img с атрибутом alt так, как это должны трактовать сторонние средства анализа кода. И, как следствие, так как должны использовать это разработчики.


      1. ifap
        03.06.2022 22:02

        Давайте сперва с мухами разберемся: Вы написали, что alt - необязательный аттрибут и привели ссылку на стандарт, где написано прямо противоположное.

        Теперь с котлетами: кто злодей, а кто в белом жабо - оценочное суждение. Возможно, Вы участвовали в работе соответствующей рабочей группы и знаете ситуацию изнутри. Снаружи же ситуация выглядит так: Гугл послал многостороннюю группу на три буквы, пользуясь тем, что Хром сегодня де-факто синоним браузера и класть они хотели на чужое мнение.

        Конкретно к Live моя претензия именно в написанном Вами и заключается: вчера мы могли объявить, что перед нами не просто некий HTML, а HTML определенной версии и агенты пользователя должны это учитывать при рендеринге. Сегодня же агенты должны годать, насколько свежая версия HTML перед ними, а верстальщики - ориентироваться непойми на что, т.к. все современные браузеры поддерживают просто версию Live. Это очень запутывает обе стороны.

        И, наконец, про сегодня так, а завтра иначе. Не знаю, как принято в WHATWG, а в W3C атрибуты вполне могли пропасть в новой версии спека. Навскидку приходит пример с media в link, который давал всем сторонам однозначную возможность определить "адресата" для соответствующего ресурса, но был заменен совершенно идиотским media query.


        1. demimurych
          03.06.2022 22:22

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

          В стандарте сказано и описано набор случаев и правил как следует трактовать семантику элемента (тега) img в зависимости от двух факторов - атрибута src и атрибута alt. Среди состояния атрибута alt заявлено состояние где alt отсутcnвует.

           Снаружи же ситуация выглядит так: Гугл послал многостороннюю группу на три буквы, пользуясь тем, что Хром сегодня де-факто синоним браузера и класть они хотели на чужое мнение.

          Работал. Но это в данном случае не имеет никакого значения. w3c - умоляли, просили, "на коленях" стояли, чтобы выпустить хотя бы черновик стандарта. Потому что его отсутствие фактически тормозило развитие Веба в то время, когда появились средства для реализации вещей выходящие за рамка существующих в настоящий момент норм.

          Конкретно к Live моя претензия именно в написанном Вами и заключается: вчера мы могли объявить, что перед нами не просто некий HTML, а HTML определенной версии и агенты пользователя должны это учитывать при рендеринге

          Ваши претензии не по адресу. Потому что Live стандарт в части отображения не реугулирует сейчас отображение контента. И почти никогда не регулировал. Он занимается описанием семантики. Но даже если вынести это за скобки, то существует стандарт CSS который прямо предназначен для регулирования рендера, чем он и занимается. Где есть строгие версии.

          Впрочем лично у меня к группе занимающейся CSS претензий не меньше чем к W3c. И лично я считаю, что с ними нужно сделать тоже самое что с w3c. Да это неправильно и должно быть по другому. Но в текущей ситуации я бы выбрал из двух зол меньшее, хотябы на опыте того, что положительного произошло с html5 в подобной же ситуации.

          вчера мы могли объявить, что перед нами не просто некий HTML [...] Это очень запутывает обе стороны.

          Вы судя по всему не услышали что я сказал ранее. Все что описано нормами стандарта, не может изменится просто так. То, что единожды принято стандартом в его Live редакции, не меняется. Бывают очень редкие исключительные случаи.

          На примере того же alt - его поведение как было закреплено первой версией стандарта в 14 году, так таковым и остается. Не смотря даже на фрикции гугла в другую сторону для этой истории.

          Более того, фундаментально, html5 не меняется вовсе. О чем так же многие жалеют.

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

          w3c никого не интересует по той причине, что его стандартом в плоскости, которую мы обсуждаем, можно клопов давить. Ее фактически игнорировали именно в силу того, как работала w3c в этом направлении.

          Навскидку приходит пример с media в link, который давал всем сторонам однозначную возможность определить "адресата" для соответствующего ресурса, но был заменен совершенно идиотским media query.

          У меня нет никакой информации относительно случая о котором Вы говорите. Могу только повторить сказанное выше. Никого в индустрии, в плоскости которую затронули в статье, не интересовало мнение черновики и разработки w3c, с момента официального появления WHATWG.

          Я Вам не скажу за всю Одессу, но лично я на вскидку не могу припомнить ни одного случая, когда, что либо заявленное в стандарте в версии WHATWG было бы изменено, без серьезных на то оснований.


          1. ifap
            03.06.2022 23:03

            Среди состояния атрибута alt заявлено состояние где alt отсутcnвует.

            Ну тут мы уже начинаем спорить о значении терминов и прочей вкусовщине. ОК, не суть.

            Потому что Live стандарт в части отображения не реугулирует сейчас отображение контента.

            Позвольте, при чем тут отображение? Вот 03.06.2022 в Live стандарте появился новый тег. Через год кто-то пишет код страницы, хочет этот тег употребить и начинает штудировать caniuse.com - с какой версии какого браузера он поддерживается, да сколько процентов рынка сейчас занимают поддерживающие конкретно этот тег версии. Раньше-то как было (условно): IE 8.0 поддерживает HTML 4.0. Еще какие-то штучки-дрючки из 4.01 поддерживает, но их используем на свой страх и риск без заглядывания глубоко в мануалы. Вот на том же 8-м ишаке я сидел много лет - меня все устраивало и лишь изредка мне предлагали обновить браузер. Мне было по-барабану, кто его считает устаревшим, меня все устраивало. Переполз на лису, когда ишак окончательно сдох и теперь регулярно вижу: ваш браузер устарел, обновите, иначе ничего не покажем. Мой рекорд - разница в 10 версий с актуальной сборкой - и уже ничего не покажем. ОК, редактирую строку UA и - о чудо! - я прекрасно все вижу, ничего у меня не едет, все работает. Но какой-то дятел прикрутил какую-то неведомую финтифлюшку к своему сайту и считае, что все браузеры старше года со всем его сайтом работать не могут и не должны. В общем, раньше были milestone, а теперь ежемесячная гонка за "свежестью".

            У меня нет никакой информации относительно случая о котором Вы говорите.

            Из CSS 3 убрали то, что было в CSS 2: явная адресация к типу устройства. Например, мы могли задать в HTML такой тег:

            <link rel="stylesheet" type="text/css" href="aural.css" media="speech, aural, braille, embossed">

            и с его помощью оформить версию сайта для незрячих: скрыть весь декор и т.п. Тем же макаром мы могли явно адресовать стиль для мобильных устройств, т.е. маленький экран с тач-функциями: элементы управления побольше, дефолтный шрифт тоже. Не, это слишком просто, - решили в W3C, - давайте будет адресовать исходя из параметров устройства отображения пользователя. Но нормальный выбор параметров мы тоже делать не будем, чтоб жизнь медом не казалась. Внимание, вопрос: как отдать с помощью media query разные стили для обычного монитора и коммуникатора при том, что о них известно следующее: разрешение у них одинковое, ориентация экрана - тоже, физический размер нам задать нельзя, а наличие тача не говорит о том, что перед нами обязательно мобильное устройство.