Skip to main content
CSS-Tricks
  • Articles
  • Notes
  • Links
  • Guides
  • Almanac
  • Picks
  • Shuffle
Search

Articles Tagged
media queries

34 Articles
{
,

}
Image
Direct link to the article The Range Syntax Has Come to Container Style Queries and if()
container-queries CSS functions media queries Style Queries

The Range Syntax Has Come to Container Style Queries and if()

Being able to use the range syntax with container style queries — which we can do starting with Chrome 142 — means that we can compare literal numeric values as well as numeric values tokenized by custom properties or the attr() function.
Image
Daniel Schwarz on Nov 13, 2025
Image
Direct link to the article color-gamut
color media queries

color-gamut

The color-gamut media feature is used to apply CSS styles depending on whether or not your browser and device support a specific color gamut.
Image
Sunkanmi Fafowora on Apr 25, 2025
Image
Direct link to the article @media
media queries

@media

The CSS @media at-rule lets us target browsers by certain characteristics, features, and user preferences, then apply styles or run other code based on those things.

/* When the browser is at least 600px and above */
@media screen and 
…
Image
Andrés Galante on Dec 20, 2024
Image
Direct link to the article “Smart” Layouts With Container Queries
container-queries media queries rem

“Smart” Layouts With Container Queries

Modern CSS keeps giving us a lot of new, easier ways to solve old problems, but often the new features we’re getting don’t only solve old problems, they open up new possibilities as well.

Container queries are one of those …

Image
Kevin Powell on Aug 14, 2024
Image
Direct link to the article The New CSS Media Query Range Syntax
media queries responsive

The New CSS Media Query Range Syntax

The Media Queries Level 4 specification has introduced a new syntax for targeting a range of viewport widths using common mathematical comparison operators, like <, >, and =, that make more sense syntactically while writing less code for responsive web design.
Image
Preethi Selvam on Oct 31, 2022
Image
Direct link to the article Responsive Layouts, Fewer Media Queries
clamp flexbox grid media queries responsive

Responsive Layouts, Fewer Media Queries

We cannot talk about web development without talking about Responsive Design. It’s just a given these days and has been for many years. Media queries are a part of Responsive Design and they aren’t going anywhere. Since the introduction of …

Image
Temani Afif on Nov 22, 2021 Updated on Jul 6, 2023
Image
Direct link to the article Proposal for CSS @when
@when media queries

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. …

Image
Chris Coyier on Sep 21, 2021 Updated on Dec 27, 2021
Image
Direct link to the article Can we have custom media queries, please?
media queries

Can we have custom media queries, please?

Stefan Judis notes that there is a spec for custom media queries, but seemingly no momentum on it at the moment. That lack of movement is unfortunate, as it’s almost guaranteed front-end developers all over would start using it as …

Image
Chris Coyier on Sep 7, 2021 Updated on Sep 8, 2021
Image
Direct link to the article Detecting Media Query Support in CSS and JavaScript
@supports media queries

Detecting Media Query Support in CSS and JavaScript

You can’t just do @media (prefers-reduced-data: no-preference) alone because, as Kilian Valkhof says:

[…] that would be false if either there was no support (since the browser wouldn’t understand the media query) or if it was supported but the

…
Image
Chris Coyier on Aug 23, 2021
  • 1
  • 2
  • 3
  • ...
  • 4
  • Older Image

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top
Advertisement