User stylesheet support removed in Chrome 33(src.chromium.org)
src.chromium.org
User stylesheet support removed in Chrome 33
https://src.chromium.org/viewvc/chrome?revision=234007&view=revision
15 comments
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-pag...
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-pag...
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.
! 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.
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.
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.
That would break how CSS works. I don't like it.
He is describing how CSS is spec'ed to work right to you. The proposed Chrome change would be breaking how CSS works.
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.
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.
This is an important accessibility feature of CSS and I'm disturbed at any reduction in support for this feature.
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
Then turn on developer mode in extensions and load the directory. I made this while writing this comment, that's how easy it is.
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.
This is why developers need to REALLY understand they are not like other people when building product
-----
1)Create a directory [fair enough] 2)put a manifest.json 2a) Add content_scripts 2b) css attribute 2b) plus a matching attribute and 3)css file. 4)Turn on developer mode 5) Load directory
1)Create a directory [fair enough] 2)put a manifest.json 2a) Add content_scripts 2b) css attribute 2b) plus a matching attribute and 3)css file. 4)Turn on developer mode 5) Load directory
Do you really think non-developers are creating user stylesheets to begin with?
As the commit message notes, the current setup already requires putting a .css file in the right location inside the user-data-dir.
As the commit message notes, the current setup already requires putting a .css file in the right location inside the user-data-dir.
As author of Safari User CSS extension[1], most of support email I've ever got are from non-developers. There are many kind I can recall, from those who simply want to adjust font sizes of a site permanently, to following tutorials on website on how to customize YouTube layout, to those that wrote userstyles on their own. I even got questions like "how do I turn Google black"/"how do I remove x from this url" sometimes.
I'm not sure about Chrome, but Safari had a similar feature but it lacked a way to scope stylesheets to certain domain. If Chrome userstyles behaves the same way then I don't think this change will affect those users anyway since being able to scope userstyles to certain domain seems very important to them.
[1] http://code.grid.in.th
I'm not sure about Chrome, but Safari had a similar feature but it lacked a way to scope stylesheets to certain domain. If Chrome userstyles behaves the same way then I don't think this change will affect those users anyway since being able to scope userstyles to certain domain seems very important to them.
[1] http://code.grid.in.th
I have had to walk people through the process of downloading a user stylesheet and setting it up for use, typically for accessibility purposes.
I don't want to imagine that process getting even more complex than it already is.
I don't want to imagine that process getting even more complex than it already is.
An extension like Stylish makes it much easier to install a custom stylesheet than the standard "user stylesheet" feature. Not harder.
> Do you really think non-developers are creating user stylesheets to begin with?
Then ask yourself why they are called user stylesheets?
IMHO all these attempts at taking away features "because most of the users won't ever use them" or similar reasons, and then saying "but developers can just do {more complicated thing}, it's better" is a terribly wrong direction that a lot of software seems to be heading in.
"Most of the users won't ever use them" is definitely a valid observation, but how about the ones who do? They probably use them because they discovered that feature and decided to play with it more, learn about it, and found out how useful it could be. By removing them, many more who would've otherwise discovered them will not, they will have a harder time learning about these things that benefit them, and instead remain ignorant. I find this to be almost patronising.
Then ask yourself why they are called user stylesheets?
IMHO all these attempts at taking away features "because most of the users won't ever use them" or similar reasons, and then saying "but developers can just do {more complicated thing}, it's better" is a terribly wrong direction that a lot of software seems to be heading in.
"Most of the users won't ever use them" is definitely a valid observation, but how about the ones who do? They probably use them because they discovered that feature and decided to play with it more, learn about it, and found out how useful it could be. By removing them, many more who would've otherwise discovered them will not, they will have a harder time learning about these things that benefit them, and instead remain ignorant. I find this to be almost patronising.
This isn't "taking a feature away." It is deciding that such a feature is better implemented in extensions.
An extension like this: https://chrome.google.com/webstore/detail/stylish/fjnbnpbmke...
An extension like this: https://chrome.google.com/webstore/detail/stylish/fjnbnpbmke...
I have seen more than a few Linux screenshots with customized Xdefaults and customized user stylesheets. Granted, they are advanced user, but they were not developers.
I am a non dev. I just tried the recipe provided by leobelle using the files provided in gist.github and it works fine. I had to change "matches" to use
"<all_urls>" though. -------------------
Now I get a popup whenever I start Chrome telling me to disable developer mode extensions -- how to get rid of that?
Only a developer would be writing CSS, though.
Maybe only developers would write CSS from scratch, but there are plenty of non-devs who are capable of finding CSS snippets (e.g. on userstyles.org) and adding it to some sort of user stylesheet. However, once they're lost once the process gets beyond "find your user stylesheet at this path" or "click to install with Stylish."
Are you implying that "non-developers" should be discouraged from doing so? Would you agree if CSS was replaced with HTML?
Consider that many people learned how to write their own webpages with nothing more than a browser and a text editor, and the simplicity and soft error recovery characteristics of HTML is what I think was responsible for a large part of the Internet's growth. The barrier to entry was low, so it was easy to participate. Many people I know learned how to create webpages this way, largely by example (i.e. view source). Many of them also learned a bit of CSS too. These users produced and consumed content. But now, all I see is a growing divide between "users" and "developers", with these changes in browsers both reflecting and encouraging it, and I can't see that as being at all a good thing.
Consider that many people learned how to write their own webpages with nothing more than a browser and a text editor, and the simplicity and soft error recovery characteristics of HTML is what I think was responsible for a large part of the Internet's growth. The barrier to entry was low, so it was easy to participate. Many people I know learned how to create webpages this way, largely by example (i.e. view source). Many of them also learned a bit of CSS too. These users produced and consumed content. But now, all I see is a growing divide between "users" and "developers", with these changes in browsers both reflecting and encouraging it, and I can't see that as being at all a good thing.
Or install Stylish, which makes it even simpler.
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.
I have this exact problem with a lot of extensions I would like to use, so I only actually use one that extension which I implicitly trust anyway, LastPass. Here's an example, I use both Mac and Linux but on Linux I would like to have a more native looking scrollbar. Such functionality exist as extensions but I really do not want to trust a scrollbar plugin to have access to all data on all my websites (this is the permission required). I have been slowly (painfully) moving back towards Firefox recently just because on Linux Chrome is so out of place, but the Chrome Dev Tools are still way better.
So why do you trust Chrome in the first place?
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.
I cannot guess the motivations of free plugin developers.
Stylish is GPL v3, according to the FF addon page.
Google's most valuable asset is its reputation; switching cost are still pretty low for most of their properties. But, not only does Google have a disincentive for being nefarious in that fashion, they're also under more scrutiny vis-à-vis Chrome (which would be effective even if it were not open source).
> they're also under more scrutiny vis-à-vis Chrome (which would be effective even if it were not open source).
Chrome is not open source. Chromium is, but they are not the same.
Chrome is not open source. Chromium is, but they are not the same.
You think Google would steal my banking information or my identity?
[deleted]
You can also just create a *.user.js file and drop it on the extensions page. (Still works in chrome 35.)
That's awesome. Never knew that, though admittedly I've not really immersed myself in how Chrome extensions actually work. Thanks for the example! Learn something new everyday :)
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.
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.
> 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.)
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.)
It always makes me really glad to know I'm not the only one who sees it this way.
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...
Great phrase. I'm probably not the only one who desires a more user-centric web, and also web browser...
As someone that likes to pretty much always override author's styles, Chrome is pretty much out for me. There is no easy way in the browser settings to select your own stylesheet. Also there is no easy way to just turn off the author's stylesheet. Doing so can be quite useful for troublesome sites. In Firefox it's View -> Page Style -> None. But even that's obtuse. Not being able to easily flip between stylesheets in the browsers - has meant that author's can't really be bothered to supply them. Having some free well rounded Core styles, that users can apply to any site would be a nice to have feature in the browser, or alternatively making it very simple to add your own.
Opera is the only browser that felt like it let me apply my own stylesheet. Other browers behave inconsistantyl when adding my own. Even Firefox is odd. My compromise is just to specify foreground and background colours, with a larger font size, and an easy to read font. That way the layouts don't get that borked. Reading a well designed page with logical flow off can read quite well, if you apply your own styles, or use your desktops.
Opera is the only browser that felt like it let me apply my own stylesheet. Other browers behave inconsistantyl when adding my own. Even Firefox is odd. My compromise is just to specify foreground and background colours, with a larger font size, and an easy to read font. That way the layouts don't get that borked. Reading a well designed page with logical flow off can read quite well, if you apply your own styles, or use your desktops.
What plus operator did Google remove? Are you referring to the adjacent sibling selector? https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_si...
Sorry for not being clear. I meant the + operator for searching. I've edited my post to be clearer.
Maybe you could ask them to add it? Although now that they've removed it there'd be no numbers
http://www.chromestatus.com/
http://www.chromestatus.com/
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.
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.
Can you file a ticket at http://crbug.com ? I can help restore the previous behavior.
Will do that right now, thanks!
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.
> -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.
Uh ? Why remove that feature ? It's not buggy, unmaintainable or resource hungry.
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.
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.
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.
From the commit log message: "Extensions are a much better way of doing this."
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).
Developer mode. Pretty sure anyone that's going to be involved in custom CSS styles knows their way around the plugin system.
But in developer mode it always shows annoying popup, asking to disable developer mode.
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.
This is not to be confused with developer mode on Chromebooks, which does make each boot very annoying.
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/6mmohdZd... https://code.google.com/p/chromium/issues/detail?id=337734
Extensions are not a much better way of doing what CSS is designed to do as its normal mode of operation. Requiring extensions to do this is user-hostile.
As the commit message stated, the current method (of dropping just the right file in a usually hidden part of the filesystem) is fairly user hostile as it is.
Extensions exist which make this significaly friendly to all involved, such as Stylish.
Extensions exist which make this significaly friendly to all involved, such as Stylish.
> As the commit message stated, the current method (of dropping just the right file in a usually hidden part of the filesystem) is fairly user hostile as it is.
Right, there should be a basic UI setting to do load an specified stylesheet as the default.
That doesn't excuse removing basic functionality expected of a user agent out of the core and requiring an extensionto provide it at all, especially since that requires reducing security (by extending the number of trusted parties) to use that basic function.
"We didn't expose this basic function well enough by default" is a good reason to improve the UX related to the function, its not a good excuse to make the situation even worse.
Right, there should be a basic UI setting to do load an specified stylesheet as the default.
That doesn't excuse removing basic functionality expected of a user agent out of the core and requiring an extensionto provide it at all, especially since that requires reducing security (by extending the number of trusted parties) to use that basic function.
"We didn't expose this basic function well enough by default" is a good reason to improve the UX related to the function, its not a good excuse to make the situation even worse.
Extensions (besides their other issues such as security) are also chrome-specific and require chrome-specific knowledge to write.
CSS stylesheets are nicely portable and should work in any (well, most) browser.
In general, a browser agnostic solution is preferable to a browser-specific solution, if they have the same functionality....
Stylesheets are also arguably much simpler to write, and far more concise for their problem space.
Maybe if user stylesheets didn't exist, you could say it isn't worth the effort to implement them, as javascript extensions are a "good enough" solution for a somewhat rare circumstance. But actually removing the existing, standardized, portable, feature seems a tad bizarre... [It's hard to believe it required much code.]
CSS stylesheets are nicely portable and should work in any (well, most) browser.
In general, a browser agnostic solution is preferable to a browser-specific solution, if they have the same functionality....
Stylesheets are also arguably much simpler to write, and far more concise for their problem space.
Maybe if user stylesheets didn't exist, you could say it isn't worth the effort to implement them, as javascript extensions are a "good enough" solution for a somewhat rare circumstance. But actually removing the existing, standardized, portable, feature seems a tad bizarre... [It's hard to believe it required much code.]
> In general, a browser agnostic solution is preferable to a browser-specific solution, if they have the same functionality....
This is a great point. If a user went through the trouble of creating custom styles to make certain sites accessible, browsers should follow a standardized way of managing these styles. Just like a user can import their bookmarks when changing browsers, styles should be handled similarly.
It might be extra effort for browsers to handle this uncommon feature, but it is the right thing to do, especially for users facing accessibility issues.
This is a great point. If a user went through the trouble of creating custom styles to make certain sites accessible, browsers should follow a standardized way of managing these styles. Just like a user can import their bookmarks when changing browsers, styles should be handled similarly.
It might be extra effort for browsers to handle this uncommon feature, but it is the right thing to do, especially for users facing accessibility issues.
Funny thing a few weeks ago Chrome started nagging that I have developer mode turned on because of an extension I made. It doesn't make any sense now.
There are plenty of extensions to satisfy this use-case. The only question is: how can I trust one?
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.
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.
I'm thinking that the point is that this:
Editor <=> File
Editor <=> Copy/Paste Text Box/Save Button <=> File
Take a look at Control Freak: https://chrome.google.com/webstore/detail/control-freak/jgnc...
It's well-maintained and allows a user to inject custom CSS or JS on any URL, domain or all sites for their own tweaks and purposes. Maintaining these overrides just one click away offers a much better experience than hunting down this Custom.css buried within the filesystem.
It's well-maintained and allows a user to inject custom CSS or JS on any URL, domain or all sites for their own tweaks and purposes. Maintaining these overrides just one click away offers a much better experience than hunting down this Custom.css buried within the filesystem.
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 (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.)
Get the Chrome profile folder for your platform from: 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.)
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.
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.
As others have mentioned, write your own.
Here are some templates: https://github.com/bsilvereagle/Extensions
It's pretty straight foward in my opinion.
Here are some templates: https://github.com/bsilvereagle/Extensions
It's pretty straight foward in my opinion.
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.
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.
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
My own custom stylesheet:
* { cursor:auto !important }
a { cursor:pointer !important }
a * { cursor:pointer !important }
Yet another reason to prefer Firefox.
and this has nothing to do with Adblock? I feel like it must ...
google givet, google take it away...
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.
[1] Though I can't help feeling total arbitrariness when skipping from one first-level HN comment to the next.
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?
[1]: http://www.w3.org/TR/CSS2/cascade.html#cascading-order