proposal: [CSS-cascade] import only in moment when we need it. #3050

ghost · 2018-08-24T17:10:36Z

I have suggestion/proposal:
I think, it's awkward when browser is downloading all styles included print styles, also in situation when user will not print page. So I want add something like "only-if" rule to @import...

like we have:
@import url("print.css") print;
I think we can have:
@import url("print.css") only-if("print");

or something like that.
It mean print.css will be downloaded only after user on page click on print button. Now it's impossible without JS or serverside to do that. So it's uselessly downloading styles, which user doesn't need in this moment.

(sry for my bad English).

https://www.w3.org/TR/css-cascade-3/

The text was updated successfully, but these errors were encountered:

Loirooriol · 2018-08-24T17:24:26Z

https://drafts.csswg.org/css-cascade-3/#at-import already says

If the media query does not match, the rules in the imported stylesheet do not apply, exactly as if the imported stylesheet were wrapped in an @media block with the given media query. User agents may therefore avoid fetching a media-dependent import as long as the media query does not match

tabatkins · 2018-08-24T18:36:07Z

@Loirooriol That doesn't answer the OP's question; it says browsers may avoid fetching such a stylesheet. In practice, tho, browsers have to fetch them, because web-compat depends on stylesheets quickly exposing a CSSStyleSheet when MQs change (rather than a null that's later swapped out for a CSSStyleSheet).

On the other hand, a supports() function after the @import does require that the stylesheet not be fetched if it doesn't match, because support conditions dont' change over a page's lifetime; they'll either be always false or always true.

So we don't currently have a way to define that a stylesheet shouldn't be fetched if a MQ doesn't match. That's something we should probably support somehow, tho. (And carry over to <link rel=stylesheet>.)

ghost · 2018-08-24T19:09:50Z

Request URL: http://127.0.0.1:8080/edsa-HTTP/web-dev/style/print.css
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:8080
Referrer Policy: no-referrer-when-downgrade
Accept-Ranges: bytes
Connection: Keep-Alive
Content-Length: 171
Content-Type: text/css
Date: Fri, 24 Aug 2018 19:08:18 GMT
ETag: "ab-573c707cbfd20"
Keep-Alive: timeout=5, max=99
Last-Modified: Sun, 19 Aug 2018 10:12:30 GMT
Server: Apache/2.4.25 (Win32) PHP/5.6.30
Accept: text/css,*/*;q=0.1
Accept-Encoding: gzip, deflate, br
Accept-Language: sk-SK,sk;q=0.9,cs;q=0.8,en-US;q=0.7,en;q=0.6
Cache-Control: no-cache
Connection: keep-alive
Cookie: PHPSESSID=nlqkaupdbidhhsafipi128k9p6
Host: 127.0.0.1:8080
Pragma: no-cache
Referer: http://127.0.0.1:8080/edsa-HTTP/web-dev/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

print.css is downloaded in every browser, if I use

@import url("print.css") print; on my page

something about it is there: https://www.nccgroup.trust/uk/about-us/newsroom-and-events/blogs/2014/october/does-a-print-css-file-slow-your-site-down/?utm_source=marketing&utm_medium=rd0517

tabatkins · 2018-08-24T19:11:03Z

Yup, that's what I said.

ghost · 2018-08-24T19:14:50Z

now we must do it over JS by two ways.... dynamicalli innerHTML style tag to head, or do something like this:

function vytisknout(htmlKod, titulek) {
    var w = 800,
        h = 600,
        left = (window.screen.width - w) / 2,
        top = (window.screen.height - h) / 2;
    var okno = window.open(
        '', 
        'oknoTisk', 
        "height=" + h + ", width=" + w + 
        ", left=" + left + ", top=" + top + 
        ", location=no, menubar=yes, status=no, toolbar=no, scrollbars=yes, resizable=yes");
    okno.document.write(
      '<!doctype html><meta charset="utf-8"><title>' + 
      titulek + 
      '</title>'
      ...
    );
    okno.document.write(htmlKod);
    okno.document.close();
    okno.focus();
    okno.print();
    okno.close();
}

dbaron · 2018-08-24T19:45:31Z

@hsivonen has raised similar issues in the past, with style sheets and media queries generally. He might have pointers to previous discussions...

Loirooriol · 2018-08-24T23:03:59Z

In practice, tho, browsers have to fetch them, because web-compat

If fetching stylesheets can't be avoided, I think the spec shouldn't say it may be avoided.

emilio · 2018-08-26T11:40:13Z

Note that Blink (and WebKit, I think) don't fetch <link> stylesheets with the disabled attribute by default... I think it's a bug, and Blink's behavior is really inconsistent there: See whatwg/html#3840

tabatkins · 2018-08-30T23:05:43Z

Possible solutions:

add a keyword (async?) that goes after the url() and before the MQ (or maybe on either side of the MQ), which indicates the stylesheet can be loaded whenever (and specifically, when the condition actually matches).
add a media() function that takes a MQ, and implicitly gives it this async behavior (like supports() has)

css-meeting-bot · 2018-10-23T13:44:19Z

The CSS Working Group just discussed CSS Cascade.

The full IRC log of that discussion

<gregwhitworth> Topic: CSS Cascade
<gregwhitworth> TabAtkins: Did I add this?
<gregwhitworth> TabAtkins: ok ok ok
<gregwhitworth> TabAtkins: ah
<gregwhitworth> TabAtkins: people want to only be able to import styles based on MQs
<jensimmons> link?
<gregwhitworth> TabAtkins: but for reasons, we don't actually block downloading
<gregwhitworth> TabAtkins: we have to go down the styles
<gregwhitworth> TabAtkins: the web depends on them being walked
<Rossen> github: https://github.com//issues/3050
<gregwhitworth> TabAtkins: so, people still want this
<gregwhitworth> TabAtkins: leave the downloads only for devices that need them, etc
<gregwhitworth> TabAtkins: @supports is a good example of this
<gregwhitworth> TabAtkins: the proposal - the two that I have are either a: keyword like async after url()
<gregwhitworth> TabAtkins: this indicates the stylesheet can be loaded async
<gregwhitworth> TabAtkins: or we can add a media function similar to supports, the old will be forced function but this one will only occur when the method is satisfied
<gregwhitworth> TabAtkins: does this seems like a good possilbities, if so which do you prefer?
<gregwhitworth> myles: kind of like device width, if you resize the browser it will only fetch as you resize
<gregwhitworth> TabAtkins: yes, it's bad to put it on things that are likely to change
<gregwhitworth> heycam: I think it seems reasonable to add support for this - the media function doesn't seem like the best approach
<gregwhitworth> heycam: for print I'm not even sure
<gregwhitworth> heycam: you hit cntrl+p and having to print
<gregwhitworth> heycam: do you have any other scenarios
<gregwhitworth> jensimmons: I'm very skeptical about this
<gregwhitworth> jensimmons: I think it's a thing we want to think about deeply
<gregwhitworth> jensimmons: there are many ways that people do to make it so that it's faster
<emilio> q+
<gregwhitworth> jensimmons: some of them are terrible
<emilio> o rly?
<gregwhitworth> jensimmons: some of them make far more CSS, I'm not sure of anything but we don't want to do it too quickly
<astearns> zakim, open queue
<Zakim> ok, astearns, the speaker queue is open
<gregwhitworth> jensimmons: offering the tool - it will have a huge impact on how people work with CSS
<gregwhitworth> jensimmons: now the industry is straining about CSS performance and it's getting kind of scary
<gregwhitworth> jensimmons: it's something we really want to explore - but we should dig into all of the aspects and not ship too quickly when the industry moves to a different approach that negates the investments here
<gregwhitworth> emilio: why do we need to add import instead of link
<gregwhitworth> TabAtkins: right now link rel=stylesheet doesn't have async
<gregwhitworth> TabAtkins: whatever changes we have here we'll want to port over there as well
<gregwhitworth> jensimmons: you know what I might be saying is that I want to engage with a CG with more webdevs
<gregwhitworth> emilio: we rely on import, and others rely on that
<gregwhitworth> emilio: ...
<gregwhitworth> TabAtkins: one thing I'm running into - this might want to be, more complicated
<gregwhitworth> TabAtkins: rather than just @supports
<gregwhitworth> TabAtkins: and import stays how it is
<gregwhitworth> emilio: what is the context of why?
<gregwhitworth> emilio: why do we load print stylesheets even if we aren't printing
<gregwhitworth> TabAtkins: the reason we do it now is because people expect this to be the way it always has been
<gregwhitworth> TabAtkins: back in the day we didn't have promises for these types of things
<gregwhitworth> TabAtkins: this will avoid some of our issues
<gregwhitworth> TabAtkins: this is getting more complicated - let's WICG it, let's do what jen said
<gregwhitworth> TabAtkins: that sounds reasonable to me
<gregwhitworth> emilio: there is a way to do this in webkit, the .disable factory
<gregwhitworth> emilio: it won't load it
<gregwhitworth> emilio: it feels like I've filed various issues on that
<gregwhitworth> emilio: if we could agree on that - we could get web developers ideas on it, no need for something new
<gregwhitworth> TabAtkins: that functionality doesn't work on import
<gregwhitworth> emilio: I was hoping to not have to do this on import
<gregwhitworth> TabAtkins: yeah we should though
<gregwhitworth> emilio: we don't support all security on that either
<gregwhitworth> TabAtkins: we should
<gregwhitworth> Resolved: Move this to WICG

tabatkins · 2018-10-23T13:45:12Z

Resolution was to open up a WICG repo to solve this issue, and some surrounding issues around <link rel=stylesheet> and @import.

ghost · 2018-10-25T15:40:05Z

I think, there can be exception, if media type is screen, then always download all CSS (because browser window on screen is resizable), if media type is not screen, then let programmer to choose if he want download CSS in load, or later by async request.

Now it's pointless, when browser is downloading CSS for one media type, if user will browsing website on another media type (Styles for TV on handheld device for example), and I suppose, CSS will have in future more media types.

(sry for my English)

tabatkins · 2018-10-29T18:25:01Z

Actually, we're removing the media types. ^_^ The only media types that still matter are screen and print; everything else is deprecated. (And I wish we could kill print in favor of some MQs that more accurately capture the environment, but it's too widely used.)

ExE-Boss · 2018-11-07T23:18:55Z

Well, print could probably be made async and only fetched when needed (since most people probably don’t print most pages they visit).

ghost changed the title ~~[CSS-import] import only in moment when we need it.~~ proposal: [CSS-import] import only in moment when we need it. Aug 24, 2018

tabatkins added the css-cascade-4 Current Work label Aug 24, 2018

ghost changed the title ~~proposal: [CSS-import] import only in moment when we need it.~~ proposal: [CSS-cascade] import only in moment when we need it. Aug 24, 2018

tabatkins added the Agenda+ F2F label Aug 30, 2018

tabatkins removed the Agenda+ F2F label Oct 23, 2018

tabatkins self-assigned this Oct 24, 2018

tabatkins added the Needs Edits label Oct 29, 2018

fantasai added css-cascade-5 and removed css-cascade-4 Current Work labels Nov 26, 2018

fantasai added css-cascade-6 and removed css-cascade-5 labels Mar 17, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

proposal: [CSS-cascade] import only in moment when we need it. #3050

proposal: [CSS-cascade] import only in moment when we need it. #3050

ghost commented Aug 24, 2018 •

edited by ghost

Loirooriol commented Aug 24, 2018

tabatkins commented Aug 24, 2018

ghost commented Aug 24, 2018 •

edited by ghost

tabatkins commented Aug 24, 2018

ghost commented Aug 24, 2018 •

edited by ghost

dbaron commented Aug 24, 2018

Loirooriol commented Aug 24, 2018

emilio commented Aug 26, 2018

tabatkins commented Aug 30, 2018

css-meeting-bot commented Oct 23, 2018

tabatkins commented Oct 23, 2018

ghost commented Oct 25, 2018 •

edited by ghost

tabatkins commented Oct 29, 2018

ExE-Boss commented Nov 7, 2018 •

edited

proposal: [CSS-cascade] import only in moment when we need it. #3050

proposal: [CSS-cascade] import only in moment when we need it. #3050

Comments

ghost commented Aug 24, 2018 • edited by ghost

Loirooriol commented Aug 24, 2018

tabatkins commented Aug 24, 2018

ghost commented Aug 24, 2018 • edited by ghost

tabatkins commented Aug 24, 2018

ghost commented Aug 24, 2018 • edited by ghost

dbaron commented Aug 24, 2018

Loirooriol commented Aug 24, 2018

emilio commented Aug 26, 2018

tabatkins commented Aug 30, 2018

css-meeting-bot commented Oct 23, 2018

tabatkins commented Oct 23, 2018

ghost commented Oct 25, 2018 • edited by ghost

tabatkins commented Oct 29, 2018

ExE-Boss commented Nov 7, 2018 • edited

ghost commented Aug 24, 2018 •

edited by ghost

ghost commented Aug 24, 2018 •

edited by ghost

ghost commented Aug 24, 2018 •

edited by ghost

ghost commented Oct 25, 2018 •

edited by ghost

ExE-Boss commented Nov 7, 2018 •

edited