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

GoogleCodeExporter opened this issue Apr 6, 2015 · 7 comments


Copy link

What steps will reproduce the problem?
1. open source of
2. open source of
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

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 by on 25 Mar 2014 at 3:10

Copy link

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 on 25 Mar 2014 at 3:28

  • Changed state: Accepted

Copy link

Is <style scoped> only supported in FF?

Original comment by on 25 Mar 2014 at 3:29

Copy link

Seems like it per:
Chrome status is behind a flag, and doesn't seem like there is a current 
... 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 on 25 Mar 2014 at 3:38

Copy link

Actually looks like Chrome is planning on removing it entirely:!topic/blink-dev/R1x18ZLS5qQ

Original comment by on 25 Mar 2014 at 3:40

Copy link

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 on 25 Mar 2014 at 8:00

Copy link

This issue was closed by revision r3886.

Original comment by on 25 Mar 2014 at 8:49

  • Changed state: Fixed

Copy link

Original comment by 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.
None yet

No branches or pull requests

1 participant