Skip to content

Instantly share code, notes, and snippets.

@davidbgk

davidbgk/utils.css

Created Oct 26, 2020
Embed
What would you like to do?
Let's start to reference some CSS utils
/* Applying it to the html element will provide smooth scrolling to anchors
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior */
html {
scroll-behavior: smooth;
}
/* Remove animations for folks who set their OS to reduce motion.
1. Immediately jump any animation to the end point
2. Remove transitions & fixed background attachment
See: https://github.com/mozdevs/cssremedy/issues/11
*/
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
animation-delay: -1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
background-attachment: initial !important;
scroll-behavior: auto !important;
transition-delay: 0s !important;
transition-duration: 0s !important;
}
}
/* Surprisingly not browsers default. */
summary {
cursor: pointer;
}
[hidden] {
display: none !important;
}
[disabled] {
pointer-events:none;
opacity: 0.3;
}
/*
* Utility class to hide content visually while keeping it screen reader-accessible.
* Source: https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
*/
.sr-only:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(100%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
/* Proven method to visually hide something but
still make it available to assistive technology
https://a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden:not(:focus):not(:active) {
position: absolute;
top: auto;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE 6/7 */
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
white-space: nowrap;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.