Day 11: space-separated functional color notations

posted on October 10., 2022

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

---

Functional color notations that existed before CSS Color Module Level 4 (rgb(), rgba(), hsl(), hsla()) used to only except comma-separated lists of arguments. That changes with Module Level 4, now you can also provide space-separated arguments.

rgb values

div {
  background-color: rgb(255 0 0);
}

Percentages

div {
  background-color: rgb(0% 100% 0%);
}

rgb values + alpha

div {
  background-color: rgb(0 0 255 / 0.5);
}

rgb values + percentage alpha

div {
  background-color: rgb(255 0 0 / 50%);
}

Summary

body {
  /* Comma-separated arguments */
  background-color: rgb(255, 0, 0);
  background-color: rgb(0%, 100%, 0%);
  background-color: rgba(255, 0, 0, 0.5);
  background-color: rgba(0%, 0%, 100%);

/* Space-separated arguments */
  background-color: rgb(255 0 0);
  background-color: rgb(0% 100% 0%);
  background-color: rgb(255 0 0 / 0.5);
  background-color: rgba(255 0 0 / 0.5);
  background-color: rgb(0% 0% 100%);
  background-color: rgb(0% 100% 0% / 0.5);
  background-color: rgb(100% 0 0 / 50%);
}

See on CodePen.

Further reading