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.

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:

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

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:

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

It reflects the changes as:

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

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

...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;
}

... 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;
}

...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;
}

... 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>

span {
  contain: content;
}

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

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. (✿◕‿◕✿)

Ok well if this isn't genius, we don't know what is. 😂

Why not set your entire Windows UI to dark mode, check out the details here: https://t.co/IqUDcZyQ9G

Image source: https://t.co/VZUZLuKx62 #DevHumour #IDE #Developer pic.twitter.com/3skLpaHhhI
— Microsoft Developer UK (@msdevUK) October 22, 2020