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; | |
} | |
/* Another one which is described here: | |
https://hugogiraudel.com/2020/12/03/a11y-advent-hiding-content/ | |
https://hugogiraudel.com/2020/12/06/a11y-advent-skip-to-content/ | |
To use in conjunction with: | |
<a href="#main" class="sr-only sr-only--focusable">Skip to content</a> | |
*/ | |
.sr-only { | |
border: 0 !important; | |
clip: rect(1px, 1px, 1px, 1px) !important; | |
-webkit-clip-path: inset(50%) !important; | |
clip-path: inset(50%) !important; | |
height: 1px !important; | |
overflow: hidden !important; | |
padding: 0 !important; | |
position: absolute !important; | |
width: 1px !important; | |
white-space: nowrap !important; | |
} | |
.sr-only.sr-only--focusable:focus, | |
.sr-only.sr-only--focusable:active { | |
clip: auto !important; | |
-webkit-clip-path: auto !important; | |
clip-path: auto !important; | |
height: auto !important; | |
overflow: visible !important; | |
width: auto !important; | |
white-space: normal !important; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment