better media query now?

[benjclark]

@media (update: fast)

Chrome: 113 (May 2023) Firefox: 102 (June 2022) Safari: 17 (September 2023) Edge: 113 (May 2023) Opera: 99 (May 2023)

Maybe this is a better media query to use now. What you think @andykirk ?

https://caniuse.com/mdn-css_at-rules_media_update

[andykirk]

Hi, thanks for this. Amazing - somehow I hadn't become aware of this. I haven't looked in it properly or tested it, but should it perhaps be declared as:

<link rel="stylesheet" href="mq-test.css" media="
    only print,
    only all and (update: none),
    only all and (update: slow),
    only all and (update: fast)
">

to catch all supporting browsers regardless of what the browser state / setting is in place?

I can add this to the list, it would be a good 'latest' cut. FYI I've started wrapping main blocks of styles in @supports blocks to cut the CSS more specifically, but this new addition would still be useful.

Thanks

[benjclark]

Thanks @andykirk

That's interesting to hear you have switched over to using @supports. We had been doing some thinking on that as well and were thinking of the following as a possible implementation of CTM:

@import 'core-experience';

// :not - Chrome 88, Firefox 84, Edge 88, Safari 9
// aspect-ratio - Chrome 88, Firefox 89, Edge 88, Safari 15
// margin-block-start - Chrome 69, Firefox 41, Edge 79, Safari 12.1
// gap - Chrome 57, Firefox 52, Edge 16, Safari 10.1
// display: grid - Chrome 55, Firefox 52, Edge 16, Safari 10.1
// CSS variables - Chrome 49, Firefox 31, Edge 16, Safari 10
// object fit - Chrome 32, Firefox 36, Edge 79, Safari 10
// display: flex - Chrome 21, Firefox 28, Edge 12, Safari 9
@supports
(selector(:not(.foo))) and
(aspect-ratio: 1 / 1) and
(margin-block-start: 1rem) and
(gap: 1rem) and
(display: grid) and
(--css: variables) and
(object-fit: cover) and
(display: flex) {

    :root {
        --ctm: true;
    }

    @import 'enhanced-experience';
}

However when I tested that implementation at scale I got some confusing results which suggested that the implementation did not work correctly for a proportion of our users on browsers that should cut the mustard.