Intent to Ship: CSS supports() condition for @import

[Daniil Sakhapov]

Contact emails

sakh...@chromium.org

Specification

https://www.w3.org/TR/css-cascade-5/#conditional-import

Summary

It allows to import stylesheets and layers conditioned on supports(). If the support() doesn't match, the import will not be fetched.

Example: @import "mystyle.css" supports(display: flex);

Blink component

Blink>CSS

TAG review

None

TAG review status

Not applicable

Risks

Interoperability and Compatibility

None

Gecko: Shipped/Shipping

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/279)

Web developers: No signals

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes

https://wpt.fyi/results/css/css-cascade/import-conditions.html https://wpt.fyi/css/cssom/cssimportrule.html

Flag name on chrome://flags

CSSSupportsForImportRules

Requires code in //chrome?

False

Estimated milestones

DevTrial on desktop

121

DevTrial on Android

121

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5899007704694784

This intent message was generated by Chrome Platform Status.

[Yoav Weiss]

LGTM1

While I'm not excited about @import in general and think no one should use it, this restricts it in potentially useful ways.

[Noam Rosenthal]

One open issue that I didn't see mentioned and is worth noting, is a missing equivalent in <link> elements (similar to <link media=...>. This creates an inconsistency where you can have conditional imports in CSS but not directly from HTML. This is mentioned in https://github.com/whatwg/html/issues/7540. Not saying it should block shipping, but rather that it should be considered an open issue.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/13305766-65c8-427c-85a4-fc457c855bf0n%40chromium.org.

[Daniil Sakhapov]

Yes, thanks, I saw this discussion and will keep my eye on it. So, once the solution for back comp is found there, I'll work on it.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

[Yoav Weiss]

I wonder if we should hold off on adding @import support until such a solution emerges.

In any case, similar to layer support, you probably want to add tests that make sure that the preload scanner is properly preloading such inlined rules, and want to make sure that developer facing advice clarifies the huge cost of using this in external styles. 

[Yoav Weiss]

On Wed, Nov 29, 2023 at 4:34 PM Yoav Weiss <yoav...@chromium.org> wrote:

I wonder if we should hold off on adding @import support until such a solution emerges.

On second thought, since we didn't delay `layer`, there's no real reason to delay shipping here. 

But I strongly urge you to nudge this along :)

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

[Chris Harrelson]

LGTM2

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAL5BFfWeRMY60Cy9O41RL22xC-A_BNFYtOQkc3CyY5qnUkZAsQ%40mail.gmail.com.

[Daniel Bratell]

LGTM3

/Daniel

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw91-1jFaA0Xw7e_EoD__g2ph-AC0%3DAisoYN4keDzfJ6ow%40mail.gmail.com.