The goal of QSS is to define a simple syntax for specifying element queries by adding a new ending part between a CSS selector list and the block of rules that help define the breakpoints when those rules are to apply.
Normally in CSS you have something like this:
selectorList { block }
We are going to add a new part for our query between the selector list and the block where we will store instructions for when the rule should apply.
selectorList <query> { block }
Because this exists as a new part between the selector list and the block of rules, if you have a list of selectors like h1, h2, h3, h4, h5, h6 {}
you only need to add the query once after the selector list is complete, like h1, h2, h3, h4, h5, h6 <query> {}
rather than h1 <query>, h2 <query>, h3 <query>, …
.
This document describes two different formats for expressing element queries for individual CSS rules, one using an if
-based structure, and another that uses the @
symbol to declare when it should apply.
- operator:
if
- condition:
width
|height
|characters
|children
|xscroll
|yscroll
- comparator:
<
|below
|under
|<=
|max
|==
|equals
|>=
|min
|>
|above
|over
- breakpoint:
number
div if width above 500 {}
input if characters under 1 {}
- operator:
@
- comparator:
<
|below
|under
|<=
|max
|==
|equals
|>=
|min
|>
|above
|over
- breakpoint:
number
- condition:
width
|height
|characters
|children
|xscroll
|yscroll
div @ above 500 width {}
input @ under 1 characters {}
In both phrase formats the whitespace between tokens is optional, this means that if you prefer to think about these as @above
or @min
you can express them that way. The following should all equivalent:
div if width >= 500 {}
div if width >=500 {}
div if width min 500 {}
div @min 500 width {}
div@min500width{}
div @ >=500 width {}
The queries parsed by QSS would be split into the following pieces:
- selector list
- rule block (or stylesheet?)
- comparator
- condition
- breakpoint
And these could be used to construct Element Queries in syntaxes like:
- EQCSS
- Selectory
- and using functions like the container query mixin
Essentially QSS acts as a syntax to abstract away writing these: Useful Tests for JS-powered Styling