Skip to content

Instantly share code, notes, and snippets.



Last active Feb 1, 2021
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 */
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
@media (prefers-reduced-motion: reduce) {
::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] {
opacity: 0.3;
* Utility class to hide content visually while keeping it screen reader-accessible.
* Source:
.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 */
.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:
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;
}, {
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