Skip to content

Instantly share code, notes, and snippets.

@KostiantynO
Forked from luxplanjay/visually-hidden.css
Created May 15, 2021 16:47
Show Gist options
  • Save KostiantynO/a90e79619bf333447b92214162e20de3 to your computer and use it in GitHub Desktop.
Save KostiantynO/a90e79619bf333447b92214162e20de3 to your computer and use it in GitHub Desktop.
Visually hidden CSS pattern
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
@KostiantynO
Copy link
Author

KostiantynO commented Jun 6, 2021

body .is-hidden {
/* В классе "screen readers only" (.sr-only) Для Читалок удалить visibility: hidden; -> и задать элементу (скрытым заголовкам секций) в тег tabindex="0"
Тогда контент не выделяется табом. Контент видно, выделяется мышкой. Блок в потоке. */

/* Do not size content to 0 pixels if you want the content to be read by a screen reader.

  • If content styled with font-size:0px or line-height:0, then the elements would still take horizontal space on the screen.
  • All these techniques may result in search engine penalties as they may be interpreted as malicious. /
    position: absolute; /
    Small / / Вытягивает Блок из потока. Сдвигает все элементы страницы выше на высоту блока. Не влияет на сам контент. /
    top: auto;
    left: -10000px;
    width: 1px; /
    Useful / / Не влияет на строчный контент, а Блочный - меньше, но в потоке. /
    height: 1px; /
    Useful / / Не влияет на строчный контент, а Блочный - меньше, но в потоке. /
    padding: 0; /
    small importance / / Нет внутренних отступов. Не влияет. /
    margin: -1px; /
    small importance / / Нет внешних отступов. Не влияет. */

overflow: hidden; /* Useful / / Обрезает контент если Блочный контейнер имеет высоту\максвысоту, или white-space: nowrap. /
clip-path: inset(100%); /
Useful / / Вырезает контент. Блок в потоке. /
clip: rect(1px 1px 1px 1px); /
Useful / / Старая IE6, IE7, вырезает контент. Блок в потоке. /
clip: rect(1px, 1px, 1px, 1px); /
Useful / / Старая, вырезает контент. Блок в потоке. */

font-size: 1px; /* Useful / / Уменьшает текстовый контент, можно выделить с другими элементами. Блок меньше, но в потоке. /
line-height: 1px; /
Useful / / Уменьшает текстовый контент, можно выделить с другими элементами. Блок меньше, но в потоке. /
white-space: nowrap; /
small importance / / Nowrap - элементы в одной строке не переходят на новую строку. Влияет на overflow. */

pointer-events: none; /* MUST HAVE / / Не выделяется мышкой. Контент видно, выделяется табом. Блок в потоке. /
visibility: hidden; /
MUST HAVE / / НЕ ДОСТУПЕН ДЛЯ ЧИТАЛОК. Не выделяется ни мышкой, ни табом. Контент прозрачный. Блок в потоке. */

border: 0; /* small importance / / Нет границы. Сжимает внутрь на 1px. Не влияет. /
outline: none; /
small importance / / Нет рамки вокруг. Не влияет. /
outline-offset: 0; /
small importance / / Нет сдвига рамки вокруг. Не влияет. /
opacity: 0; /
only visual effect / / Контент прозрачный (не видно, но можно кликать и выделять). Контент и Блок в потоке. */
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment