CSS Container Queries are FINALLY HERE!!!

by | Jun 21, 2021 | 0 comments

CSS Container Queries are FINALLY HERE!!!

by | Jun 21, 2021 | CSS Tips and Tricks | 0 comments



CSS Container queries have been on the wish list of many a web developer for years now… finally they seem to be on the way. In Chrome Canary we can enable experimental CSS Container Queries and have a play with the proposed solution for this.

So similar to Media Queries the Container Queries provide us with a Width or Height but not for the entire viewport but rather the container of our component. The allows us to create components that are responsive relative to their actual container size.

For component creators this will be extremely benefical as though Media Queries are great they don’t quite provide the level of control needed to release a responsive component into the wild and be happy that it will just work in whatever situation it is placed into.

Until now the only was to implement this kind of feature was to use Javascript or some FlexBox or CSS Grid Hacks.

So the syntax for this is very much the same as Media Queries as below but with the @Container keyword.

@Container (min-width: 20ch) {

}

One of the main things holding this back has been performance issues. To this end we need to specify the container that will be the reference for measurements as below:

.container {
contain: layout inline-size
}

Some reference documents for this are below:

https://piccalil.li/blog/container-queries-are-actually-coming

https://dev.to/eddyvinck/why-i-think-the-upcoming-css-container-queries-are-game-changing-d4o

source

0 Comments

Submit a Comment

What Our Clients Are Saying

Amplifylife.ca

Been working with Leland on a project for a Not-For-Profit organization and it is a pleasure to be able to...

Rob - Amplylife.ca

Dieno Digital Marketing Services
5
2018-05-03T19:49:40+00:00

Rob - Amplylife.ca

Been working with Leland on a project for a Not-For-Profit organization and it is a pleasure to be able to bring a high level of creativity, energy, expertise and professionalism to the project for their digital marketing needs. We are so excited for the chance to work more with Leland and Dieno Digital.

FS Designs

Leland is extremely knowledgeable and super pleasant to deal with. He helped me get my website running for my graphic...

F.S.

Dieno Digital Marketing Services
5
2018-06-19T18:50:18+00:00

F.S.

Leland is extremely knowledgeable and super pleasant to deal with. He helped me get my website running for my graphic design business and improved my SEO so that I appear more frequently and near the top of searches. He a great digital and web strategist and I would highly recommend his services.

Juju Hair Lounge

Great class! Not only was it very informative but it was also really entertaining! I can't wait to apply everything...

Leah

Dieno Digital Marketing Services
5
2018-07-09T03:06:21+00:00

Leah

Great class! Not only was it very informative but it was also really entertaining! I can't wait to apply everything I've learned to our Facebook business page!

Uniglobe Travel – Western Canada

I enjoyed the workshop, we covered a broad range of topics in a short space of time, but I appreciated...

Ciara

Dieno Digital Marketing Services
5
2018-07-10T03:22:20+00:00

Ciara

I enjoyed the workshop, we covered a broad range of topics in a short space of time, but I appreciated that there was some concrete, actionable advice given as well!
5
4
Dieno Digital Marketing Services
[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-name">First name or full name</label> <input class="tnp-name" type="text" name="nn" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-email">Email</label> <input class="tnp-email" type="email" name="ne" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>