Skip to content

Instantly share code, notes, and snippets.

@peter-nikitin
Created September 26, 2017 20:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save peter-nikitin/d6e63bf375ce62b2b5daedbe502482db to your computer and use it in GitHub Desktop.
Save peter-nikitin/d6e63bf375ce62b2b5daedbe502482db to your computer and use it in GitHub Desktop.
Hide text visual
.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