---
title: "Range Syntax for Style Queries"
url: https://daily.dev/posts/range-syntax-for-style-queries-oxxebzkp4
source_url: https://una.im/range-style-queries/
type: article
source: "Una Kravets"
published: 2025-11-13T00:47:06.852Z
updated: 2025-11-13T00:47:27.987Z
tags: ["webdev", "css", "frontend", "ui-design", "google-chrome"]
reading_time: 3
upvotes: 2
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Range Syntax for Style Queries

**[Una Kravets](https://daily.dev/sources/una)** · 3 min read · 2 upvotes · 0 comments

## Summary

CSS style queries now support range syntax with comparison operators (>, <, >=, <=) as of Chrome 142, similar to media and container queries. This enhancement allows developers to query custom properties based on ranges rather than exact values, enabling more flexible responsive components. The feature works with @container style() queries and the CSS if() function, supporting comparisons of numeric data types like percentages, lengths, and angles. Practical applications include conditional styling based on data attributes, grid positioning, and dynamic component variations.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://una.im/range-style-queries/>

## Similar posts on daily.dev

- [The Range Syntax Has Come to Container Style Queries and if\(\)](https://daily.dev/posts/the-range-syntax-has-come-to-container-style-queries-and-if--fdofcrnmy) · CSS-Tricks · 6 upvotes · 0 comments
- [Media Queries Range Syntax](https://daily.dev/posts/media-queries-range-syntax-v98uzhqsu) · Ahmad Shadeed · 31 upvotes · 1 comments
- [Frontend Focus Issue 719: November 26, 2025](https://daily.dev/posts/frontend-focus-issue-719-november-26-2025-nhs8996eo) · Frontend Focus · 3 upvotes · 0 comments
- [Range Selection using Modern CSS](https://daily.dev/posts/range-selection-using-modern-css-m0gtrwmlm) · CSS Tip · 3 upvotes · 1 comments

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#frontend](https://daily.dev/tags/frontend), [#ui-design](https://daily.dev/tags/ui-design), [#google-chrome](https://daily.dev/tags/google-chrome)

[View this post on daily.dev](https://daily.dev/posts/range-syntax-for-style-queries-oxxebzkp4)