#mediaqueries — Public Fediverse posts

Media Queries Range Syntax, by @shadeed9:

https://ishadeed.com/article/range-syntax/

#css #mediaqueries

#Development #Guides
Media queries range syntax · What problem it solves and how to use it today https://ilo.im/16cnpn

_____
#Syntax #RangeQueries #MediaQueries #ResponsiveDesign #Design #WebDesign #WebDev #Frontend #CSS

#Development #Guides
Media queries range syntax · What problem it solves and how to use it today https://ilo.im/16cnpn

_____
#Syntax #RangeQueries #MediaQueries #ResponsiveDesign #Design #WebDesign #WebDev #Frontend #CSS

#Development #Guides
Media queries range syntax · What problem it solves and how to use it today https://ilo.im/16cnpn

_____
#Syntax #RangeQueries #MediaQueries #ResponsiveDesign #Design #WebDesign #WebDev #Frontend #CSS

#Development #Guides
Media queries range syntax · What problem it solves and how to use it today https://ilo.im/16cnpn

_____
#Syntax #RangeQueries #MediaQueries #ResponsiveDesign #Design #WebDesign #WebDev #Frontend #CSS

#Development #Approaches
Building a UI without breakpoints · Moving to fluid CSS components for the modern web https://ilo.im/16c7es

_____
#Components #CssGrid #CssFlex #ContainerQueries #MediaQueries #FluidDesign #ResponsiveDesign #WebDev #Frontend #CSS

Tailwind CSS v4: Container Queries and the Death of Media Queries, by (not on Mastodon or Bluesky):

https://www.sitepoint.com/tailwind-css-v4-container-queries-modern-layouts/

#tailwind #containerqueries #mediaqueries #css

#Development #Outlooks
Container queries in 2026 · “Powerful, but not a silver bullet.” https://ilo.im/169fht

_____
#CSS #ContainerQueries #StyleQueries #ScrollStateQueries #MediaQueries #Accessibility #Adoption #Browsers #WebDev #Frontend

CSS Layout: Flexbox, Grid, Media Queries, and Container Queries, by @rauschma:

https://2ality.com/2025/10/css-layout.html

#css #layout #flexbox #grids #mediaqueries #containerqueries #introductions

How Much Do You Really Know About Media Queries?, by @dxnny.fun (@frontendmasters.com):

https://frontendmasters.com/blog/learn-media-queries/

#css #mediaqueries #examples

Breakpoint Columns, Five Ways—Which Do You Like?, by @chriscoyier (@frontendmasters.com):

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.” https://ilo.im/1679ci

_____
#MediaQueries #FeatureDetection #Devices #Browser #Accessibility #WebDev #Frontend #CSS #CssNesting

#Development #Overviews
Think you know media queries? · “Get ahead of the curve and start putting them to use.” https://ilo.im/1679ci

_____
#MediaQueries #FeatureDetection #Devices #Browser #Accessibility #WebDev #Frontend #CSS #CssNesting

#Development #Overviews
Think you know media queries? · “Get ahead of the curve and start putting them to use.” https://ilo.im/1679ci

_____
#MediaQueries #FeatureDetection #Devices #Browser #Accessibility #WebDev #Frontend #CSS #CssNesting

#Development #Overviews
Think you know media queries? · “Get ahead of the curve and start putting them to use.” https://ilo.im/1679ci

_____
#MediaQueries #FeatureDetection #Devices #Browser #Accessibility #WebDev #Frontend #CSS #CssNesting

Les media queries CSS sont devenues très complètes et vont bien au delà de la détection de la largeur du navigateur.

🔗 https://frontendmasters.com/blog/learn-media-queries/

#CSS #mediaqueries

#Development #Techniques
Custom properties in media queries? · A workaround powered by modern CSS https://ilo.im/1675st

_____
#ModernCSS #MediaQueries #ContainerQueries #StyleQueries #CustomProperties #Browser #WebDev #Frontend #CSS

Optimizing PWAs for Different Display Modes, by @vale.rocks (@smashingmag):

https://www.smashingmagazine.com/2025/08/optimizing-pwas-different-display-modes/

#progressivewebapps #webapps #responsivedesign #css #mediaqueries #optimization

Optimizing PWAs for Different Display Modes, by @vale.rocks (@smashingmag):

https://www.smashingmagazine.com/2025/08/optimizing-pwas-different-display-modes/

#progressivewebapps #webapps #responsivedesign #css #mediaqueries #optimization

Optimizing PWAs for Different Display Modes, by @vale.rocks (@smashingmag):

https://www.smashingmagazine.com/2025/08/optimizing-pwas-different-display-modes/

#progressivewebapps #webapps #responsivedesign #css #mediaqueries #optimization

Optimizing PWAs for Different Display Modes, by @vale.rocks (@smashingmag):

https://www.smashingmagazine.com/2025/08/optimizing-pwas-different-display-modes/

#progressivewebapps #webapps #responsivedesign #css #mediaqueries #optimization

Optimizing PWAs for Different Display Modes, by @vale.rocks (@smashingmag):

https://www.smashingmagazine.com/2025/08/optimizing-pwas-different-display-modes/

#progressivewebapps #webapps #responsivedesign #css #mediaqueries #optimization

Dynamic Media/Container Queries Using “if()”, by @css:

https://css-tip.com/dynamic-queries/

#css #conditionals #mediaqueries #containerqueries

✍️ Le media queries in CSS
Come applicare "if statements" al tuo foglio di stile CSS per adeguarlo a qualsiasi condizione...

👉 https://www.selectallfromdual.com/blog/1575

#controlloif #css #mediaqueries

Worked on the Lunatics release page CSS a little.

I had noticed that the page works very poorly on e-ink devices like my InkPad 3 Color reader's browser, because of the animated background effect, which I'm still pretty attached to.

It moves pretty slowly, but it still created updates with constant flickering as my e-reader tried to keep up.

Of course, the page is really designed to distribute or stream video, so it's normally intended for full-motion video browsers. The video is never going to work right on an e-reader.

But there's also credits and other text information on the site.

So, I looked up methods to fix this with CSS media queries, and I think it's fixed now.

It now only animates if the browser reports media type "screen" and feature "update: fast".

And this correctly suppresses animation now on my InkPad 3 Color e-reader. If you happen to have a similar device or other oddball browser, I'd be interested if the page is working for you.

Still working on honoring other parameters like "prefers-reduced-motion", "prefers-color-scheme", and "prefers-contrast". I would like to get those working as well.

Ultimately, I may add a Javascript button to change the behavior manually, but the page currently is HTML and CSS only to keep it lighter weight.

I did also test it in a text-only browser, w3m, where it looks pretty correct. Haven't tried other ones.
#LunaticsProject #WebDesign #CSS #MediaQueries #Testing

#Development #Releases
New if() function in CSS · You can now try out inline CSS conditionals https://ilo.im/1652u9

_____
#ModernCSS #IfFunction #StyleQueries #MediaQueries #SupportQueries #Chrome #Browser #WebDev #Frontend #CSS

#Development #Releases
New if() function in CSS · You can now try out inline CSS conditionals https://ilo.im/1652u9

_____
#ModernCSS #IfFunction #StyleQueries #MediaQueries #SupportQueries #Chrome #Browser #WebDev #Frontend #CSS

#Development #Releases
New if() function in CSS · You can now try out inline CSS conditionals https://ilo.im/1652u9

_____
#ModernCSS #IfFunction #StyleQueries #MediaQueries #SupportQueries #Chrome #Browser #WebDev #Frontend #CSS

#Development #Releases
New if() function in CSS · You can now try out inline CSS conditionals https://ilo.im/1652u9

_____
#ModernCSS #IfFunction #StyleQueries #MediaQueries #SupportQueries #Chrome #Browser #WebDev #Frontend #CSS

#Design #Anniversairies
Responsive Web Design turns 15 · On May 25, 2010, a new era in web design began https://ilo.im/16460l

_____
#Devices #Mobile #ResponsiveDesign #UiDesign #WebDesign #Development #Frontend #CSS #MediaQueries

Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries (20

https://css-tricks.com/hexagons-and-beyond-flexible-responsive-grid-patterns-sans-media-queries/

#HackerNews #Hexagons #Responsive #Design #CSS #Grid #Patterns #Flexibility #MediaQueries

#CSSence #AdventCalendar Day 24

A CodePen that may contain traces of Media Queries Level 5 completes the calendar.

»Media Queries Test Page«
https://cssence.com/2024/media-queries-including-level-5/

#CSS #MediaQueries

#Development #Guides
A friendly introduction to container queries · The CSS feature everyone asked for but few are using https://ilo.im/160peq

_____
#CSS #ContainerQueries #MediaQueries #ContainmentAPI #Browser #ResponsiveDesign #WebDesign #WebDev #Frontend

Putting images on a webpage (I mean, optimized ones, with pictures, sources, sizes, srcsets, and all the tralala) is a real pain. Beyond the fact that I find perfectly weird to write #mediaqueries in the #HTML source, some #CSS sizing strategies require a level in mathematics that I'm far from having...

I guess you know that the new range syntax allows media queries to be more concise. But IMO this isn’t even the best part. Let me explain:
https://cssence.com/2024/superior-range-syntax/

Also, if you ever wanted to do music selection based on viewport size 🤨, this article is for you.

#CSS #Viewport #MediaQueries

#Development #Introductions
Getting started with CSS container queries · What they are and where they may replace Media Queries https://ilo.im/15hm1g

_____
#Design #WebDesign #ResponsiveDesign #WebDev #Frontend #CSS #MediaQueries #ContainerQueries

#Development #Releases
CSS ‘prefers-reduced-transparency’ · Chrome 118 introduces a new media query feature https://ilo.im/15dy18

_____
#WebDev #Frontend #CSS #MediaQueries #Transparency

#Design #Reminders
There’s no such thing as a desktop screen · Screen-based breakpoints? Better level-up responsiveness https://ilo.im/159xx4

_____
#UiDesign #WebDesign #ResponsiveDesign #WebDev #Frontend #CSS #MediaQueries #BreakPoints

#Development #Guidelines
Using ‘rem’ doesn’t make your website responsive · CSS best practices when working with text https://ilo.im/1582t6

_____
#WebDev #ResponsiveDesign #Typography #Frontend #CSS #MediaQueries #Rem #Px

#Development #Guidelines
Using ‘rem’ doesn’t make your website responsive · CSS best practices when working with text https://ilo.im/1582t6

_____
#WebDev #ResponsiveDesign #Typography #Frontend #CSS #MediaQueries #Rem #Px

#Development #Guidelines
Using ‘rem’ doesn’t make your website responsive · CSS best practices when working with text https://ilo.im/1582t6

_____
#WebDev #ResponsiveDesign #Typography #Frontend #CSS #MediaQueries #Rem #Px

#Development #Guidelines
Using ‘rem’ doesn’t make your website responsive · CSS best practices when working with text https://ilo.im/1582t6

_____
#WebDev #ResponsiveDesign #Typography #Frontend #CSS #MediaQueries #Rem #Px

#Development #Techniques
Adapting typography to user preferences with CSS · Font adjustment to suit your reader’s liking and comfort https://ilo.im/14el4n

_____
#WebTypography #Content #Readability #Accessibility #UiDesign #WebDesign #WebDevelopment #WebDev #Frontend #CSS #MediaQueries #CssCustomProperties #CssNesting #PrefersColorScheme #PrefersContrast #VariableFonts #Fonts

#Development #Techniques
Adapting typography to user preferences with CSS · Font adjustment to suit your reader’s liking and comfort https://ilo.im/14el4n

_____
#WebTypography #Content #Readability #Accessibility #UiDesign #WebDesign #WebDevelopment #WebDev #Frontend #CSS #MediaQueries #CssCustomProperties #CssNesting #PrefersColorScheme #PrefersContrast #VariableFonts #Fonts

#Development #Techniques
Adapting typography to user preferences with CSS · Font adjustment to suit your reader’s liking and comfort https://ilo.im/14el4n

_____
#WebTypography #Content #Readability #Accessibility #UiDesign #WebDesign #WebDevelopment #WebDev #Frontend #CSS #MediaQueries #CssCustomProperties #CssNesting #PrefersColorScheme #PrefersContrast #VariableFonts #Fonts

#Development #Techniques
Adapting typography to user preferences with CSS · Font adjustment to suit your reader’s liking and comfort https://ilo.im/14el4n

_____
#WebTypography #Content #Readability #Accessibility #UiDesign #WebDesign #WebDevelopment #WebDev #Frontend #CSS #MediaQueries #CssCustomProperties #CssNesting #PrefersColorScheme #PrefersContrast #VariableFonts #Fonts

#Development #Techniques
Where you can use the ‘prefers-color-scheme’ media query · All the places where it simplifies switching between color schemes https://ilo.im/145tor

_____
#MediaQueries #PrefersColorScheme #WebDevelopment #WebDev #Frontend #CSS #JavaScript #Images #Favicons #DarkMode #LightMode

#Development #Techniques
Where you can use the ‘prefers-color-scheme’ media query · All the places where it simplifies switching between color schemes https://ilo.im/145tor

_____
#MediaQueries #PrefersColorScheme #WebDevelopment #WebDev #Frontend #CSS #JavaScript #Images #Favicons #DarkMode #LightMode

#Development #Techniques
Where you can use the ‘prefers-color-scheme’ media query · All the places where it simplifies switching between color schemes https://ilo.im/145tor

_____
#MediaQueries #PrefersColorScheme #WebDevelopment #WebDev #Frontend #CSS #JavaScript #Images #Favicons #DarkMode #LightMode

Safari *is* the new IE

> If you want your breakpoints to scale along with the user’s font size, you should favor ems instead — but keep in mind you won’t get this benefit Safari unless the user has their minimum font size setting configured.

Re-evaluating px vs em in Media Queries

https://keithjgrant.com/posts/2023/05/px-vs-em-in-media-queries/#the-takeaway

#responsiveWebDesign #mediaQueries #safari #browser #web #webDev #CSS #FrontEnd #fonts #programming #webDesign #iOS #AAPL #Apple #mac #safariIsTheNewIE