Olek1
@Olek1
Enterprise

Где живёт паттерн visually-hidden?

Где живёт и развивается паттерн visually-hidden, на просторах интернета встречается достаточно большое количество его реализаций, но единого какого то централизированного репозитория на гитхабе найти что то не удаётся, одна из его версий:
5c30efa80ef6f163508910.png
  • Вопрос задан
  • 147 просмотров
Пригласить эксперта
Ответы на вопрос 1
SmthTo
@SmthTo
Все перепёлки мира будут оплакивать мою смерть
Представленный выше код, что называется, overkill.

Сам использую подобный, но с pointer-events: none; visibility: hidden; и без white-space и clip-свойств. Надо тоже их добавить, хорошая идея :))

Upd. Хотя вот так будет лютый overkill:

.is--visually-hidden {
	position: absolute !important;
	visibility: hidden !important;
	pointer-events: none !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(100%) !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	text-indent: -9999px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
	user-select: none !important;
}

Только что там с accessibility -- фиг его знает. Тут уже жду комментариев, если они будут.

Update. Если кто не понял, мой код -- это сборная солянка всего что только можно для прикола. Кода из картинки автора вопроса вполне достаточно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
от 56 000 до 56 000 руб.
WWHW Санкт-Петербург
от 40 000 до 100 000 руб.
АМТ Екатеринбург
от 40 000 до 50 000 руб.
21 янв. 2019, в 07:08
700 руб./в час
21 янв. 2019, в 01:19
10000 руб./за проект
20 янв. 2019, в 22:33
30000 руб./за проект