- From: Thomas Steiner via GitHub <sysbot+gh@w3.org>
- Date: Thu, 05 Sep 2019 12:23:40 +0000
- To: public-css-archive@w3.org
Thanks for discussing this proposal. Some remarks based on the IRC logs.
> Media queries are supposed to be dynamic & can cause page changes.
Google Search in a not logged in session currently contains… <details>
<summary>…about 23kb of inlined CSS.</summary>
<pre><code>
@-webkit-keyframes gb__a{0%{opacity:0}50%{opacity:1}}@keyframes gb__a{0%{opacity:0}50%{opacity:1}}.gb_za{display:none!important}.gb_Aa{visibility:hidden}.gb_c .gbqfi::before{left:-428px;top:0}.gb_Qb .gbqfb:focus .gbqfi{outline:1px dotted #fff}.gb_c .gb_y .gb_z::before,.gb_c.gb_A .gb_y .gb_z::before{left:-132px;top:-38px}.gb_c.gb_h .gb_y .gb_z::before{left:-463px;top:-35px}.gb_Qb .gb_F{position:relative}.gb_y .gb_z:hover,.gb_y .gb_z:focus{opacity:.85}.gb_h .gb_y .gb_z:hover,.gb_h .gb_y .gb_z:focus{opacity:1}@media (min-resolution:1.25dppx),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25){.gb_M .gb_m{background-image:url('https://ssl.gstatic.com/gb/images/p2_547d5a41.png')}}.gb_c .gb_tc .gb_vc::before{left:0;top:-35px}.gb_c.gb_h .gb_tc .gb_vc::before{left:-296px;top:0}.gb_c.gb_A .gb_tc .gb_vc::before{left:-97px;top:0}.gb_c .gb_ma{background-image:none!important}.gb_c .gb_wc{visibility:visible}.gb_Qb .gb_qe span{background:transparent}.gb_Od{color:#ffffff;font-size:13px;font-weight:bold;height:25px;line-height:19px;padding-top:5px;padding-left:12px;position:relative;background-color:#4d90fe}.gb_Od .gb_Pd{color:#ffffff;cursor:default;font-size:22px;font-weight:normal;position:absolute;right:12px;top:5px}.gb_Od .gb_td,.gb_Od .gb_qd{color:#ffffff;display:inline-block;font-size:11px;margin-left:16px;padding:0 8px;white-space:nowrap}.gb_Qd{background:none;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0.16)),to(rgba(0,0,0,0.2)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.16),rgba(0,0,0,0.2));background-image:linear-gradient(top,rgba(0,0,0,0.16),rgba(0,0,0,0.2));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.16),rgba(0,0,0,0.2));border-radius:2px;border:1px solid #dcdcdc;border:1px solid rgba(0,0,0,0.1);cursor:default!important;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#160000ff,endColorstr=#220000ff);text-decoration:none!important;-webkit-border-radius:2px}.gb_Qd:hover{background:none;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0.14)),to(rgba(0,0,0,0.2)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.14),rgba(0,0,0,0.2));background-image:linear-gradient(top,rgba(0,0,0,0.14),rgba(0,0,0,0.2));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.14),rgba(0,0,0,0.2));border:1px solid rgba(0,0,0,0.2);box-shadow:0 1px 1px rgba(0,0,0,0.1);-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.1);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#14000000,endColorstr=#22000000)}.gb_Qd:active{box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.3)}.gb_kd.gb_ld{padding:0}.gb_ld .gb_B{background:#ffffff;border:solid 1px transparent;-webkit-border-radius:8px;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:16px;right:0;top:72px;-webkit-box-shadow:0 1px 2px 0 rgba(65,69,73,0.3),0 3px 6px 2px rgba(65,69,73,0.15);box-shadow:0 1px 2px 0 rgba(65,69,73,0.3),0 3px 6px 2px rgba(65,69,73,0.15)}a.gb_md{color:#5f6368!important;font-size:22px;height:24px;opacity:1;padding:8px;position:absolute;right:8px;top:8px;text-decoration:none!important;width:24px}a.gb_md:focus,a.gb_md:active,a.gb_md:focus:hover{background-color:#e8eaed;-webkit-border-radius:50%;border-radius:50%;outline:none}a.gb_md:hover{background-color:#f1f3f4;-webkit-border-radius:50%;border-radius:50%;outline:none}svg.gb_nd{fill:#5f6368;opacity:1}.gb_od{padding:0;white-space:normal;display:table}.gb_pd{line-height:normal;font-family:Roboto,RobotoDraft,Helvetica,Arial,sans-serif}.gb_ld .gb_5:active{outline:none;-webkit-box-shadow:0 4px 5px rgba(0,0,0,.16);box-shadow:0 4px 5px rgba(0,0,0,.16)}.gb_1.gb_qd.gb_rd{-webkit-border-radius:4px;border-radius:4px;cursor:pointer;height:16px;color:#5f6368;font-family:Google Sans,Roboto,RobotoDraft,Helvetica,Arial,sans-serif;font-weight:500;letter-spacing:.25px;line-height:16px;padding:8px 6px;text-transform:none;-webkit-font-smoothing:antialiased}.gb_1.gb_qd:hover{background-color:#f8f9fa}.gb_1.gb_qd:focus,.gb_1.gb_qd:hover:focus{background-color:#f1f3f4;border-color:transparent}.gb_1.gb_qd:active{background-color:#f1f3f4;-webkit-box-shadow:0 1px 2px 0 rgba(60,64,67,0.3),0 1px 3px 1px rgba(60,64,67,0.15);box-shadow:0 1px 2px 0 rgba(60,64,67,0.3),0 1px 3px 1px rgba(60,64,67,0.15)}.gb_jd{color:#5f6368;font-family:Roboto,RobotoDraft,Helvetica,Arial,sans-serif;font-size:14px;letter-spacing:.25px;line-height:20px;margin:0;margin-bottom:5px}.gb_sd{text-align:right;font-size:14px;padding-bottom:0;white-space:nowrap}.gb_sd .gb_td{margin-left:12px;text-transform:none}a.gb_5.gb_td:hover{background-color:#2b7de9;border-color:transparent;-webkit-box-shadow:0 1px 2px 0 rgba(66,133,244,0.3),0 1px 3px 1px rgba(66,133,244,0.15);box-shadow:0 1px 2px 0 rgba(66,133,244,0.3),0 1px 3px 1px rgba(66,133,244,0.15)}a.gb_5.gb_td:focus,a.gb_5.gb_td:hover:focus{background-color:#5094ed;border-color:transparent;-webkit-box-shadow:0 1px 2px 0 rgba(66,133,244,0.3),0 1px 3px 1px rgba(66,133,244,0.15);box-shadow:0 1px 2px 0 rgba(66,133,244,0.3),0 1px 3px 1px rgba(66,133,244,0.15)}a.gb_5.gb_td:active{background-color:#63a0ef;-webkit-box-shadow:0 1px 2px 0 rgba(66,133,244,0.3),0 1px 3px 1px rgba(66,133,244,0.15);box-shadow:0 1px 2px 0 rgba(66,133,244,0.3),0 1px 3px 1px rgba(66,133,244,0.15)}.gb_sd .gb_td.gb_ud{padding-left:6px;padding-right:14px}.gb_sd .gb_rd.gb_td img{background-color:inherit;-webkit-border-radius:initial;border-radius:initial;height:18px;margin:0 8px 0 4px;vertical-align:text-top;width:18px}.gb_vd .gb_od .gb_wd .gb_rd{border:2px solid transparent}.gb_vd .gb_od .gb_wd .gb_rd:focus:after,.gb_vd .gb_od .gb_wd .gb_rd:hover:after{background-color:transparent}.gb_pd{background-color:#404040;color:#fff;padding:16px;position:absolute;top:36px;min-width:328px;max-width:650px;right:0;-webkit-border-radius:2px;border-radius:2px;-webkit-box-shadow:4px 4px 12px rgba(0,0,0,0.4);box-shadow:4px 4px 12px rgba(0,0,0,0.4)}.gb_pd a,.gb_pd a:visited{color:#5e97f6;text-decoration:none}.gb_xd{text-transform:uppercase}.gb_yd{padding-left:50px}.gb_zd{color:#3c4043;font-family:Google Sans,Roboto,RobotoDraft,Helvetica,Arial,sans-serif;font-size:16px;font-weight:500;letter-spacing:.1px;line-height:20px;margin:0;margin-bottom:12px}.gb_jd a.gb_Bd{text-decoration:none;color:#5e97f6}.gb_jd a.gb_Bd:visited{color:#5e97f6}.gb_jd a.gb_Bd:hover,.gb_jd a.gb_Bd:active{text-decoration:underline}.gb_Cd{position:absolute;background:transparent;top:-999px;z-index:-1;visibility:hidden;margin-top:1px;margin-left:1px}#gb .gb_ld{margin:0}.gb_ld .gb_tb{background:#4d90fe;border:2px solid transparent;-webkit-box-sizing:border-box;box-sizing:border-box;font-weight:500;margin-top:21px;min-width:70px;text-align:center;-webkit-font-smoothing:antialiased}.gb_ld a.gb_5{background:#1a73e8;-webkit-border-radius:4px;border-radius:4px;color:#ffffff;font-family:Google Sans,Roboto,RobotoDraft,Helvetica,Arial,sans-serif;font-size:14px;font-weight:500;letter-spacing:.25px;line-height:16px;padding:8px 22px;-webkit-font-smoothing:antialiased}.gb_ld a.gb_5.gb_Dd{background:#d93025}.gb_ld a.gb_5.gb_Dd:hover{background-color:#cc3127}.gb_ld a.gb_5.gb_Dd:focus,.gb_ld a.gb_5.gb_Dd:focus:hover{background-color:#b3332c}.gb_ld a.gb_5.gb_Dd:active,.gb_ld a.gb_5.gb_Dd:focus:active{background-color:#a6342e}.gb_ld:not(.gb_vd) a.gb_5{float:right}#gb .gb_ld a.gb_tb.gb_tb{color:#ffffff;cursor:pointer}.gb_ld .gb_tb:hover{background:#357ae8;border-color:#2f5bb7}.gb_Ed,.gb_wd{display:table-cell}.gb_Ed{vertical-align:middle}.gb_Ed img{height:48px;padding-left:4px;padding-right:20px;width:48px}.gb_wd{padding-left:13px;width:100%}.gb_ld .gb_wd{padding-top:4px;min-width:326px;padding-left:0;width:326px}.gb_ld.gb_Fd .gb_wd{min-width:254px;width:254px}.gb_ld:not(.gb_vd) .gb_wd{padding-top:32px}.gb_Hd{display:block;display:inline-block;padding:1em 0 0 0;position:relative;width:100%}.gb_Id{color:#ff0000;font-style:italic;margin:0;padding-left:46px}.gb_Hd .gb_Jd{float:right;margin:-20px 0;width:-webkit-calc(100% - 46px);width:calc(100% - 46px)}.gb_Kd svg{fill:grey}.gb_Kd.gb_Ld svg{fill:#4285f4}.gb_Hd .gb_Jd label:after{background-color:#4285f4}.gb_Kd{display:inline;float:right;margin-right:22px;position:relative;top:2px}.gb_Sf{margin-bottom:32px;font-size:small}.gb_Sf .gb_Tf{margin-right:5px}.gb_Sf .gb_Uf{color:red}.gb_9c{display:none}.gb_9c.gb_Ic{display:block}.gb_ad{background-color:#fff;-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.08);box-shadow:0 1px 0 rgba(0,0,0,0.08);color:#000;position:relative;z-index:986}.gb_bd{height:40px;padding:16px 24px;white-space:nowrap}.gb_cd{position:fixed;bottom:16px;padding:16px;right:16px;white-space:normal;width:328px;-webkit-transition:width .2s,bottom .2s,right .2s;transition:width .2s,bottom .2s,right .2s;-webkit-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 5px 5px -3px rgba(0,0,0,0.2),0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12);box-shadow:0 5px 5px -3px rgba(0,0,0,0.2),0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12)}@media (max-width:400px){.gb_ad.gb_cd{max-width:368px;width:auto;bottom:0;right:0}}.gb_ad .gb_tb{border:0;font-weight:500;font-size:14px;line-height:36px;min-width:32px;padding:0 16px;vertical-align:middle}.gb_ad .gb_tb:before{content:'';height:6px;left:0;position:absolute;top:-6px;width:100%}.gb_ad .gb_tb:after{bottom:-6px;content:'';height:6px;left:0;position:absolute;width:100%}.gb_ad .gb_tb+.gb_tb{margin-left:8px}.gb_dd{height:48px;padding:4px;margin:-8px 0 0 -8px}.gb_cd .gb_dd{float:left;margin:-4px}.gb_ed{font-family:Roboto,RobotoDraft,Helvetica,Arial,sans-serif;overflow:hidden;vertical-align:top}.gb_bd .gb_ed{display:inline-block;padding-left:8px;width:640px}.gb_cd .gb_ed{display:block;margin-left:56px;padding-bottom:16px}.gb_fd{background-color:inherit}.gb_bd .gb_fd{display:inline-block;position:absolute;top:18px;right:24px}.gb_cd .gb_fd{text-align:right;padding-right:24px;padding-top:6px}.gb_fd .gb_gd{height:1.5em;margin:-.25em 10px -.25em 0;vertical-align:text-top;width:1.5em}.gb_hd{line-height:20px;font-size:16px;font-weight:700;color:rgba(0,0,0,.87)}.gb_cd .gb_hd{color:rgba(0,0,0,.87);font-size:16px;line-height:20px;padding-top:8px}.gb_bd .gb_hd,.gb_bd .gb_id{width:640px}.gb_id .gb_jd,.gb_id{line-height:20px;font-size:13px;font-weight:400;color:rgba(0,0,0,.54)}.gb_cd .gb_id .gb_jd{font-size:14px}.gb_cd .gb_id{padding-top:12px}.gb_cd .gb_id a{color:rgba(66,133,244,1)}.gb_Qb .gb_Va{border:0;border-left:1px solid rgba(0,0,0,.2);border-top:1px solid rgba(0,0,0,.2);height:14px;width:14px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.gb_Qb .gb_Ua{border:0;border-left:1px solid rgba(0,0,0,.2);border-top:1px solid rgba(0,0,0,.2);height:14px;width:14px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-color:#fff;background:#fff}.gb_c .gb_ug::before{clip:rect(25px 235px 41px 219px);left:-197px;top:-3px}.gb_c .gb_vc.gb_vg{position:absolute}.gb_c .gb_vg::before{clip:rect(0 210px 16px 194px);left:-164px;top:22px}.gb_c .gb_La .gb_ug::before{left:-189px}@media (min-resolution:1.25dppx),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25){.gb_c .gb_ug::before{clip:rect(50px 470px 82px 438px)}.gb_c .gb_vg::before{clip:rect(0 420px 32px 388px)}}.gb_c .gb_vc,.gb_c .gbii,.gb_c .gbip{background-image:none;overflow:hidden;position:relative}.gb_c .gb_vc::before{content:url('//ssl.gstatic.com/gb/images/i1_1967ca6a.png');position:absolute}@media (min-resolution:1.25dppx),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25){.gb_c .gb_vc::before{content:url('//ssl.gstatic.com/gb/images/i2_2ec824b0.png');-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0}}.gb_Qb a:focus{outline:1px dotted #fff!important}sentinel{}
</code></pre>
</details>
The idea of this proposal definitely is to still support dynamic switching, simply by deferring the loading of CSS for the currently not needed mode.
> I disagree that changing downloads is a minor benefit. Could help make sure that initial payload is as small as possible, good for many use cases.
Keeping the initial payload small is indeed crucial for high traffic sites like Google Search.
> Already, sites can *try* to do this by setting server cookies based on previous MQ results. That's more likely to mess things up than using HTTP headers.
Very much true, especially now that automatic color scheme switching has become a thing in both Catalina and iOS 13, and now that Android 10 toggles dark theme when battery safer is on, we expect the preference to change non-predictably, so storing the value in cookies definitely would make things worse.
> LMK if there's a noJS version of G properties that has well designed CSS for normal/dark mode
You can try [support.google.com](https://support.google.com/), which has a manual theme mode switcher (at the very bottom). It does a full refresh, though.
> Another concern is privacy. If we allow this on HTTP as well as HTTPS, preferences get leaked everywhere.
Client Hints currently makes the [following requirements](https://httpwg.org/http-extensions/client-hints.html#accept-ch) (emphasis mine): *"The opt-in SHOULD be persisted and bound to the origin to enable delivery of Client Hints on subsequent requests to the server’s origin, and **MUST NOT be persisted for an origin that isn’t HTTPS**"*.
> The idea of only shipping a subset of your CSS and JS means that you'll have to hit the network if e.g. the user swaps from dark to light mode.
As outlined above, we see this as an advantage (i.e., the argument being to keep the initial payload small).
> And you'll have to write JS code in your page to fetch the new style.
This can be circumvented by leveraging the `media` attribute on `<link>`, or by leveraging an `@import` CSS at-rule with a media query.
Happy to try to answer more questions the group may have. Apologies if the above responses potentially were a bit off, it was hard to get the full gist regarding the caching discussion by looking at just the IRC logs (*"Some debate on the invalidation logic."*).
--
GitHub Notification of comment by tomayac
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4162#issuecomment-528338446 using your GitHub account
Received on Thursday, 5 September 2019 12:23:42 UTC