include-media
include-media copied to clipboard
Container Queries?
@container
queries just landed in Chromium and Firefox, now covering most evergreen browsers. https://caniuse.com/?search=container
Does include-media provide a facility for using them? If not yet, would you consider adding it?
@andreimoment Its just unit support for cqw, cqh, cqi, cqb, cqmin, cqmax
right? any others we need to consider?
@jackmcpickle I think the main addition is the @container
query - I don't think this is related to specific units.
@container
query is the equivalent of an @media
query but based on the size of an ancestor div / containing element and not on the browser's windows size.
A good example by Rachel Andrew - shows the same card displayed in two places - and the card reflows based on the parent element width, not the screen width: https://codepen.io/rachelandrew/pen/NWdaxde
One more nuance of container queries is that the @container
query can specify a named ancestor (to overcome the limit of only working with the immediate ancestor). The name of the ancestor is specified in the ancestor's CSS.
I think it would be great to be able to specify dimensions for @container
in a format similar to @include media(">phone", "<=tablet")
- that would probably be something like @include container(">33ch", "<=60ch")
- and now that I think about it, might be a separate library?
I'll be happy to contribute - let me know how I can help.
Details:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries https://developer.mozilla.org/en-US/docs/Web/CSS/@container https://developer.mozilla.org/en-US/docs/Web/CSS/container-name
Yes you're right. I think it makes sense to add it in here. I can look at over the weekend, or feel free to have a crack and submit a PR. 😉
We are speaking of creating @mixin container($conditions...) {
, correct?
Yes probably initially just to @container (width > 400px) {}
and a part 2 to support the named containers @container sidebar (width > 400px) {}
How would you approach the named container api? A mixin needs all of its variables in the variables section.
I was thinking along the by lines of (… “named: thename”) as a parameter.
Yeah lets start with that.
Input
@include container(">=tablet") {
width: 50%;
}
output
@container (min-width: 768px) {
width: 50%;
}
and named
Input
@include container("named: sidebar", ">=tablet") {
width: 50%;
}
output
@container sidebar (min-width: 768px) {
width: 50%;
}
ideally we can drop the named:
part and just treat as special case.
@andreimoment added PR for initial container queries. Basically the same as media, since is does all the same stuff. If you could have a look and test on your end that would be great.
there is probably a better way, but this seems to work as a draft. @andreimoment , could you test please? You should be able to patch it into your _include-media.scss:
/// @example scss - Mixing everything
/// @include container('>=350px', '<tablet') { }
///
/// or the first argument can be the named container
/// @include container(':named-container', '>=350px', '<tablet') { }
///
@mixin container($conditions...) {
@if ($im-media-support and list.length($conditions)==0) {
@content;
}
@else if (not $im-media-support and im-intercepts-static-breakpoint($conditions...)) {
@content;
}
@else if ($im-media-support and list.length($conditions) > 0) {
$first-condition: list.nth($conditions, 1);
$first-character: string.slice($first-condition, 1, 1);
$container-name: "" !default;
@if ($first-character ==':') {
$container-name : str-slice($first-condition, 2, -1);
}
@if ($container-name =="") {
@container #{string.unquote(parse-expression($first-condition))} {
$actual_conditions: slice($conditions, 2);
@include container($actual_conditions...) {
@content;
}
}
}
@else {
@container #{string.unquote($container-name)} #{string.unquote(parse-expression(list.nth($conditions, 2)))} {
$actual_conditions: slice($conditions, 3);
@if (list.length($actual_conditions) > 0) {
@include container($first-condition, $actual_conditions...) {
@content;
}
}
@else {
@content;
}
}
}
}
}
I have a fork here as well @eduardoboucas , please let me know if this is okay to send as PR.
https://github.com/basaran/include-media