CSS Layout: Flexbox, Grid, Media Queries, and Container Queries, by @rauschma@fosstodon.org:
https://2ality.com/2025/10/css-layout.html
#css #layout #flexbox #grids #mediaqueries
https://2ality.com/2025/10/css-layout.html
#css #layout #flexbox #grids #mediaqueries
CSS Layout: Flexbox, Grid, Media Queries, and Container Queries
2ality.com
October 27, 2025 at 7:30 AM
CSS Layout: Flexbox, Grid, Media Queries, and Container Queries, by @rauschma@fosstodon.org:
https://2ality.com/2025/10/css-layout.html
#css #layout #flexbox #grids #mediaqueries
https://2ality.com/2025/10/css-layout.html
#css #layout #flexbox #grids #mediaqueries
Now that's interesting.
I found drafts.csswg.org/mediaqueries... but there's no mention of breakpoints.
I found drafts.csswg.org/mediaqueries... but there's no mention of breakpoints.
Media Queries Level 3
drafts.csswg.org
October 21, 2025 at 1:15 PM
Now that's interesting.
I found drafts.csswg.org/mediaqueries... but there's no mention of breakpoints.
I found drafts.csswg.org/mediaqueries... but there's no mention of breakpoints.
How Much Do You Really Know About Media Queries?, by @dxnny.fun (@frontendmasters.com):
https://frontendmasters.com/blog/learn-media-queries/
#css #mediaqueries #examples
https://frontendmasters.com/blog/learn-media-queries/
#css #mediaqueries #examples
How much do you really know about media queries?
There are a ton more @media queries than
frontendmasters.com
October 17, 2025 at 2:30 PM
How Much Do You Really Know About Media Queries?, by @dxnny.fun (@frontendmasters.com):
https://frontendmasters.com/blog/learn-media-queries/
#css #mediaqueries #examples
https://frontendmasters.com/blog/learn-media-queries/
#css #mediaqueries #examples
The example on that screenshot is something I wouldn’t wish on my worst enemy lol. Mediaqueries for window width only have a valid strategy: mobile-first. Everything else you end up regretting down the line and doesn’t scale. There will never be a screen smaller than 0px wide and that's a fact.
October 17, 2025 at 11:22 AM
The example on that screenshot is something I wouldn’t wish on my worst enemy lol. Mediaqueries for window width only have a valid strategy: mobile-first. Everything else you end up regretting down the line and doesn’t scale. There will never be a screen smaller than 0px wide and that's a fact.
Breakpoint Columns, Five Ways—Which Do You Like?, by @chriscoyier@front-end.social (@frontendmasters.com):
https://frontendmasters.com/blog/breakpoint-columns-five-ways-which-do-you-like/
#css #layout #mediaqueries #functions #grids
https://frontendmasters.com/blog/breakpoint-columns-five-ways-which-do-you-like/
#css #layout #mediaqueries #functions #grids
Breakpoint Columns, Five Ways. Which Do You Like?
There are usually multiple ways to do the same thing on the web. Sometimes... a lot of ways. Which is
frontendmasters.com
October 2, 2025 at 7:30 PM
Breakpoint Columns, Five Ways—Which Do You Like?, by @chriscoyier@front-end.social (@frontendmasters.com):
https://frontendmasters.com/blog/breakpoint-columns-five-ways-which-do-you-like/
#css #layout #mediaqueries #functions #grids
https://frontendmasters.com/blog/breakpoint-columns-five-ways-which-do-you-like/
#css #layout #mediaqueries #functions #grids
#Development #Overviews
Think you know media queries? · “Get ahead of the curve and start putting them to use.” ilo.im/1679ci by Daniel Schwarz
_____
#MediaQueries #FeatureDetection #Devices #Browser #Accessibility #WebDev #Frontend #CSS #CssNesting
Think you know media queries? · “Get ahead of the curve and start putting them to use.” ilo.im/1679ci by Daniel Schwarz
_____
#MediaQueries #FeatureDetection #Devices #Browser #Accessibility #WebDev #Frontend #CSS #CssNesting
How much do you really know about media queries?
There are a ton more @media queries than
ilo.im
October 1, 2025 at 8:16 AM
#Development #Overviews
Think you know media queries? · “Get ahead of the curve and start putting them to use.” ilo.im/1679ci by Daniel Schwarz
_____
#MediaQueries #FeatureDetection #Devices #Browser #Accessibility #WebDev #Frontend #CSS #CssNesting
Think you know media queries? · “Get ahead of the curve and start putting them to use.” ilo.im/1679ci by Daniel Schwarz
_____
#MediaQueries #FeatureDetection #Devices #Browser #Accessibility #WebDev #Frontend #CSS #CssNesting
#Development #Techniques
Custom properties in media queries? · A workaround powered by modern CSS ilo.im/1675st by Manuel Matuzović
_____
#ModernCSS #MediaQueries #ContainerQueries #StyleQueries #CustomProperties #Browser #WebDev #Frontend #CSS
Custom properties in media queries? · A workaround powered by modern CSS ilo.im/1675st by Manuel Matuzović
_____
#ModernCSS #MediaQueries #ContainerQueries #StyleQueries #CustomProperties #Browser #WebDev #Frontend #CSS
A workaround for using custom properties in media queries
One of the most frustrating aspects of media queries is that we can’t use custom properties with them. This often results in hard-coded values in otherwise, highly configurable codebases. Manuel has...
ilo.im
September 25, 2025 at 2:52 PM
#Development #Techniques
Custom properties in media queries? · A workaround powered by modern CSS ilo.im/1675st by Manuel Matuzović
_____
#ModernCSS #MediaQueries #ContainerQueries #StyleQueries #CustomProperties #Browser #WebDev #Frontend #CSS
Custom properties in media queries? · A workaround powered by modern CSS ilo.im/1675st by Manuel Matuzović
_____
#ModernCSS #MediaQueries #ContainerQueries #StyleQueries #CustomProperties #Browser #WebDev #Frontend #CSS
Optimizing PWAs for Different Display Modes, by @vale.rocks (@smashingmag@mastodon.social):
https://www.smashingmagazine.com/2025/08/optimizing-pwas-different-display-modes/
#progressivewebapps #webapps #responsivedesign #css #mediaqueries
https://www.smashingmagazine.com/2025/08/optimizing-pwas-different-display-modes/
#progressivewebapps #webapps #responsivedesign #css #mediaqueries
Optimizing PWAs For Different Display Modes — Smashing Magazine
Progressive Web Apps (PWAs) are a great way to make apps built for the web feel native, but in moving away from a browser environment, we can introduce usability issues. This article covers how we can modify our app depending on what display mode is applied to mitigate these issues.
www.smashingmagazine.com
August 28, 2025 at 6:30 AM
Optimizing PWAs for Different Display Modes, by @vale.rocks (@smashingmag@mastodon.social):
https://www.smashingmagazine.com/2025/08/optimizing-pwas-different-display-modes/
#progressivewebapps #webapps #responsivedesign #css #mediaqueries
https://www.smashingmagazine.com/2025/08/optimizing-pwas-different-display-modes/
#progressivewebapps #webapps #responsivedesign #css #mediaqueries
Dynamic Media/Container Queries Using “if()”, by @css@front-end.social:
https://css-tip.com/dynamic-queries/
#css #conditionals #mediaqueries #containerqueries
https://css-tip.com/dynamic-queries/
#css #conditionals #mediaqueries #containerqueries
Dynamic media/container queries using if()
Use modern CSS to express media queries and container queries differently
css-tip.com
August 25, 2025 at 7:30 PM
Dynamic Media/Container Queries Using “if()”, by @css@front-end.social:
https://css-tip.com/dynamic-queries/
#css #conditionals #mediaqueries #containerqueries
https://css-tip.com/dynamic-queries/
#css #conditionals #mediaqueries #containerqueries
Can’t wait for this to land: drafts.csswg.org/mediaqueries... (API for recording user preferences in a way that just works)
Media Queries Level 5
https://drafts.csswg.org/mediaqueries-5/#auto-pref①
August 17, 2025 at 4:30 PM
Can’t wait for this to land: drafts.csswg.org/mediaqueries... (API for recording user preferences in a way that just works)
ALSO wtf omg drafts.csswg.org/mediaqueries...!
No more storing media queries as comments and pasting them everywhere!
I'm FREE lol
No more storing media queries as comments and pasting them everywhere!
I'm FREE lol
a man sitting in a car with the word freedom written on his shirt
Alt: A web developer who's been catching up to CSS when the last thing they've learned was Flexbox feeling the freedom and flexibility of newer versions
media.tenor.com
August 12, 2025 at 2:03 AM
ALSO wtf omg drafts.csswg.org/mediaqueries...!
No more storing media queries as comments and pasting them everywhere!
I'm FREE lol
No more storing media queries as comments and pasting them everywhere!
I'm FREE lol
Something else that I like to do with assessing mediaqueries is to use aspect-ratio.
That happens to be very useful when we deal with layouts involving elements that have to be absolutely placed in the viewport.
That happens to be very useful when we deal with layouts involving elements that have to be absolutely placed in the viewport.
May 28, 2025 at 12:19 PM
Something else that I like to do with assessing mediaqueries is to use aspect-ratio.
That happens to be very useful when we deal with layouts involving elements that have to be absolutely placed in the viewport.
That happens to be very useful when we deal with layouts involving elements that have to be absolutely placed in the viewport.
I really like to use mixin for applying my mediaqueries.
I tend to nest my styles a lot, and it's quite convenient to inject a mediaquery specific style just via @ include when needed.
Do you also do this?
I tend to nest my styles a lot, and it's quite convenient to inject a mediaquery specific style just via @ include when needed.
Do you also do this?
May 28, 2025 at 12:16 PM
I really like to use mixin for applying my mediaqueries.
I tend to nest my styles a lot, and it's quite convenient to inject a mediaquery specific style just via @ include when needed.
Do you also do this?
I tend to nest my styles a lot, and it's quite convenient to inject a mediaquery specific style just via @ include when needed.
Do you also do this?
Excuse you, I think you'll find he's just my work horse and the credit really belongs to me: bsky.app/profile/pass...
But also indeed: drafts.csswg.org/mediaqueries...
But also indeed: drafts.csswg.org/mediaqueries...
May 12, 2025 at 5:02 AM
Excuse you, I think you'll find he's just my work horse and the credit really belongs to me: bsky.app/profile/pass...
But also indeed: drafts.csswg.org/mediaqueries...
But also indeed: drafts.csswg.org/mediaqueries...
I think you want: drafts.csswg.org/mediaqueries...
Media Queries Level 5
drafts.csswg.org
May 8, 2025 at 12:00 PM
I think you want: drafts.csswg.org/mediaqueries...
Une extension chrome bien pratique pour simuler le rendu dans des appareils mobiles chromewebstore.google.com/detail/mobil...
#chrome #mobile #webdev #webdesign #mediaqueries
#chrome #mobile #webdev #webdesign #mediaqueries
January 26, 2025 at 4:23 PM
Une extension chrome bien pratique pour simuler le rendu dans des appareils mobiles chromewebstore.google.com/detail/mobil...
#chrome #mobile #webdev #webdesign #mediaqueries
#chrome #mobile #webdev #webdesign #mediaqueries
🕸️ Responsive Web-Design 101
Written by @trinityblair.com
The basics to responsive web-design using media queries and flex-box CSS properties. CodePen's are used for interactive examples. #swresources #responsivedesign #flexbox #codepen #mediaqueries
Written by @trinityblair.com
The basics to responsive web-design using media queries and flex-box CSS properties. CodePen's are used for interactive examples. #swresources #responsivedesign #flexbox #codepen #mediaqueries
January 9, 2025 at 2:04 AM
🕸️ Responsive Web-Design 101
Written by @trinityblair.com
The basics to responsive web-design using media queries and flex-box CSS properties. CodePen's are used for interactive examples. #swresources #responsivedesign #flexbox #codepen #mediaqueries
Written by @trinityblair.com
The basics to responsive web-design using media queries and flex-box CSS properties. CodePen's are used for interactive examples. #swresources #responsivedesign #flexbox #codepen #mediaqueries
i dont think we'll see custom properties in media queries, but we may see env() variables in there
more likely that @custom-media will get picked up (spec drafts.csswg.org/mediaqueries...).
open props has a bunch in a file, waiting to remove the postcss plugin open-props.style#media-queries
more likely that @custom-media will get picked up (spec drafts.csswg.org/mediaqueries...).
open props has a bunch in a file, waiting to remove the postcss plugin open-props.style#media-queries
Open Props: sub-atomic styles
Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.
open-props.style
January 7, 2025 at 6:23 PM
i dont think we'll see custom properties in media queries, but we may see env() variables in there
more likely that @custom-media will get picked up (spec drafts.csswg.org/mediaqueries...).
open props has a bunch in a file, waiting to remove the postcss plugin open-props.style#media-queries
more likely that @custom-media will get picked up (spec drafts.csswg.org/mediaqueries...).
open props has a bunch in a file, waiting to remove the postcss plugin open-props.style#media-queries
Spec URL: drafts.csswg.org/mediaqueries...
January 6, 2025 at 3:55 PM
Spec URL: drafts.csswg.org/mediaqueries...
#CSSence #AdventCalendar Day 24
A CodePen that may contain traces of Media Queries Level 5 completes the calendar.
»Media Queries Test Page«
cssence.com/2024/media-q...
#CSS #MediaQueries
A CodePen that may contain traces of Media Queries Level 5 completes the calendar.
»Media Queries Test Page«
cssence.com/2024/media-q...
#CSS #MediaQueries
Media Queries Test Page
May contain traces of Media Queries Level 5.
cssence.com
December 24, 2024 at 9:26 AM
#CSSence #AdventCalendar Day 24
A CodePen that may contain traces of Media Queries Level 5 completes the calendar.
»Media Queries Test Page«
cssence.com/2024/media-q...
#CSS #MediaQueries
A CodePen that may contain traces of Media Queries Level 5 completes the calendar.
»Media Queries Test Page«
cssence.com/2024/media-q...
#CSS #MediaQueries
The range syntax is so much better than min/max width.
Teaching beginners, the amount of times I had to explain "no, the min one is for bigger than, and max if for smaller than" 😅
So happy this is a thing now.
Teaching beginners, the amount of times I had to explain "no, the min one is for bigger than, and max if for smaller than" 😅
So happy this is a thing now.
Tired:
@media (min-width: 500px) { }
Wired:
@media (width >= 500px) { }
Even better when you need to double up like:
@media (500px <= width <= 1000px) { }
Took a minute but I got my brain to flip over to the new way. Also easier to avoid weird 1px gaps.
Good article:
cssence.com/2024/superio...
@media (min-width: 500px) { }
Wired:
@media (width >= 500px) { }
Even better when you need to double up like:
@media (500px <= width <= 1000px) { }
Took a minute but I got my brain to flip over to the new way. Also easier to avoid weird 1px gaps.
Good article:
cssence.com/2024/superio...
November 22, 2024 at 10:40 AM
Tired:
@media (min-width: 500px) { }
Wired:
@media (width >= 500px) { }
Even better when you need to double up like:
@media (500px <= width <= 1000px) { }
Took a minute but I got my brain to flip over to the new way. Also easier to avoid weird 1px gaps.
Good article:
cssence.com/2024/superio...
@media (min-width: 500px) { }
Wired:
@media (width >= 500px) { }
Even better when you need to double up like:
@media (500px <= width <= 1000px) { }
Took a minute but I got my brain to flip over to the new way. Also easier to avoid weird 1px gaps.
Good article:
cssence.com/2024/superio...
November 22, 2024 at 10:35 AM
😎Por que Isso Importa?
Usar media queries é essencial para criar sites que funcionam bem em qualquer lugar. O design responsivo é o futuro, e as mediaqueries são 1 parte super importante disso! 🚀
Vc têm usado media queries em seus projetos? Compartilhem suas dicas e experiências nos comentários! 👇
Usar media queries é essencial para criar sites que funcionam bem em qualquer lugar. O design responsivo é o futuro, e as mediaqueries são 1 parte super importante disso! 🚀
Vc têm usado media queries em seus projetos? Compartilhem suas dicas e experiências nos comentários! 👇
September 23, 2024 at 2:20 PM
😎Por que Isso Importa?
Usar media queries é essencial para criar sites que funcionam bem em qualquer lugar. O design responsivo é o futuro, e as mediaqueries são 1 parte super importante disso! 🚀
Vc têm usado media queries em seus projetos? Compartilhem suas dicas e experiências nos comentários! 👇
Usar media queries é essencial para criar sites que funcionam bem em qualquer lugar. O design responsivo é o futuro, e as mediaqueries são 1 parte super importante disso! 🚀
Vc têm usado media queries em seus projetos? Compartilhem suas dicas e experiências nos comentários! 👇
🔵 Logical Properties in Size Queries
by Michelle Barker
@michelle@front-end.social
#MediaQueries #LogicalProperties #css #webdev
css-irl.info/logical-prop...
by Michelle Barker
@michelle@front-end.social
#MediaQueries #LogicalProperties #css #webdev
css-irl.info/logical-prop...
September 22, 2024 at 12:34 AM
🔵 Logical Properties in Size Queries
by Michelle Barker
@michelle@front-end.social
#MediaQueries #LogicalProperties #css #webdev
css-irl.info/logical-prop...
by Michelle Barker
@michelle@front-end.social
#MediaQueries #LogicalProperties #css #webdev
css-irl.info/logical-prop...