Skip to content
This repository has been archived by the owner on Apr 21, 2023. It is now read-only.

<style scoped> is translated to <link rel="stylesheet" scoped> however there is no browser support for the latter #918

Closed
GoogleCodeExporter opened this issue Apr 6, 2015 · 7 comments

Comments

@GoogleCodeExporter
Copy link

What steps will reproduce the problem?
1. open source of https://www.highdefinition.ch/test.html?ModPagespeed=off
2. open source of https://www.highdefinition.ch/test.html
3. look for "scoped", compare

What is the expected output? 
<style scoped="scoped">@import url('/styles/kendo.metroblack.min.css')</style>

What do you see instead?
<link rel="stylesheet" href="/styles/kendo.metroblack.min.css" scoped="scoped"/>

<link scoped> is currently not supported by any browsers. The 
<style>@import</style> workaround has to be used. This translation of mod 
pagespeed is not only useless, it breaks the page.

What version of the product are you using (please check X-Mod-Pagespeed
header)?
X-Mod-Pagespeed: 1.7.30.4-3847

On what operating system?
Fedora 20

Which version of Apache?
Server: Apache/2.4.7 (Fedora) OpenSSL/1.0.1e-fips mod_nss/2.4.6 NSS/3.15.3 
Basic ECC PHP/5.5.10 mod_wsgi/3.4 Python/2.7.5 mod_perl/2.0.9-dev Perl/v5.18.2

Which MPM?
Whats that?

URL of broken page:
See above



Original issue reported on code.google.com by frederic...@gmail.com on 25 Mar 2014 at 3:10

@GoogleCodeExporter
Copy link
Author

Thanks for the report. Workaround would be to disable inline_import_to_link.
I think I'll go ahead and fix it right now (modulo imminent lunch), since it's 
very easy to do so.


Original comment by morlov...@google.com on 25 Mar 2014 at 3:28

  • Changed state: Accepted

@GoogleCodeExporter
Copy link
Author

Is <style scoped> only supported in FF?

Original comment by matterb...@google.com on 25 Mar 2014 at 3:29

@GoogleCodeExporter
Copy link
Author

Seems like it per:
http://caniuse.com/style-scoped
Chrome status is behind a flag, and doesn't seem like there is a current 
timeline:
http://www.chromestatus.com/features/5374137958662144
... But given this basically just needs an if statement in each of 2 filters 
(css_inline_import_to_link and outline_css), I think we should just handle it.

Original comment by morlov...@google.com on 25 Mar 2014 at 3:38

@GoogleCodeExporter
Copy link
Author

Actually looks like Chrome is planning on removing it entirely:
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/R1x18ZLS5qQ

Original comment by morlov...@google.com on 25 Mar 2014 at 3:40

@GoogleCodeExporter
Copy link
Author

Well currently you have to enable "Experimentelle Webplattformfunktionen 
aktivieren" (in english probably "activate experimental webplatform functions") 
under about:flags in chrome. This feature is handy in my case. But I will 
probably have to de-minify the foreign css and put additional selectors in it 
in order to cope with probably dead end feature of scoped css files. A really 
painful job...

Original comment by frederic...@gmail.com on 25 Mar 2014 at 8:00

@GoogleCodeExporter
Copy link
Author

This issue was closed by revision r3886.

Original comment by morlov...@google.com on 25 Mar 2014 at 8:49

  • Changed state: Fixed

@GoogleCodeExporter
Copy link
Author

Original comment by morlov...@google.com on 25 Mar 2014 at 8:52

  • Added labels: Milestone-v31

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

1 participant