Created
September 26, 2017 20:21
-
-
Save peter-nikitin/d6e63bf375ce62b2b5daedbe502482db to your computer and use it in GitHub Desktop.
Hide text visual
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.visually-hidden { | |
/* Удаляем элемент из потока документа */ | |
position: absolute; | |
/* Временное решение для неверно произносимого, размазанного текста */ | |
white-space: nowrap; | |
/* Устанавливаем минимально возможный размер (некоторые скринридеры игнорируют элементы с нулевой высотой и шириной) */ | |
width: 1px; | |
height: 1px; | |
/* Скрываем вылезающий за границы контент */ | |
overflow: hidden; | |
/* Сбрасываем любые свойства, которые могут повлиять на размер элемента */ | |
border: 0; | |
padding: 0; | |
/* Вырезаем ту часть контента, которая должна отображаться. */ | |
/* Устаревшее свойство clip для старых браузеров */ | |
clip: rect(0 0 0 0); | |
/* clip-path для новых браузеров. inset(50%) определяет область вставки, которая позволит контенту исчезнуть. */ | |
clip-path: inset(50%); | |
/* Похоже, никто до конца не понимает, почему тут margin: -1px. Кроме того, это приводит к проблемам (читай: https://github.com/h5bp/html5-boilerplate/issues/1985). */ | |
margin: -1px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment