Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Mlocik97-issues opened this issue Aug 24, 2018 · 14 comments

Comments

Projects
None yet
8 participants
@Mlocik97-issues
Copy link

commented Aug 24, 2018

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/

@Mlocik97-issues Mlocik97-issues 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

@Loirooriol

This comment has been minimized.

Copy link
Collaborator

commented Aug 24, 2018

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

This comment has been minimized.

Copy link
Member

commented Aug 24, 2018

@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>.)

@Mlocik97-issues

This comment has been minimized.

Copy link
Author

commented Aug 24, 2018

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

This comment has been minimized.

Copy link
Member

commented Aug 24, 2018

Yup, that's what I said.

@Mlocik97-issues

This comment has been minimized.

Copy link
Author

commented Aug 24, 2018

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();
}

@Mlocik97-issues Mlocik97-issues 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

@dbaron

This comment has been minimized.

Copy link
Member

commented Aug 24, 2018

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

@Loirooriol

This comment has been minimized.

Copy link
Collaborator

commented Aug 24, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Aug 26, 2018

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

This comment has been minimized.

Copy link
Member

commented Aug 30, 2018

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

This comment has been minimized.

Copy link
Member

commented Oct 23, 2018

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

This comment has been minimized.

Copy link
Member

commented Oct 23, 2018

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

@tabatkins tabatkins removed the Agenda+ F2F label Oct 23, 2018

@tabatkins tabatkins self-assigned this Oct 24, 2018

@Mlocik97-issues

This comment has been minimized.

Copy link
Author

commented Oct 25, 2018

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

This comment has been minimized.

Copy link
Member

commented Oct 29, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Nov 7, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.