9 ms·

User stylesheet support removed in Chrome 33

77 points by hk__2 13y ago

pcwalton 13y ago
CSS 2.1 defines a specific order in which user-supplied style sheets' declarations must be honored [1]. This ordering makes a lot of sense to me: author normal overrides user normal, but user !important overrides author !important. Can extensions easily replicate this behavior if the spec-compliant code is purged from the selector matching engine? [1]: http://www.w3.org/TR/CSS2/cascade.html#cascading-order http://www.w3.org/TR/CSS2/cascade.html#cascading-order
- leobelle 13y ago
  ! isn't as simple as that. CSS is cascading. If there are conflicting ! then rule specificity would be taken into account. If the rules have similar specificity the last one evaluated wins. I imagine user extensions are loaded at the end so in that case they would win.
  - pcwalton 13y ago
    No. !important supplied by the user is always higher than !important supplied by the author (and the opposite is true for non-!important), regardless of specificity. Specificity only comes into play when considering two rules supplied by the user or two rules supplied by the author. If user agent style sheets are removed from the engine, then extensions will have to start considering specificity when adding style sheets to the end of the list, because they'll all be considered "author" rules. But user style sheets shouldn't have to worry about specificity, per the spec.
    - leobelle 13y ago
      That would break how CSS works. I don't like it.
      - mpyne 13y ago
        He is describing how CSS is spec'ed to work right to you. The proposed Chrome change would be breaking how CSS works.
        leobelle 13y ago
        Yes I understand, but I wouldn't want that in a chrome extension personally. It could make styling harder. When you nuke rules without considering specificity it can cause unintended consequences. If everything just followed regular CSS rules as if all CSS was applied by the author there would be less of a chance of changing something you hadn't intended to change.
        officemonkey 13y ago
        The people who use user style sheets (especially !important rules) in CSS aren't particularly interested in your styling. They're interested in the content in a style that works for them. This is an important accessibility feature of CSS and I'm disturbed at any reduction in support for this feature.
- magicalist 13y ago
  No, not easily. You can see that this is already the case in Firefox for Android, for instance, where you can't supply a user style sheet (the firefox profile is inaccessible to a user without root anyways). If you do want to provide user styles, Stylish is the featured (and almost universally recommended) extension for adding them. As you can see in the docs[1], though, anytime your !important rule comes up against an author's !important rule and you lose, the only workaround is to get more specific. (it should be noted, though, that while CSS 2.1 does specify the cascade order with a "must", the user being able to specify styles in the first place is a "may", so Firefox for Android and Chrome for Android (which still doesn't support extensions) are spec compliant, they just make overriding styles more work and more fragile in the face of author changes) [1] https://github.com/JasonBarnabe/stylish/wiki/Overwriting-page-styles#wiki-recommendations https://github.com/JasonBarnabe/stylish/wiki/Overwriting-pag...
  - pcwalton 13y ago
    Yeah, I guess what I'd like is an API for extensions like Stylish to use to add real user-level style sheets, in both Firefox and Chrome.
jamesaguilar 13y ago
There are plenty of extensions to satisfy this use-case. The only question is: how can I trust one?
- hk__2 13y ago
  Not really. With user stylesheet (Custom.css), it was a local file you could edit with your favorite editor, and changes were live when you saved the file. I tried multiple extensions, and for all of them you need to paste your CSS in a box, click on a button to save it and reload the page to see any effects, which is quite painful compared to just typing :w<cr> in Vim.
  - pritambaral 13y ago
    You can continue to use vim, if you can paste from a file directly in a terminal. Mac OS X comes with pbcopy and Linux has xclip and xsel.
    - pyre 13y ago
      I'm thinking that the point is that this: Editor <=> File is simpler than: Editor <=> Copy/Paste Text Box/Save Button <=> File It's a more cumbersome feedback loop while making changes.
- pritambaral 13y ago
  You can look at the source code of any extension, doesn't have to be released under OSI-compliant license. <Chrome Profile Folder>/Extensions/<extension code>. Get the Chrome profile folder for your platform from: http://www.chromium.org/user-experience/user-data-directory http://www.chromium.org/user-experience/user-data-directory (note, may not be "Default" if you use a created user profile.) Get the extension number from chrome://extensions/ One thing that needs to be taken care of is updates-gone-rogue (a la HoverZoom, for example.)
- zeroDivisible 13y ago
  I'd say ... write yours. The one which satisfies your needs and your needs only. There are dozens of extensions which change the new tab page - I didn't like any of them, so I hacked a quick one myself - it took me 2h? 1.5h? It was fast and I didn't need any complicated features - just a CSS-styled table with fixed list of links and a clock.
leobelle 13y ago
It's trivial to write your own stylesheet. Create a directory, put a manifest.json with a content_scripts and a css attribute plus a matching attribute and then your css file. Like this: https://gist.github.com/anonymous/9311394 https://gist.github.com/anonymous/9311394 Then turn on developer mode in extensions and load the directory. I made this while writing this comment, that's how easy it is.
- Filligree 13y ago
  Or install Stylish, which makes it even simpler.
  - leobelle 13y ago
    The problem with Stylish is the same problem with every other chrome extension. It can access all your data on all websites. It can surreptitiously autoupdate. I wouldn't want a person I knew to look over my shoulder while typing in my banking password, but I'm going to trust this extension with everything? I have ghostery and ad-block plus, and that's scary enough. That's it, that and my own extensions. I don't know anything about who made Stylish.
    - arkitaip 13y ago
      So why do you trust Chrome in the first place?
      - jcampbell1 13y ago
        I assume that Google is giving me a free browser because it will drive traffic and revenue to the search engine. There is no reason for Google to be nefarious to make money. I cannot guess the motivations of free plugin developers.
        dethstar 13y ago
        Stylish is GPL v3, according to the FF addon page.
ams6110 13y ago
From the commit log message: "Extensions are a much better way of doing this."
- makomk 13y ago
  Except that Chrome users aren't allowed to install extensions from outside the official Chrome extension store anymore (and the ones inside the Chrome app store aren't exactly trustworthy due to auto-update and creators transferring ownership to adware companies - especially small single-site extensions that sell cheaply).
  - Karunamon 13y ago
    Developer mode. Pretty sure anyone that's going to be involved in custom CSS styles knows their way around the plugin system.
    - chr1 13y ago
      But in developer mode it always shows annoying popup, asking to disable developer mode.
      - jrockway 13y ago
        Are you sure? I have developer enabled on all my Chromes (currently 34.0.1847.14 beta) and I have never seen this popup. This is not to be confused with developer mode on Chromebooks, which does make each boot very annoying.
        chr1 13y ago
        I don't have it on chromium nightly, but on current chrome version 33.0.1750.146 it opens on every start. see https://productforums.google.com/forum/#!msg/chrome/6mmohdZd2Xw/VYXrpc9cYj8J https://productforums.google.com/forum/#!msg/chrome/6mmohdZd... https://code.google.com/p/chromium/issues/detail?id=337734 https://code.google.com/p/chromium/issues/detail?id=337734
dchuk 13y ago
Here's something that has seemed to change in the newest Chrome: When I click the "+" (New Style Rule) in the inspector to add a new style to an element (let's say the element has a class of ".my-element"), in previous versions of Chrome, it would create an empty style like .my-element {}. Now, when I do that, it creates "body > center > table > tbody > tr:nth-child(3) > td > table:nth-child(4) > tbody > tr:nth-child(1) > td > table > tbody > tr > td.default > span > font > p > a" What happened here? Does that have anything to do with this User Stylesheet stuff? Because this new functionality is infuriating and I don't even really know what to search for to fix this change.
- paulirish 13y ago
  Can you file a ticket at http://crbug.com http://crbug.com ? I can help restore the previous behavior.
  - dchuk 13y ago
    Will do that right now, thanks!
- agumonkey 13y ago
  Probably an attempt at ensuring the properties you're about to add will apply to this and only this element and not any element of the .my-element class.
DanBC 13y ago
Is this hostile to users who need custom CSS for accessibility? Or do those users do something else entirely? I sometimes wish Google would release numbers when they make changes. Finding out how many people used the plus operator (and how many of those used it correctly) made Google's removal of it slightly easier. Edit: the + operator for searching, apologies for not being clear.
- dragonwriter 13y ago
  > Is this hostile to users who need custom CSS for accessibility? Its just plain hostile to users. Accessibility is just one of the many ways it is hostile to users. (Generally, the designer-centric app-ification of the web which has been going on for since commercial interests other than those whose interest was in selling access to the internet first discovered the value of the internet to reach the public is user hostile, and this is just part of it.)
  - nfoz 13y ago
    It always makes me really glad to know I'm not the only one who sees it this way.
  - userbinator 13y ago
    designer-centric app-ification of the web Great phrase. I'm probably not the only one who desires a more user-centric web, and also web browser...
- nandhp 13y ago
  What plus operator did Google remove? Are you referring to the adjacent sibling selector? https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_si...
  - DanBC 13y ago
    Sorry for not being clear. I meant the + operator for searching. I've edited my post to be clearer.
ezequiel-garzon 13y ago
Somewhat related, I've noticed not just Chrome, but most mobile browsers apply some sort of font boosting, inflation or some such... Isn't this breaking standards flagrantly? I know all these clever developers mean well [1], but still... [1] Though I can't help feeling total arbitrariness when skipping from one first-level HN comment to the next.
- ezequiel-garzon 13y ago
  Could any of the downvoters expand a little bit? Do you not know what I'm referring to? Why isn't arbitrary choice of font size a violation of CSS?
johnchristopher 13y ago
> -The user-stylesheet feature requires the user to put a CSS stylesheet in the right location in their user-data-dir. Extensions are a much better way of doing this. Uh ? Why remove that feature ? It's not buggy, unmaintainable or resource hungry.
- gnu8 13y ago
  At root this is a part of the push to make the web less participatory and more like television. Users need to be gulping content and crapping cash, and they don't need to be distracted by trivia such as altering a web site's layout for personal usability or accessibility.
  - woah 13y ago
    I doubt it's part of some huge conspiracy. I think they removed it to clean up some code after looking at the numbers of how many people actually used it.
    - nitrogen 13y ago
      There is a difference between "emergent behavior that looks remarkably like a huge conspiracy but really isn't", and "huge conspiracy." Either way, the trend is real.
fiendsan 13y ago
google givet, google take it away...
josteink 13y ago
Yet another reason to prefer Firefox.
jebblue 13y ago
You could download the Stylizr Extension. I just did and it works, puts a nice Wizard Wand on your Chrome Bar or whatever it's called: https://developer.chrome.com/extensions/samples https://developer.chrome.com/extensions/samples
jccalhoun 13y ago
Maybe Opera can maintain some relevance by keeping the chrome features that google has removed.
- couchand 13y ago
  Chances are they invented those features, anyway.
dalek2point3 13y ago
and this has nothing to do with Adblock? I feel like it must ...
barrkel 13y ago
My own custom stylesheet: * { cursor:auto !important } a { cursor:pointer !important } a * { cursor:pointer !important } Another reason not to use Chrome beyond tree-style tabs.
fufufufufufu 13y ago
Extensions DO NOT FIX THIS PROBLEM. Especially not Stylish. For example, I have a custom user style sheet which modifies the scrollbar so that it's high contrast. The current scrollbar contrasts very poorly and hard to see so it's a necessity. When using the exact same CSS in Stylish, it breaks when going back/forward between pages all the time, rendering the default scrollbar instead. It's the same for every extension. I even wrote my own, it doesn't work. Whoever decided to offload this capability onto extensions made a TERRIBLE decision.

77 points by hk__2 13y ago

CSS 2.1 defines a specific order in which user-supplied style sheets' declarations must be honored [1]. This ordering makes a lot of sense to me: author normal overrides user normal, but user !important overrides author !important. Can extensions easily replicate this behavior if the spec-compliant code is purged from the selector matching engine? [1]: http://www.w3.org/TR/CSS2/cascade.html#cascading-order http://www.w3.org/TR/CSS2/cascade.html#cascading-order

leobelle 13y ago
! isn't as simple as that. CSS is cascading. If there are conflicting ! then rule specificity would be taken into account. If the rules have similar specificity the last one evaluated wins. I imagine user extensions are loaded at the end so in that case they would win.
- pcwalton 13y ago
  No. !important supplied by the user is always higher than !important supplied by the author (and the opposite is true for non-!important), regardless of specificity. Specificity only comes into play when considering two rules supplied by the user or two rules supplied by the author. If user agent style sheets are removed from the engine, then extensions will have to start considering specificity when adding style sheets to the end of the list, because they'll all be considered "author" rules. But user style sheets shouldn't have to worry about specificity, per the spec.
  - leobelle 13y ago
    That would break how CSS works. I don't like it.
    - mpyne 13y ago
      He is describing how CSS is spec'ed to work right to you. The proposed Chrome change would be breaking how CSS works.
      - leobelle 13y ago
        Yes I understand, but I wouldn't want that in a chrome extension personally. It could make styling harder. When you nuke rules without considering specificity it can cause unintended consequences. If everything just followed regular CSS rules as if all CSS was applied by the author there would be less of a chance of changing something you hadn't intended to change.
        officemonkey 13y ago
        The people who use user style sheets (especially !important rules) in CSS aren't particularly interested in your styling. They're interested in the content in a style that works for them. This is an important accessibility feature of CSS and I'm disturbed at any reduction in support for this feature.
magicalist 13y ago
No, not easily. You can see that this is already the case in Firefox for Android, for instance, where you can't supply a user style sheet (the firefox profile is inaccessible to a user without root anyways). If you do want to provide user styles, Stylish is the featured (and almost universally recommended) extension for adding them. As you can see in the docs[1], though, anytime your !important rule comes up against an author's !important rule and you lose, the only workaround is to get more specific. (it should be noted, though, that while CSS 2.1 does specify the cascade order with a "must", the user being able to specify styles in the first place is a "may", so Firefox for Android and Chrome for Android (which still doesn't support extensions) are spec compliant, they just make overriding styles more work and more fragile in the face of author changes) [1] https://github.com/JasonBarnabe/stylish/wiki/Overwriting-page-styles#wiki-recommendations https://github.com/JasonBarnabe/stylish/wiki/Overwriting-pag...
- pcwalton 13y ago
  Yeah, I guess what I'd like is an API for extensions like Stylish to use to add real user-level style sheets, in both Firefox and Chrome.

jamesaguilar 13y ago

There are plenty of extensions to satisfy this use-case. The only question is: how can I trust one?

hk__2 13y ago
Not really. With user stylesheet (Custom.css), it was a local file you could edit with your favorite editor, and changes were live when you saved the file. I tried multiple extensions, and for all of them you need to paste your CSS in a box, click on a button to save it and reload the page to see any effects, which is quite painful compared to just typing :w<cr> in Vim.
- pritambaral 13y ago
  You can continue to use vim, if you can paste from a file directly in a terminal. Mac OS X comes with pbcopy and Linux has xclip and xsel.
  - pyre 13y ago
    I'm thinking that the point is that this: Editor <=> File is simpler than: Editor <=> Copy/Paste Text Box/Save Button <=> File It's a more cumbersome feedback loop while making changes.
pritambaral 13y ago
You can look at the source code of any extension, doesn't have to be released under OSI-compliant license. <Chrome Profile Folder>/Extensions/<extension code>. Get the Chrome profile folder for your platform from: http://www.chromium.org/user-experience/user-data-directory http://www.chromium.org/user-experience/user-data-directory (note, may not be "Default" if you use a created user profile.) Get the extension number from chrome://extensions/ One thing that needs to be taken care of is updates-gone-rogue (a la HoverZoom, for example.)
zeroDivisible 13y ago
I'd say ... write yours. The one which satisfies your needs and your needs only. There are dozens of extensions which change the new tab page - I didn't like any of them, so I hacked a quick one myself - it took me 2h? 1.5h? It was fast and I didn't need any complicated features - just a CSS-styled table with fixed list of links and a clock.

leobelle 13y ago

It's trivial to write your own stylesheet. Create a directory, put a manifest.json with a content_scripts and a css attribute plus a matching attribute and then your css file. Like this: https://gist.github.com/anonymous/9311394 https://gist.github.com/anonymous/9311394 Then turn on developer mode in extensions and load the directory. I made this while writing this comment, that's how easy it is.

Filligree 13y ago
Or install Stylish, which makes it even simpler.
- leobelle 13y ago
  The problem with Stylish is the same problem with every other chrome extension. It can access all your data on all websites. It can surreptitiously autoupdate. I wouldn't want a person I knew to look over my shoulder while typing in my banking password, but I'm going to trust this extension with everything? I have ghostery and ad-block plus, and that's scary enough. That's it, that and my own extensions. I don't know anything about who made Stylish.
  - arkitaip 13y ago
    So why do you trust Chrome in the first place?
    - jcampbell1 13y ago
      I assume that Google is giving me a free browser because it will drive traffic and revenue to the search engine. There is no reason for Google to be nefarious to make money. I cannot guess the motivations of free plugin developers.
      - dethstar 13y ago
        Stylish is GPL v3, according to the FF addon page.

ams6110 13y ago

From the commit log message: "Extensions are a much better way of doing this."

makomk 13y ago
Except that Chrome users aren't allowed to install extensions from outside the official Chrome extension store anymore (and the ones inside the Chrome app store aren't exactly trustworthy due to auto-update and creators transferring ownership to adware companies - especially small single-site extensions that sell cheaply).
- Karunamon 13y ago
  Developer mode. Pretty sure anyone that's going to be involved in custom CSS styles knows their way around the plugin system.
  - chr1 13y ago
    But in developer mode it always shows annoying popup, asking to disable developer mode.
    - jrockway 13y ago
      Are you sure? I have developer enabled on all my Chromes (currently 34.0.1847.14 beta) and I have never seen this popup. This is not to be confused with developer mode on Chromebooks, which does make each boot very annoying.
      - chr1 13y ago
        I don't have it on chromium nightly, but on current chrome version 33.0.1750.146 it opens on every start. see https://productforums.google.com/forum/#!msg/chrome/6mmohdZd2Xw/VYXrpc9cYj8J https://productforums.google.com/forum/#!msg/chrome/6mmohdZd... https://code.google.com/p/chromium/issues/detail?id=337734 https://code.google.com/p/chromium/issues/detail?id=337734

dchuk 13y ago

Here's something that has seemed to change in the newest Chrome: When I click the "+" (New Style Rule) in the inspector to add a new style to an element (let's say the element has a class of ".my-element"), in previous versions of Chrome, it would create an empty style like .my-element {}. Now, when I do that, it creates "body > center > table > tbody > tr:nth-child(3) > td > table:nth-child(4) > tbody > tr:nth-child(1) > td > table > tbody > tr > td.default > span > font > p > a" What happened here? Does that have anything to do with this User Stylesheet stuff? Because this new functionality is infuriating and I don't even really know what to search for to fix this change.

paulirish 13y ago
Can you file a ticket at http://crbug.com http://crbug.com ? I can help restore the previous behavior.
- dchuk 13y ago
  Will do that right now, thanks!
agumonkey 13y ago
Probably an attempt at ensuring the properties you're about to add will apply to this and only this element and not any element of the .my-element class.

DanBC 13y ago

Is this hostile to users who need custom CSS for accessibility? Or do those users do something else entirely? I sometimes wish Google would release numbers when they make changes. Finding out how many people used the plus operator (and how many of those used it correctly) made Google's removal of it slightly easier. Edit: the + operator for searching, apologies for not being clear.

dragonwriter 13y ago
> Is this hostile to users who need custom CSS for accessibility? Its just plain hostile to users. Accessibility is just one of the many ways it is hostile to users. (Generally, the designer-centric app-ification of the web which has been going on for since commercial interests other than those whose interest was in selling access to the internet first discovered the value of the internet to reach the public is user hostile, and this is just part of it.)
- nfoz 13y ago
  It always makes me really glad to know I'm not the only one who sees it this way.
- userbinator 13y ago
  designer-centric app-ification of the web Great phrase. I'm probably not the only one who desires a more user-centric web, and also web browser...
nandhp 13y ago
What plus operator did Google remove? Are you referring to the adjacent sibling selector? https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_si...
- DanBC 13y ago
  Sorry for not being clear. I meant the + operator for searching. I've edited my post to be clearer.

ezequiel-garzon 13y ago

Somewhat related, I've noticed not just Chrome, but most mobile browsers apply some sort of font boosting, inflation or some such... Isn't this breaking standards flagrantly? I know all these clever developers mean well [1], but still... [1] Though I can't help feeling total arbitrariness when skipping from one first-level HN comment to the next.

ezequiel-garzon 13y ago
Could any of the downvoters expand a little bit? Do you not know what I'm referring to? Why isn't arbitrary choice of font size a violation of CSS?

johnchristopher 13y ago

> -The user-stylesheet feature requires the user to put a CSS stylesheet in the right location in their user-data-dir. Extensions are a much better way of doing this. Uh ? Why remove that feature ? It's not buggy, unmaintainable or resource hungry.

gnu8 13y ago
At root this is a part of the push to make the web less participatory and more like television. Users need to be gulping content and crapping cash, and they don't need to be distracted by trivia such as altering a web site's layout for personal usability or accessibility.
- woah 13y ago
  I doubt it's part of some huge conspiracy. I think they removed it to clean up some code after looking at the numbers of how many people actually used it.
  - nitrogen 13y ago
    There is a difference between "emergent behavior that looks remarkably like a huge conspiracy but really isn't", and "huge conspiracy." Either way, the trend is real.

fiendsan 13y ago

google givet, google take it away...

josteink 13y ago

Yet another reason to prefer Firefox.

jebblue 13y ago

You could download the Stylizr Extension. I just did and it works, puts a nice Wizard Wand on your Chrome Bar or whatever it's called: https://developer.chrome.com/extensions/samples https://developer.chrome.com/extensions/samples

jccalhoun 13y ago

Maybe Opera can maintain some relevance by keeping the chrome features that google has removed.

couchand 13y ago
Chances are they invented those features, anyway.

dalek2point3 13y ago

and this has nothing to do with Adblock? I feel like it must ...

barrkel 13y ago

My own custom stylesheet: * { cursor:auto !important } a { cursor:pointer !important } a * { cursor:pointer !important } Another reason not to use Chrome beyond tree-style tabs.

fufufufufufu 13y ago

Extensions DO NOT FIX THIS PROBLEM. Especially not Stylish. For example, I have a custom user style sheet which modifies the scrollbar so that it's high contrast. The current scrollbar contrasts very poorly and hard to see so it's a necessity. When using the exact same CSS in Stylish, it breaks when going back/forward between pages all the time, rendering the default scrollbar instead. It's the same for every extension. I even wrote my own, it doesn't work. Whoever decided to offload this capability onto extensions made a TERRIBLE decision.