loading...
Cover image for CSS: Color gamut & Containment. 🌈

CSS: Color gamut & Containment. 🌈

vaibhavkhulbe profile image Vaibhav Khulbe ・6 min read

Another day, another dev found another new CSS property. Seems like they are endless!

I was filling my The State of CSS Survey from where I got to know very cool properties and concepts about CSS. While some like CSS Houdini, Subgrids, etc were somewhat out of the league for me currently, I was curious to know more about some crazy properties which I think most of us are unaware of.

Let's break down what color gamut and containment means in the world of CSS styling.


Colors gif

When I first discovered about colors in CSS!

➑️ color-gamut

Oh yes, this is one of the CSS feature/media feature/property...

The color-gamut can be used to test the approximate range of colors that are supported by the user agent and the output device.

Sounds a little complicated for you? Well, in the above sentence "the approximate range of colors" breaks down into the wide array of different types of colors or color gamut.

Now you might ask what is this "color gamut"? Naturally, it's the A-game of your eyes and the brain which senses the range of color within the spectrum of colors that are identifiable by the human eye.

When we talk about color gamut in the digital world, your computer monitor follows one or more defined specific color gamut.

Color coverage image

Via ViewSonic.

You must have heard terms like sRGB, Adobe RGB, DCI-P3, etc, these are all the color standards on which your device's colors would work. For example, the current Macbooks have this additional setting to change the color scheme:

Macbook Color Scheme

Similarly, when you're concerned with the color profiles while working on the styles of your website, these color profiles are available for the color-gamut property:

  • srgb: This will cover the vast number of displays that support sRGB.

  • p3: This one is larger than sRGB in terms of the color coverage and includes sRGB in it.

  • rec2020: And this one is mainly used for Ultra High Definition (UHD) displays like 4K or 8K.

Testing with an example

Let's do something really basic to implement this feature. We will have a single element of <code> in our HTML and inside the CSS, we write the media query as:

@media (color-gamut: srgb) {
  code {
    background: pink;
  }
}
Enter fullscreen mode Exit fullscreen mode

What's it's doing is that it's checking if the client's (i.e. mine) display supports the srgb color profile or not. If yes, then it executes the next lines of code which simply changes the background color of the code element to pink. Mine is supported on all three profiles discussed above so it does change the color:

Output of color gamut

As you can see, I have increased the font size of the body, but what if I change the code to this:

@media (color-gamut: srgb) {
  code {
    background: pink;
    font-size: 25px;
  }
}

body {
  font-size: 50px;
}
Enter fullscreen mode Exit fullscreen mode

It reflects the changes as:

Alt Text

As per the popular website caniuse.com, here is its browser compatibility:

Compatibility chart

Of course, this property is not meant for every project, but if you really need to shine some extra changes on different profiles, then this is really useful. I've linked a CSS Tricks link to the end where you can see some cool examples of the same.

➑️ CSS Containment

Time to move slightly off from colors to performance!

The CSS Containment Specification defines a single property, contain, and explains the browser which parts of your layout are independent and will not need recalculating if some other part of the layout changes.

This happens by improving the performance of web pages by allowing developers to isolate a subtree of the page from the rest of the page. By knowing beforehand, rendering can be optimized and so can be the performance.

This specification has only one property called contain. Now, to actually work on the different containments we have to take a look at the different types it provides to us:

1️⃣ Layout containment: it is scoped to the entire document. Hence, by using the syntax...

/* Here ... is some selector */
... {
  contain: layout;
}
Enter fullscreen mode Exit fullscreen mode

...you tell the browser that it only needs to check this element and everything inside the element is scoped to that element and does not affect the rest of the page.

2️⃣ Paint containment: it clips the box to the padding edge of the parent box. There is no visible overflow. Hence when you write...

/* Here ... is some selector */
... {
  contain: paint;
}
Enter fullscreen mode Exit fullscreen mode

... the browser does not need to paint its contained elements and they must be offscreen.

3️⃣ Size containment: here, the size of the element's children CANNOT affect the size of the element itself. The size will be computed as if it didn't have any children. When you apply...

/* Here ... is some selector */
... {
  contain: size;
}
Enter fullscreen mode Exit fullscreen mode

...you also need to specify the size of the element.

4️⃣ Style containment: it's specifically used to prevent situations where a CSS Counter could be changed in an element, thereby affecting the rest of the webpage's tree. Using the following to your element...

/* Here ... is some selector */
... {
  contain: style;
}
Enter fullscreen mode Exit fullscreen mode

... would ensure that the counter-increment and counter-set properties are scoped to that subtree only and not to the whole tree.

Here's a complete example:

<h1>CSS Containment Demo</h1>
<span>
  <div>Just another div...</div>
  <p>...and a para.</p>
</span>
<span>
  <h2>Another div...</h2>
  <p>...and another para.</p>
</span>
Enter fullscreen mode Exit fullscreen mode
span {
  contain: content;
}
Enter fullscreen mode Exit fullscreen mode

If you do the compatibility check, you get these results from caniuse.com:

CSS Containment support


Where to next? πŸ€”

Here are a few links you can take a look at to read more about these two features of CSS:


Thanks for reading, I appreciate it! Have a good day. (βœΏβ—•β€Ώβ—•βœΏ)



πŸ“« Subscribe to my weekly developer newsletter πŸ“«

PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, here's my Medium profile.

Discussion

pic
Editor guide