Skip to content

Instantly share code, notes, and snippets.

@5t3ph
Created July 13, 2021 02:38
Show Gist options
  • Save 5t3ph/5fb5f0bf7c45ae6e53f5834245a8f946 to your computer and use it in GitHub Desktop.
Save 5t3ph/5fb5f0bf7c45ae6e53f5834245a8f946 to your computer and use it in GitHub Desktop.
3 Quick Modern CSS Examples
/*
OLD hacky way
*/
ul {
list-style: none;
padding: 0;
}
li {
position: relative;
padding-left: 1em;
}
li::before {
content: "•";
color: blue;
position: absolute;
font-size: 1.1em;
left: 0;
}
/*
Modern CSS Upgrade
https://caniuse.com/css-marker-pseudo - 90%+
*/
li::marker {
color: blue;
}
/*
OLD hacky way
*/
.video-container {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/*
Modern CSS Upgrade
https://caniuse.com/mdn-css_properties_aspect-ratio - 69%+
*/
.video {
aspect-ratio: 16/9;
}
/*
OLD way
*/
h1 {
font-size: 2rem;
}
@media (min-width: 60rem) {
h1 {
font-size: 3rem;
}
}
@media (min-width: 120rem) {
h1 {
font-size: 4rem;
}
}
/*
Modern CSS Upgrade
https://caniuse.com/css-math-functions - 91%+
*/
h1 {
font-size:
clamp(
2rem,
5vw + 1rem,
4rem
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment