Спасибо! Интересное поведение, да, цвета меняются. Но вот если в самом SVG атрибут fill у path прописан то его не получается переопределить через css в случае если SVG вставлено через спрайт, то есть картинку надо ещё немного подготовить после экспорта из фигмы например, стереть все fill из SVG.
При этом если вставлять inline - то не важно что внутри картинки задан атрибут fill , css его переопределяет
Какое невежство таких вещей не знать, но все работает отлично. Попробуйте стиль в CSS применить svg-icon svg { fill: ff00ff; } и лично убедиться
Попробовал и лично убедился что не работает - потому что спрайт - потому что там тег use в котором уже shadow dom(к которому доступа нет из css ) и только потом целевая svg
там есть и другие методы вставки картинок можете изучить
я так понимаю в случае с inline браузер сам что-то оптимизирует лучше спрайта , тут вот честно хз как это работает в деталях , сам удивился когда узнал
Ну а что у меня должно было прям накопиться? Я как многие программисты работаю на работе - код в репозиториях компании, чаще всего это закрытые коммерческие решения.
github не пустой пару либ выкладывал, чаще концепты. Прям специально для opensource я ничего не делаю и не считаю что должен. Вот впервые долгое время решил мнение свое подбронее написать в ответ на понравившуюся статью - вон сколько хейта словил )
Я просто не тщеславный чтобы в блоги писать звездочки собирать и из-за кармы с рейтингом париться. Если я вам сейчас ссылки на проекты покидаю - ну тоже скажете что это мои фантазии) Да и большинство проектов мы делаем командой - так что будет нечестно просто сказать - вот я сделал - а расписывать что именно я там делал это ну прям долго.
В интернете мы в основном наблюдаем "крикливое меньшинство" а есть еще "молчаливое большинство" которое молча читает делает выводы и уходит не оставляя следов и часто среди них есть люди которые лучше разбираются в вопросе - но не считают нужным что-то комментировать / вносить свой вклад или выкладывать код.
И еще раз - это не я придумал и навязываю тут вам "новый стандарт" - весь этот пост вообще является ответом / дополнением к другой статье где на автора тоже что-то некоторые накинулись не вникнув в суть.
Я просил вас перестать разговаривать в назидательном тоне, так будто вы имеете какое-то представление о моих знаниях, а наезжать вот так не по делу как вы видите, я, да и на самом деле кто угодно можем не хуже. и так же можем обвинить вас во лжи и фальсификации - хоть что блог не ваш сказать и все там списано, да что угодно так же как вы насочинять. Или вы специально меня до гнева доводили чтобы увидеть "истинное лицо"? Ну люди зляться если их злить я еще очень мягко вам отвечаю.
Вы просто хамло, софт-скилс уровня какого-то быдла из подольска без высшего образования и воспитания. Лезете тут в треды и самоутверждаетесь путем наезда вообще не по теме, уверен и на галере своей так же отрываетесь на коллегах. Показатели лайтхаус у тебя? Звездочки? Что еще монеток в hamster combat больше? Все регалии собрал?
статья в закладках у 15 человек это тоже вы благородно постарались ? Позаботьтесь лучше о своем рейтинге и карме если считаете это чем-то важным. Рейтинг статьи скачет - тема спорная , если бы не было согласных плюсующих - ушла бы в минус еще вчера.
тем не менее не вам мне говорить учить фреймворки которые я знаю с первых лет их появления. Вы как по комментариям вообще определяете уровень знания феймворков? Я вот перешел в ваш профиль чтобы понять с кем это я таким важным говорю вообще, потому что учитывая уровень пафоcа подумал может в соавторстве с вами Чистый код писали или вы там сын мэра. И при чем здесь принятие критики - на критику по пунктам я ответил и местами согласен - вы нападаете на мою компетентность почти в каждом комментарии. Вы с первого своего сообщения переврали текст статьи и начали писать что мне нужно изучить фреймворки. Подгорело у вас потому что сами пишете про веб-компоненты - а тут что-то похожее но наоборот и не про веб-компоненты.
"реакт макака" ... - у меня испанский стыд... то я его не знал и надо было подучить - теперь поклонник фейсбук технологий
Кем вы там руководите последние 7 лет? Ребят - не работайте с этим зазнавшимся пиздюком.
Послушайте мистер php разраб, вы не оборзели? Я же просил вас вот в этом комментарии перестать говорить свысока типа я какой-то стажер, а вы умудренный опытом сеньер-помидор. Вы зачем говорите про "отсутствие навыков с веб фреймворками " и что мне нужно подтягиваться до какого-то уровня? Вы верстку своего сайта https://manytomany.ru/ до современного уровня подтяните.
Вот мое резюме - https://career.habr.com/a-l-e-x-s-t-e-p я работал в том числе в известных "проверенных" так сказать, компаниях в том числе делал фронт приложений которыми пользуются и сейчас сотни людей, когда-то работал лидом и руководил такими вот сайто-делами. Писал на angular, vue, react , но сейчас больше react . Но нет, наверно во всех компаниях подряд на всех собеседованиях все эти годы люди ошибались я то оказывается и фреймворки их знать не знаю и верстать не умею )
Зачем вы упорно тыкаете в мою вымышленную вами некомпетентность и незнание современного стека разработки под веб?
Вы отходите от стандарта т.к. все теги регламентированы по своей семантике и существуют соглашения о именовании тегов
Если использовать имена тегов без черточек - да. Это уход от стандарта, но - можно именовать теги как my-tag в таком случае стандарт соблюден
+ из-за нарушения стандарта в случае с именованием тегов - не наступает никаких последствий - то есть да правило нарушено - но ничего плохого из-за этого не происходит.
Вы упираетесь в сугубо личное понятие лаконичности и читаемости в место того, чтобы соответствовать стандартам. Люди знающие стандарты HTML будут все равно с трудом читать вашу разметку и без ваших пояснений никак не обойтись
Нормально люди будут читать такие теги, будут видеть говорящее имя. Да любое восприятие личное, нет же какого-то общественного восприятия? Это какая-то философия а не аргумент.
У вас будут проблемы с SEO
Не будет проблем с SEO. Еще раз - мы продолжаем использовать теги h1-h6, strong, article, form и так далее - а отказываемся только от div - который не несет в сеюе никакой семантики.
И я как раз и призываю вкладывать смысл в названия тегов, английскими словами. Опять же размечать списки с помощью <li> параграфы <p> а меню выносить в <nav> То есть моя верстка - семантичная , а div class - не семантично
У вас будут проблемы со скринридером
У всех будут проблемы со скринридером кто не оптимизировал свой сайт под него, особенно если это electron приложение с доской задач а-ля trello
Вы не экономите количество символов т.к. для каждого элемента вновь приходится писать вам display:block
Да нет цели эконоить символы я прошу вместо </div> писать </person> это конечно больше символов - чтобы явно видеть какие теги закрываются и да оучше писать в css свойство display чтобы по css коду явно было видно как этот элемент отображается. Я за наглядность, а не за экономию символов.
В итоге больше бойлерплейта пишите т.к. люди использующие классы в CSS переиспользуют куски стилей. Взгляните как пример на tailwind
Бойлерплейта в итоге не больше. Я же не говорю отказываться от css классов, так же их можно переиспользовать. Но если оформление какого-то блока индивидуально - то его можно записать в сили тега а не в класс который иначе бы использовался в проекте только один раз
Вы можете напороться на то, что выйдет новый HTML6 тег, а он у вас уже в проекте под другим соусом и все сломается
Если использовать теги с черточками то нет.
Шанс что повится тег с таким же вот прям именем очень низкий.
То есть чисто теоретически - могу, а могу и не напороться. Мы недавно все напоролись на то что докер образы перестали пулиться - фигня случается, адаптируемся.
Что случится если появится новый тег? Браузер для него свои стили допишет? Обычно я использую некое подобие reset.css , но может, действительно может где-то чутка поеет верстка - поправить дело 5 минут. В вебе постоянно что-то обновляется и меняется, потому мы и занимаемся поддержкой.
Но все эе вы понимаете насколько низкий шанс такого случая?
Ваш подход допускает использование deprecated тегов которые выходят из обихода
Допускает - но это на совести разработчика - не надо именовать свои теги названиями существующих пусть и в прошлом тегов, хоть на работе сайта это никак и не отразится.
Вы игнорируете доступные форматы микроразметки типа open graph мечтая о том, что когда-нибудь примут ваши теги (к счастью никогда не примут)
Я их не игнорирую - они просто за рамками этой статьи и никак не связаны с именованием тегов. Opengraph остается opengraph'ом и так же пишется, микроразметка - так же добавляется. Я не мечтаю и это не мои теги ... даже не знаю что на это сказать сказать... я же не новый стандарт вам втюхиваю - это ваши теги - ваши названия тегов которые вы придумаете сами так же как придумываете названия переменным.
Игнорируете факт, что современные веб-фреймворки уже позволяют писать в таком стиле, о каком вы пишите, компилируя все в итоге в православный div элемент и позволяя избежать проблем из всех пунктов выше.
Вот именно что фреймворки - синтаксический сахар и в нем все равно внутри "православный" div. Блин ощущение что я с верующим спорю о боге ))) нет проблем в пунктах выше - нечего избегать.
Поддержка устройств у вас получится на выходе тоже ограниченная.
Тому нет доказательств. Я проверял, на телевизорах, смарт-часах, разумеется телефонах, старых iphone 4,5 , дополнительно на сайте browserstack смотрел с разных устройств.
Могу сказать что это не работает в IE6. ну и в терминальных браузерах типа links , вот эти теги всегда отображаются как строчные элементы.
Текстовый контент в RSS лентах будет некорректно оформлен при применении кастомной разметки
Я не понял что вы имеете ввиду... RSS это отдельный XML формат , для генерации rss пишут отдельные скрипты которые берут контент из БД и отдают xml
Ну не нужно размечать текст ВЕЗДЕ своими тегами. Но опять же если текстовый контент в RSS ленте разметить через дивы с классами - тоже ерунда получится.
Ну и в целом я предлагаю повысить читаемость кода именно веб-приложений, онлайн игр, приложений кинотеатра для смарт-тв(они тоже на html написаны), калькуляторов всяких, интерактивных карт, почтовых клиентов, crm, админок, ПРИЛОЖЕНИЙ - которые чтобы увидеть надо пароль ввести - которые не индексируются, в которых нет контента для запуска screen reader, приложений которые пишется под свою webview / electron / cordova , таких как slack , как веб-версия телеграм или whatsapp , а не чисто контентных/новостных сайтов где самое главное не просесть в поисковике и добится максимально быстрой индексации и ранжирования.
Третий аргумент — утилитарные классы и микроформаты. Даже если заменить <div class="card"> на <app-card>, может возникнуть желание использовать микроформаты на основе классов. Или размечать классами-модификаторами разные варианты карточек. Или использовать утилитарные классы для текста. Во всех случаях добавляется один или несколько классов. Получаем <app-card class="text-italic color-secondary">. Вернулся к атрибуту class. Сильно ли это отличается по объёму от <div class="card text-italic color-secondary"> и стоит ли оно того?
Дело в объеме кода как такового, а в объеме бессмысленного ничего не говорящего бойлерплейт кода. И даже если в общем символов больше - то типовых, ничего не значащих символов всё равно меньше.
Если мы захотим использовать микроразметку или добавлять классы своим тегам - мы да так и напишем <app-card class="text-italic color-secondary"> но в коде ниже у нас будет говорящий закрывающий тег </app-card> а не безликий </div>
И есть логическое разделение сущностей , согласитесь что css класс .card это вот что-то совсем не то же самое по своему назначению, что .color-secondary , а в случае использования div мы ставим их на один уровень. Когда тже мы используем app-card - мы в своем коде разделяем эти понятия, что вот есть карточка и у нее есть свои или внешние доп классы
По поводу Reader Mode - пожалуйста уточните вы имеете ввиду режим чтения когда браузер меняет внешний вид страницы? или режим озвучивания для слабовидящих?
Если вы про вытаскивание текста из страницы - то это и сейчас не работает даже если использовать div Попробуйте открыть в таком режиме интерфейс почты или календаря или вот вам пример из safari для новой главной страницы яндекса
Hidden text
Для корректной работы таких читалок сайт в большинстве случаев нужно специально адаптировать и название используемых тегов там не играют роли. Все равно нужно написать стили для печатной версии @media print {} а в них так же можно задать стили кастомным тегам как и классам. + остаются веб-приложения где такой режим как-бы не нужен - в доске trello например или в интерфейсе github как вы считаете reader mode имеет смысл ?
Если же вы говорите о программах которые озвучивают текст - то что для div что для my-tag-name - нужно писать aria атрибуты тут тоже нет разницы
Зачёт! ))) да $mol я не знаю, как и svelte например и ember и еще кучу других, а про некоторые js-фреймворки наверно даже не знаю что они существуют )
Спасибо! Интересное поведение, да, цвета меняются. Но вот если в самом SVG атрибут fill у path прописан то его не получается переопределить через css в случае если SVG вставлено через спрайт, то есть картинку надо ещё немного подготовить после экспорта из фигмы например, стереть все fill из SVG.
При этом если вставлять inline - то не важно что внутри картинки задан атрибут fill , css его переопределяет
нужна была рабочая версия ) в общем я уже поправил и проверил
https://replit.com/join/hkvuzlpdcd-alexstep2
Попробовал и лично убедился что не работает - потому что спрайт - потому что там тег use в котором уже shadow dom(к которому доступа нет из css ) и только потом целевая svg
поэтому нужно inline вставлять а не через спрайт
вы можете выложить рабочий код компонента куда-нибудь типа codepen?
он так просто не пашет ... вот это else кажется лишнее - https://github.com/webislife/svg-icon/blob/main/svg-icon.ts#L65
без спрайта достаточно будет только тега веб-компонента - и не вставлять этот div еще отдельный
В статье ссылка на страничку с тестом https://svg-icon-stress-test.netlify.app/
там есть и другие методы вставки картинок можете изучить
я так понимаю в случае с inline браузер сам что-то оптимизирует лучше спрайта , тут вот честно хз как это работает в деталях , сам удивился когда узнал
А вообще вам бы пойти поучить современные фреймворки, а не заниматься велосипедостроением, там эта проблема давно решена :D
Смотрите, как бы это парадоксально не казалось на первый взгляд, но inline вставка svg работает шустрее чем использование спрайтов - https://cloudfour.com/thinks/svg-icon-stress-test/
Еще к минусам svg-спрайтов можно отнести, то что через css не получается цвета svg менять
Так что можно добавить атрибут который указывает использовать спрайт или вставлять inline
побежали с другом карму восстанавливать? ))) коллеционер звездочек блин
Ну а что у меня должно было прям накопиться? Я как многие программисты работаю на работе - код в репозиториях компании, чаще всего это закрытые коммерческие решения.
Ну есть свой пет-проект https://vkontakte.store какие-то деньги приносит
github не пустой пару либ выкладывал, чаще концепты. Прям специально для opensource я ничего не делаю и не считаю что должен. Вот впервые долгое время решил мнение свое подбронее написать в ответ на понравившуюся статью - вон сколько хейта словил )
Я просто не тщеславный чтобы в блоги писать звездочки собирать и из-за кармы с рейтингом париться.
Если я вам сейчас ссылки на проекты покидаю - ну тоже скажете что это мои фантазии) Да и большинство проектов мы делаем командой - так что будет нечестно просто сказать - вот я сделал - а расписывать что именно я там делал это ну прям долго.
В интернете мы в основном наблюдаем "крикливое меньшинство" а есть еще "молчаливое большинство" которое молча читает делает выводы и уходит не оставляя следов и часто среди них есть люди которые лучше разбираются в вопросе - но не считают нужным что-то комментировать / вносить свой вклад или выкладывать код.
И еще раз - это не я придумал и навязываю тут вам "новый стандарт" - весь этот пост вообще является ответом / дополнением к другой статье где на автора тоже что-то некоторые накинулись не вникнув в суть.
Я просил вас перестать разговаривать в назидательном тоне, так будто вы имеете какое-то представление о моих знаниях, а наезжать вот так не по делу как вы видите, я, да и на самом деле кто угодно можем не хуже. и так же можем обвинить вас во лжи и фальсификации - хоть что блог не ваш сказать и все там списано, да что угодно так же как вы насочинять. Или вы специально меня до гнева доводили чтобы увидеть "истинное лицо"? Ну люди зляться если их злить я еще очень мягко вам отвечаю.
Все технические аргументы и ответы на критику в этом комментарии - https://habr.com/ru/articles/819465/#comment_26903223
Вы просто хамло, софт-скилс уровня какого-то быдла из подольска без высшего образования и воспитания. Лезете тут в треды и самоутверждаетесь путем наезда вообще не по теме, уверен и на галере своей так же отрываетесь на коллегах. Показатели лайтхаус у тебя? Звездочки? Что еще монеток в hamster combat больше? Все регалии собрал?
Интересный подход, для новостных сайтов может не лучший выбор, а вот для приложений самое то! Спасибо!
статья в закладках у 15 человек это тоже вы благородно постарались ? Позаботьтесь лучше о своем рейтинге и карме если считаете это чем-то важным.
Рейтинг статьи скачет - тема спорная , если бы не было согласных плюсующих - ушла бы в минус еще вчера.
тем не менее не вам мне говорить учить фреймворки которые я знаю с первых лет их появления. Вы как по комментариям вообще определяете уровень знания феймворков? Я вот перешел в ваш профиль чтобы понять с кем это я таким важным говорю вообще, потому что учитывая уровень пафоcа подумал может в соавторстве с вами Чистый код писали или вы там сын мэра.
И при чем здесь принятие критики - на критику по пунктам я ответил и местами согласен - вы нападаете на мою компетентность почти в каждом комментарии. Вы с первого своего сообщения переврали текст статьи и начали писать что мне нужно изучить фреймворки. Подгорело у вас потому что сами пишете про веб-компоненты - а тут что-то похожее но наоборот и не про веб-компоненты.
"реакт макака" ... - у меня испанский стыд...
то я его не знал и надо было подучить - теперь поклонник фейсбук технологий
Кем вы там руководите последние 7 лет? Ребят - не работайте с этим зазнавшимся пиздюком.
Послушайте мистер php разраб, вы не оборзели? Я же просил вас вот в этом комментарии перестать говорить свысока типа я какой-то стажер, а вы умудренный опытом сеньер-помидор.
Вы зачем говорите про "отсутствие навыков с веб фреймворками " и что мне нужно подтягиваться до какого-то уровня?
Вы верстку своего сайта https://manytomany.ru/ до современного уровня подтяните.
Вот мое резюме - https://career.habr.com/a-l-e-x-s-t-e-p я работал в том числе в известных "проверенных" так сказать, компаниях в том числе делал фронт приложений которыми пользуются и сейчас сотни людей, когда-то работал лидом и руководил такими вот сайто-делами. Писал на angular, vue, react , но сейчас больше react . Но нет, наверно во всех компаниях подряд на всех собеседованиях все эти годы люди ошибались я то оказывается и фреймворки их знать не знаю и верстать не умею )
Зачем вы упорно тыкаете в мою вымышленную вами некомпетентность и незнание современного стека разработки под веб?
Если использовать имена тегов без черточек - да. Это уход от стандарта, но - можно именовать теги как
my-tagв таком случае стандарт соблюден+ из-за нарушения стандарта в случае с именованием тегов - не наступает никаких последствий - то есть да правило нарушено - но ничего плохого из-за этого не происходит.
Нормально люди будут читать такие теги, будут видеть говорящее имя. Да любое восприятие личное, нет же какого-то общественного восприятия? Это какая-то философия а не аргумент.
Не будет проблем с SEO. Еще раз - мы продолжаем использовать теги h1-h6, strong, article, form и так далее - а отказываемся только от div - который не несет в сеюе никакой семантики.
Семантика - https://ru.wikipedia.org/wiki/Семантика - это буквально смысл.
И я как раз и призываю вкладывать смысл в названия тегов, английскими словами. Опять же размечать списки с помощью <li> параграфы <p> а меню выносить в <nav>
То есть моя верстка - семантичная , а div class - не семантично
У всех будут проблемы со скринридером кто не оптимизировал свой сайт под него, особенно если это electron приложение с доской задач а-ля trello
Да нет цели эконоить символы я прошу вместо </div> писать </person> это конечно больше символов - чтобы явно видеть какие теги закрываются и да оучше писать в css свойство display чтобы по css коду явно было видно как этот элемент отображается. Я за наглядность, а не за экономию символов.
Бойлерплейта в итоге не больше. Я же не говорю отказываться от css классов, так же их можно переиспользовать. Но если оформление какого-то блока индивидуально - то его можно записать в сили тега а не в класс который иначе бы использовался в проекте только один раз
В ответе на другой комментарий я разобрал этот вопрос - не не хуже а так же или лучше.
Да и блин, вы серьезно будете парится из-за пары килобайт разницы в сжатии на всю html страницу?
Результаты сжатия gzip
Вот папка с примерами файлов и сжатыми их версиями
Если использовать теги с черточками то нет.
Шанс что повится тег с таким же вот прям именем очень низкий.
То есть чисто теоретически - могу, а могу и не напороться. Мы недавно все напоролись на то что докер образы перестали пулиться - фигня случается, адаптируемся.
Что случится если появится новый тег? Браузер для него свои стили допишет? Обычно я использую некое подобие reset.css , но может, действительно может где-то чутка поеет верстка - поправить дело 5 минут. В вебе постоянно что-то обновляется и меняется, потому мы и занимаемся поддержкой.
Но все эе вы понимаете насколько низкий шанс такого случая?
Допускает - но это на совести разработчика - не надо именовать свои теги названиями существующих пусть и в прошлом тегов, хоть на работе сайта это никак и не отразится.
Я их не игнорирую - они просто за рамками этой статьи и никак не связаны с именованием тегов. Opengraph остается opengraph'ом и так же пишется, микроразметка - так же добавляется.
Я не мечтаю и это не мои теги ... даже не знаю что на это сказать сказать... я же не новый стандарт вам втюхиваю - это ваши теги - ваши названия тегов которые вы придумаете сами так же как придумываете названия переменным.
Вот именно что фреймворки - синтаксический сахар и в нем все равно внутри "православный" div. Блин ощущение что я с верующим спорю о боге ))) нет проблем в пунктах выше - нечего избегать.
Тому нет доказательств. Я проверял, на телевизорах, смарт-часах, разумеется телефонах, старых iphone 4,5 , дополнительно на сайте browserstack смотрел с разных устройств.
Могу сказать что это не работает в IE6. ну и в терминальных браузерах типа links , вот эти теги всегда отображаются как строчные элементы.
Я не понял что вы имеете ввиду... RSS это отдельный XML формат , для генерации rss пишут отдельные скрипты которые берут контент из БД и отдают xml
Ну не нужно размечать текст ВЕЗДЕ своими тегами. Но опять же если текстовый контент в RSS ленте разметить через дивы с классами - тоже ерунда получится.
Ну и в целом я предлагаю повысить читаемость кода именно веб-приложений, онлайн игр, приложений кинотеатра для смарт-тв(они тоже на html написаны), калькуляторов всяких, интерактивных карт, почтовых клиентов, crm, админок, ПРИЛОЖЕНИЙ - которые чтобы увидеть надо пароль ввести - которые не индексируются, в которых нет контента для запуска screen reader, приложений которые пишется под свою webview / electron / cordova , таких как slack , как веб-версия телеграм или whatsapp , а не чисто контентных/новостных сайтов где самое главное не просесть в поисковике и добится максимально быстрой индексации и ранжирования.
ну и про микроформаты...
Дело в объеме кода как такового, а в объеме бессмысленного ничего не говорящего бойлерплейт кода. И даже если в общем символов больше - то типовых, ничего не значащих символов всё равно меньше.
Если мы захотим использовать микроразметку или добавлять классы своим тегам - мы да так и напишем
<app-card class="text-italic color-secondary">но в коде ниже у нас будет говорящий закрывающий тег</app-card>а не безликий</div>И есть логическое разделение сущностей , согласитесь что css класс
.cardэто вот что-то совсем не то же самое по своему назначению, что.color-secondary, а в случае использования div мы ставим их на один уровень. Когда тже мы используемapp-card- мы в своем коде разделяем эти понятия, что вот есть карточка и у нее есть свои или внешние доп классыКлассы и атрибуты микроразметки продолжают работать, говорящее имя тега им не мешает , можете проверить - https://webmaster.yandex.ru/tools/microtest/
Картинка с валидацией микроразметки
По поводу Reader Mode - пожалуйста уточните вы имеете ввиду режим чтения когда браузер меняет внешний вид страницы? или режим озвучивания для слабовидящих?
Если вы про вытаскивание текста из страницы - то это и сейчас не работает даже если использовать div
Попробуйте открыть в таком режиме интерфейс почты или календаря или вот вам пример из safari для новой главной страницы яндекса
Hidden text
Для корректной работы таких читалок сайт в большинстве случаев нужно специально адаптировать и название используемых тегов там не играют роли. Все равно нужно написать стили для печатной версии
@media print {}а в них так же можно задать стили кастомным тегам как и классам.+ остаются веб-приложения где такой режим как-бы не нужен - в доске trello например или в интерфейсе github как вы считаете reader mode имеет смысл ?
Если же вы говорите о программах которые озвучивают текст - то что для div что для my-tag-name - нужно писать aria атрибуты тут тоже нет разницы