Open brandonmcconnell opened 2 weeks ago
Another approach could be to add support for any @property
-defined values inside queries. That would require next to no new actual language changes, but it comes with the caveat that queries would not inherit any changes to those values and could only use their initial
values, which may be more confusing to users.
In that case, such @property
values would need to somehow be definable constant to be meaningful and able to be used in different places meaning the same thing.
Because of this point, an alternative to @property
like @size
may be best after all.
The problem you're solving is just getting a variable that's useful in a "global" sense, yeah? There doesn't appear to be anything size-specific in this proposal; it's just doing substitution, and you happen to only be using that substitution in places that expect a size, but the same functionality could be used for any value.
So this is a dupe of #2627 I think.
@tabatkins The idea here was to make these variables size-specific and limited to lengths, but custom environment variables would take it one step further. I'm definitely a fan of #2627 if that passes. 💯
While size usually consists of width and height, the proposal currently only considers the former.
There is plenty of preexisting content that would allow to identify commonly used terms for breakpoints (as in the example above), so you would not need custom idents but could introduce keywords that authors could set to individual values then, without a need for size()
:
@size {
small: 480px 640px;
medium: 768px 576px;
large: 1024px 720px;
extra-large: 1440px 1080px;
}
@media (min-width: small) {
/* Styles for small and above */
}
@media (width > medium) and (height < large) {
/* Styles for medium to large */
}
Abstract
This proposal introduces the
@size
rule, a new CSS at-rule, that allows authors to define variable sizes which can be referenced in@media
,@custom-media
, and@container
queries alike. This feature offers an easier and more maintainable method to manage responsive design breakpoints across CSS files.Motivation
Responsive design often involves repeatedly using the same viewport breakpoints across multiple media queries. This can lead to cumbersome, error-prone code and make global updates to breakpoints tedious. The
@size
rule aims to solve this by allowing developers to define and reuse named sizes that can be referenced consistently across all media queries.The introduction of
@custom-media
aids in this effort as well, but it stores an entire query, where even in the definition of a@custom-media
query, the use of a reusable variable value would prove useful, as pointed out by @adamwathan on X here:Syntax / Example
Defining Sizes
The
@size
at-rule allows developers to declare named sizes using standard CSS units:Usage in
@media
and@container
QueriesThe named sizes can be used in
@media
,@custom-media
,@container
queries:Specification
Grammar
The
@size
rule must contain a block of rules, each defining a single named size. Each named size must be a valid CSS identifier followed by a colon, a valid CSS length (e.g., px, em, rem, %) or viewport width/height (e.g., vw, vh), and a semicolon.Semantics
Defining Sizes:
@size
at-rule must appear at the outermost level of the style sheet and cannot be nested inside other at-rules or selectors.@size
block is treated as a global variable that can be referenced using thesize()
function.Referencing Sizes:
size()
function takes one argument: the name of the size defined via@size
.size()
must match one of the identifiers defined within an@size
rule.size()
, the rule is invalid and should be ignored by the browser.Benefits
Specification Considerations
[mediaqueries]
spec, but it may be a better fit for a different specification. I invite anyone to offer suggestions for different specifications to label this as.@media-size
but renamed it to@size
to make this arbitrarily supported in@container
queries as well as@media
and@custom-media
queries.Alternative syntax: I can see an argument being made for an alternative syntax like this:
size()
function to be used within property values, enabling styles to reference the defined sizes directly. This would provide a consistent way to use the named sizes across both queries and properties (e.g.width: size(--medium);
).Implementation Considerations
@size
rule and thesize()
function.Conclusion
The
@size
rule introduces a method for defining reusable responsive design breakpoints. By enabling the reuse of named sizes across@media
,@custom-media
, and@container
queries, this proposal aims to simplify the process of maintaining consistent, flexible, and readable responsive styles.