3 Quick Modern CSS Examples

colorized-list-bullets.css

/*
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;
}

ratio-sizing-videos.css

/*
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;
}

resizing-font-sizes.css

/*
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
    );
}