#фишка дня

Давайте что-нибудь наболевшее.

Вот, например, если установить атрибут translate="no" на тег, содержащий название компании, то он не подвергнется автоматическому переводу (типа Google Translate): https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate

Удобно, если ваша компания называется "Clean Beam" или ещё какая-то подобная глупость.

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

#html #attribute #translate

#фишка дня

Давайте что-нибудь наболевшее.

Вот, например, если установить атрибут translate="no" на тег, содержащий название компании, то он не подвергнется автоматическому переводу (типа Google Translate): https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate

Удобно, если ваша компания называется "Clean Beam" или ещё какая-то подобная глупость.

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

#html #attribute #translate

#фишка дня

Селекторы атрибутов штука довольно удобная если правильно их использовать. Особенно хорошо они раскрываются с aria-атрибутами вроде aria-hidden, aria-pressed и так далее.

Да даже элементарные кнопки соцсетей весьма неплохо выглядят в виде data-social=“twitter”, чтобы не замусоривать пространство классов. Или вообще a[href*=“twitter.com”], если собрались на символах экономить.

В React строить API компонента на data-атрибутах тоже выходит весьма и весьма элегантно.

Вот только есть нюанс: селекторы атрибутов — регистрозависимы. Чтобы сделать их независимыми — стоит добавить модификатор i, то есть:

[data-social=“twitter” i]

Свалидирует

<div data-social=“Twitter”>
<div data-social=“twitter”>
<div data-social=“TWITTER”>

…ну и если хотите ровно наоборот — есть модификатор s. Но оно совсем новое и для частных случаев, которые по-умолчанию и так регистронезависимы (вроде type, checked, disabled).

#attribute #css #case

#фишка дня

Как предотвратить взаимодействие пользователя с элементом?

pointer-events: none — скажете вы.

Да. Но нет. А что насчёт клавиатурного фокуса? А скринридеры? Так не пойдёт.

Благо, есть решение!

Начиная с Firefox 112 и Safari 15.5 у нас наконец-то есть поддержка атрибута inert. Что это такое?

Ну, исходя из названия inert (инертный) он ни с чем не должен взаимодействовать. Как инертные газы (как вам отсылочка, пахнуло школьной химией, да?).

То есть, если вы зададите элементу атрибут inert, то:
1. Будет предотвращена обработка события click.
2. Элемент перестанет получать фокус и...
3. ...станет недоступен для скринридеров (исключён из a11y tree).

Поддержка уже давно есть в Chrome, начиная со 102 версии, и теперь, с вводом в строй Firefox 112 — есть во всех современных движках.

Ну и, естественно, присущие атрибуту свойства можно повторить ручками, вот пример: https://codepen.io/alinaki/pen/ZEqJepB

#inert #attribute #html #a11y

#фишка дня

Селекторы атрибутов штука довольно удобная если правильно их использовать. Особенно хорошо они раскрываются с aria-атрибутами вроде aria-hidden, aria-pressed и так далее.

Да даже элементарные кнопки соцсетей весьма неплохо выглядят в виде data-social=“twitter”, чтобы не замусоривать пространство классов. Или вообще a[href*=“twitter.com”], если собрались на символах экономить.

В React строить API компонента на data-атрибутах тоже выходит весьма и весьма элегантно.

Вот только есть нюанс: селекторы атрибутов — регистрозависимы. Чтобы сделать их независимыми — стоит добавить модификатор i, то есть:

[data-social=“twitter” i]

Свалидирует

<div data-social=“Twitter”>
<div data-social=“twitter”>
<div data-social=“TWITTER”>

…ну и если хотите ровно наоборот — есть модификатор s. Но оно совсем новое и для частных случаев, которые по-умолчанию и так регистронезависимы (вроде type, checked, disabled).

#attribute #css #case #бородач

#фишка дня

Как предотвратить взаимодействие пользователя с элементом?

pointer-events: none — скажете вы.

Да. Но нет. А что насчёт клавиатурного фокуса? А скринридеры? Так не пойдёт.

Благо, есть решение!

Начиная с Firefox 112 и Safari 15.5 у нас наконец-то есть поддержка атрибута inert. Что это такое?

Ну, исходя из названия inert (инертный) он ни с чем не должен взаимодействовать. Как инертные газы (как вам отсылочка, пахнуло школьной химией, да?).

То есть, если вы зададите элементу атрибут inert, то:
1. Будет предотвращена обработка события click.
2. Элемент перестанет получать фокус и...
3. ...станет недоступен для скринридеров (исключён из a11y tree).

Поддержка уже давно есть в Chrome, начиная со 102 версии, и теперь, с вводом в строй Firefox 112 — есть во всех современных движках.

Ну и, естественно, присущие атрибуту свойства можно повторить ручками, вот пример: https://codepen.io/alinaki/pen/ZEqJepB

#inert #attribute #html #a11y #бородач

#инструмент дня

Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: https://t.me/htmlshit/2516

Пришло время узнать, какие же еще атрибуты стоит использовать и зачем.

А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/

Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?

Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.

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

#input #attribute #mobile #tool

#фишка дня

Давайте что-нибудь наболевшее.

Вот, например, если установить атрибут translate="no" на тег, содержащий название компании, то он не подвергнется автоматическому переводу (типа Google Translate): https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate

Удобно, если ваша компания называется "Clean Beam" или ещё какая-то подобная глупость.

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

#html #attribute #translate

#инструмент дня

Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: https://t.me/htmlshit/2516

Пришло время узнать, какие же еще атрибуты стоит использовать и зачем.

А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/

Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?

Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.

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

#input #attribute #mobile #tool #бородач

#инструмент дня

Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: https://t.me/htmlshit/2516

Пришло время узнать, какие же еще атрибуты стоит использовать и зачем.

А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/

Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?

Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.

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

#input #attribute #mobile #tool #бородач

#фишка дня

Селекторы атрибутов штука довольно удобная если правильно их использовать. Особенно хорошо они раскрываются с aria-атрибутами вроде aria-hidden, aria-pressed и так далее.

Да даже элементарные кнопки соцсетей весьма неплохо выглядят в виде data-social=“twitter”, чтобы не замусоривать пространство классов. Или вообще a[href*=“twitter.com”], если собрались на символах экономить.

В React строить API компонента на data-атрибутах тоже выходит весьма и весьма элегантно.

Вот только есть нюанс: селекторы атрибутов — регистрозависимы. Чтобы сделать их независимыми — стоит добавить модификатор i, то есть:

[data-social=“twitter” i]

Свалидирует

<div data-social=“Twitter”>
<div data-social=“twitter”>
<div data-social=“TWITTER”>

…ну и если хотите ровно наоборот — есть модификатор s. Но оно совсем новое и для частных случаев, которые по-умолчанию и так регистронезависимы (вроде type, checked, disabled).

#attribute #css #case #бородач