Skip to content

Instantly share code, notes, and snippets.

@EminQasimov
Last active May 16, 2019 13:29
Show Gist options
  • Save EminQasimov/18f61204b0ac83089bc0b94f75e583fb to your computer and use it in GitHub Desktop.
Save EminQasimov/18f61204b0ac83089bc0b94f75e583fb to your computer and use it in GitHub Desktop.
hide dom elements with css
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
no display:none, ---> disable tab focusing. not playing video
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
video{
height: 1px;
width: 1px;
visibility: hidden;
display: block;
transform: scale(0) rotateX(90deg);
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment