CSS: Color gamut & Containment. 🌈
Tags: css, html, webdev, tutorial
Published: 2020-10-23 13:16:55

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

I was filling my [The State of CSS Survey](https://stateofcss.com/) from where I got to know very cool properties and concepts about CSS. While some like [CSS Houdini](https://developer.mozilla.org/en-US/docs/Web/Houdini#:~:text=Houdini%20is%20a%20group%20of,be%20implemented%20natively%20in%20browsers.), [Subgrids](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid), 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](https://media.giphy.com/media/z0zTHzcwM4VYQ/giphy.gif)
<figcaption>When I first discovered about colors in CSS!</figcaption>

---

# ➡️ [`color-gamut`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/color-gamut)

Oh yes, this is one of the CSS feature/[media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features)/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](https://dev-to-uploads.s3.amazonaws.com/i/utk8awg8ob9ie01uecmt.jpg)
<figcaption>Via <a href="https://www.viewsonic.com/library/photography/what-is-color-gamut/">ViewSonic</a>.</figcaption>

You must have heard terms like [sRGB](https://en.wikipedia.org/wiki/SRGB), [Adobe RGB](https://en.wikipedia.org/wiki/Adobe_RGB_color_space), [DCI-P3](https://en.wikipedia.org/wiki/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](https://dev-to-uploads.s3.amazonaws.com/i/vczaowsxwy0vw1oeis3m.png)

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:

```css
@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:

![Output of color gamut](https://dev-to-uploads.s3.amazonaws.com/i/d1uff1hl9r6e17qddib0.png)

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

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

body {
  font-size: 50px;
}
```

It reflects the changes as:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tqm8nby2sas0nuurwsza.png)

As per the popular website [caniuse.com](https://caniuse.com/mdn-css_at-rules_media_color-gamut), here is its browser compatibility:

![Compatibility chart](https://dev-to-uploads.s3.amazonaws.com/i/w3fbnghvtaqsgu7l42qz.png)

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](https://www.w3.org/TR/css-contain-2/)

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`](https://developer.mozilla.org/en-US/docs/Web/CSS/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...

```css
/* 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...

```css
/* 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...

```css
/* 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) could be changed in an element, thereby affecting the rest of the webpage's tree. Using the following to your element...

```css
/* 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:

```html
<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>
```  

```css
span {
  contain: content;
}
```
If you do the compatibility check, you get these results from [caniuse.com](https://caniuse.com/css-containment):

![CSS Containment support](https://dev-to-uploads.s3.amazonaws.com/i/ol8u5p81jwqo6ebjc38i.png)

---

# Where to next? 🤔

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

- [The Expanding Gamut of Color on the Web by Ollie Williams
Published on CSS Tricks](https://css-tricks.com/the-expanding-gamut-of-color-on-the-web/).

- [CSS Color Module Level 4 by W3C](https://www.w3.org/TR/css-color-4/).

- [Helping Browsers Optimize With The CSS Contain Property by Rachel Andrew on Smashing Magazine](https://www.smashingmagazine.com/2019/12/browsers-containment-css-contain-property/).

---

_Thanks for reading, I appreciate it! Have a good day. (✿◕‿◕✿)_

---
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="en" dir="ltr">Ok well if this isn&#39;t genius, we don&#39;t know what is. 😂 <br><br>Why not set your entire Windows UI to dark mode, check out the details here: <a href="https://t.co/IqUDcZyQ9G">https://t.co/IqUDcZyQ9G</a><br><br>Image source: <a href="https://t.co/VZUZLuKx62">https://t.co/VZUZLuKx62</a><a href="https://twitter.com/hashtag/DevHumour?src=hash&amp;ref_src=twsrc%5Etfw">#DevHumour</a> <a href="https://twitter.com/hashtag/IDE?src=hash&amp;ref_src=twsrc%5Etfw">#IDE</a> <a href="https://twitter.com/hashtag/Developer?src=hash&amp;ref_src=twsrc%5Etfw">#Developer</a> <a href="https://t.co/3skLpaHhhI">pic.twitter.com/3skLpaHhhI</a></p>&mdash; Microsoft Developer UK (@msdevUK) <a href="https://twitter.com/msdevUK/status/1319182711127408641?ref_src=twsrc%5Etfw">October 22, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
---

#### [📫 Subscribe to my weekly developer newsletter 📫](https://mailchi.mp/f59beeac6b9b/devupdates)

##### 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](https://medium.com/@vaibhavkhulbe)'s my Medium profile.