iShadeed's Container Queries Lab | CSS-Tricks - CSS-Tricks
source link: https://css-tricks.com/ishadeeds-container-queries-lab/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
iShadeed’s Container Queries Lab
DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.
Ahmad Shadeed got an early jump on container queries and has a growing collection of examples based on everyday patterns.
And, if you missed it, his latest post on container queries does a wonderful job covering how they work since landing in Chrome 105 this month (we’ll see them in Safari 16 soon). Some choice highlights and takeaways:
- Containers are defined with the
container-typeproperty. Previous demos and proposals had been usingcontaininstead. - Container queries are very much like the media queries we’ve been writing all along to target the viewport size. So, rather than something like
@media (min-width: 600px) {}, we have@container (min-width: 600px) {}. That should make converting many of those media queries to container queries fairly straightfoward, minus the work of figuring out the new breakpoint values. - We can name containers to help distinguish them in our code (e.g.
container-name: blockquote).
Great job, Ahmad! And thanks for sharing!
Leave a Reply Cancel reply
Comment
Name
Website
Save my name, email, and website in this browser for the next time I comment.
Get the CSS-Tricks newsletter
Proposal for CSS @when
CSS is on a tear lately. Again, I've heard of a brand new thing I've never seen before, and again it's via Miriam: CSS Conditionals. 🎉 CSSWG just resolved to adopt @tabatkins when/else proposal into the next level of CSS Conditionals. Here's the proposal:https://t.co/IXEOK7xKcL— Mia, on Bass (@TerribleMia) September 15,…
September 21, 2021Logic in CSS Media Queries (If / Else / And / Or / Not)
There is all the expected conditional logic in CSS media queries. Learn how to use it in your stylesheets.
May 22, 2013Conditional Media Query Mixins
Using a @mixin in Sass for your media queries is useful for a variety of reasons. The most important of which is probably the cognitive ease of having the properties and values you are changing right next to the originals. But another reason is that you then gain the ability…
October 30, 2013Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK