Старий спосіб вимикання елементів
Методи вимикання, що використовувались раніше, зазвичай включали наступні два підходи:
атрибут disabled
Цей метод застосовується тільки до елементів форми. Наприклад, якщо атрибут disabled встановлено на полі вводу, воно не може бути відредаговане, подія кліку не буде спрацьовувати, і дані не будуть включені при відправці форми.
Для таких елементів, як ,, і ``, атрибут disabled не застосовується.
Проте, встановлення атрибута disabled на елемент не перешкоджає взаємодії, наприклад, при наведенні курсору. Це означає, що нативні підказки, як атрибут title, або кастомні повідомлення підказок можуть бути застосовані до вимкнених елементів форми, таких як кнопки (як показано на зображенні нижче), що є досить зручним.
Натомість, елементи з pointer-events: none не можуть мати такого виду взаємодії.
pointer-events:none
pointer-events: none вимикає мишачі взаємодії, включаючи кліки, наведення курсору та інші взаємодії.
Проте, це не блокує навігацію з клавіатури. Наприклад, поле вводу нижче все одно можна доступити за допомогою клавіатури, і ви можете вводити текст.
Отже, pointer-events: none не є дійсно повним методом вимкнення.
Його перевага полягає в тому, що його можна застосувати до будь-якого елемента, що робить його особливо корисним для створення накладок, через які можна "клікати".
Тепер виникає питання: чи існує метод, який може повністю вимкнути як мишачі, так і клавіатурні взаємодії з будь-яким елементом?
Так, існує — атрибут inert, який є основною темою цієї статті.
Більш повне рішення: атрибут inert.
Слово "inert" означає неактивний, нерухомий, млявий або неживий.
Встановлення атрибута inert на елемент робить його таким, ніби він зник з сторінки. Хоча він залишається видимим (без змін у стилях), будь-яка взаємодія з ним стає неефективною.
Раніше, щоб вимкнути всі елементи в межах форми, ми використовували елемент ``, але тепер у нас є альтернатива: атрибут inert. Наприклад:
author
submit
На цьому етапі весь елемент форми, включаючи текст, не може бути натиснутий, з ним неможливо взаємодіяти чи використовувати. На відміну від атрибута disabled, атрибут inert не застосовує стилі до елемента. Тому, якщо додатковий CSS не застосовано, користувач не побачить, що форма вимкнена. У такому випадку ми можемо використати селектори атрибутів CSS, щоб націлити елемент і застосувати потрібні стилі.
form[inert] {
filter: grayscale(1) opacity(0.6);
}
На цьому етапі форма буде виглядати так, як показано на зображенні нижче:
Але це не ідеально
Хоча атрибут inert потужний для вимикання елементів, ним важко керувати, якщо користувач хоче дізнатися причину вимкнення (наприклад, підказка при наведенні), оскільки взаємодії не можуть бути спровоковані.
Крім того, визначити, чи вимкнений внутрішній елемент, не так просто, як з атрибутом disabled. Атрибут disabled має спеціальні псевдокласи :enabled та :disabled для підбору елементів, навіть якщо атрибут disabled встановлений на батьківський елемент ``. Однак перевірити, чи вимкнений елемент за допомогою атрибута inert, менш зручно.
Старий спосіб вимкнення елементів
Методи вимкнення, що використовувались раніше, зазвичай включали наступні два підходи:
атрибут disabled
Цей метод застосовується тільки до елементів форми. Наприклад, якщо атрибут disabled встановлено на полі вводу, воно не може бути відредаговане, подія кліку не буде спрацьовувати, і дані не будуть включені при відправці форми.
Для таких елементів, як ,, і ``, атрибут disabled не застосовується.
Проте, встановлення атрибута disabled на елемент не перешкоджає взаємодії, наприклад, при наведенні курсору. Це означає, що нативні підказки, як атрибут title, або кастомні повідомлення підказок можуть бути застосовані до вимкнених елементів форми, таких як кнопки (як показано на зображенні нижче), що є досить зручним.
Натомість, елементи з pointer-events: none не можуть мати такого виду взаємодії.
pointer-events:none
pointer-events: none вимикає мишачі взаємодії, включаючи кліки, наведення курсору та інші взаємодії.
Проте, це не блокує навігацію з клавіатури. Наприклад, поле вводу нижче все одно можна доступити за допомогою клавіатури, і ви можете вводити текст.
Отже, pointer-events: none не є дійсно повним методом вимкнення.
Його перевага полягає в тому, що його можна застосувати до будь-якого елемента, що робить його особливо корисним для створення накладок, через які можна "клікати".
Тепер виникає питання: чи існує метод, який може повністю вимкнути як мишачі, так і клавіатурні взаємодії з будь-яким елементом?
Так, існує — атрибут inert, який є основною темою цієї статті.
Більш повне рішення: атрибут inert.
Слово "inert" означає неактивний, нерухомий, млявий або неживий.
Встановлення атрибута inert на елемент робить його таким, ніби він зник з сторінки. Хоча він залишається видимим (без змін у стилях), будь-яка взаємодія з ним стає неефективною.
Раніше, щоб вимкнути всі елементи в межах форми, ми використовували елемент ``, але тепер у нас є альтернатива: атрибут inert. Наприклад:
author
submit
На цьому етапі весь елемент форми, включаючи текст, не може бути натиснутий, з ним неможливо взаємодіяти чи використовувати. На відміну від атрибута disabled, атрибут inert не застосовує стилі до елемента. Тому, якщо додатковий CSS не застосовано, користувач не побачить, що форма вимкнена. У такому випадку ми можемо використати селектори атрибутів CSS, щоб націлити елемент і застосувати потрібні стилі.
form[inert] {
filter: grayscale(1) opacity(0.6);
}
На цьому етапі форма буде виглядати так, як показано на зображенні нижче:
Але це не ідеально
Хоча атрибут inert потужний для вимкнення елементів, ним важко керувати, якщо користувач хоче дізнатися причину вимкнення (наприклад, підказка при наведенні), оскільки взаємодії не можуть бути спровоковані.
Крім того, визначити, чи вимкнений внутрішній елемент, не так просто, як з атрибутом disabled. Атрибут disabled має спеціальні псевдокласи :enabled та :disabled для підбору елементів, навіть якщо атрибут disabled встановлений на батьківський елемент ``. Однак перевірити, чи вимкнений елемент за допомогою атрибута inert, менш зручно.
Це можна зробити тільки за допомогою селектора атрибутів:
[inert] .my-class {}
Тепер поговоримо про сумісність
З додаванням підтримки атрибута HTML inert в Firefox, тепер усі основні сучасні браузери підтримують цей високоефективний атрибут для вимкнення елементів.
Я приблизно розглянув це: вимкнення мишачих взаємодій, запобігання вибору тексту та використання tabindex=-1 для вимкнення доступу з клавіатури, серед інших методів.
[inert] {
pointer-events: none;
cursor: default;
}
[inert], [inert] * {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
Це завершує статтю. Дякую за читання.
Це можна зробити тільки за допомогою селектора атрибутів:
[inert] .my-class {}
Тепер поговоримо про сумісність
З додаванням підтримки атрибута HTML inert в Firefox, тепер усі основні сучасні браузери підтримують цей високоефективний атрибут для вимкнення елементів.
Я приблизно розглянув це: вимкнення мишачих взаємодій, запобігання вибору тексту та використання tabindex=-1 для вимкнення доступу з клавіатури, серед інших методів.
[inert] {
pointer-events: none;
cursor: default;
}
[inert], [inert] * {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
Це завершує статтю. Дякую за читання.
Перекладено з: Say goodbye to pointer-events: none and effectively disable with the HTML inert attribute