# Range Syntax for Style Queries

DevFeed: [Range Syntax for Style Queries](<https://devfeed.tech/articles/range-syntax-for-style-queries-28832.md>)

Original publisher: [Read original article](<https://una.im/range-style-queries/>)

Published: 2025-11-12T00:00:00Z

Content type: tutorial

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [demo](<https://devfeed.tech/tags/demo.md>), [example](<https://devfeed.tech/tags/example.md>), [function](<https://devfeed.tech/tags/function.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [learn](<https://devfeed.tech/tags/learn.md>), [properties](<https://devfeed.tech/tags/properties.md>), [range](<https://devfeed.tech/tags/range.md>), [syntax](<https://devfeed.tech/tags/syntax.md>)

## AI overview

A tutorial on using range syntax in CSS style queries and the if() function. It explains comparisons involving custom properties, literal values, and function results, with examples for responsive components, weather cards, grid placement, and styling effects.

## Source excerpt

Learn how to use the new range syntax for CSS style queries and the if() function.