search

Nass-O / DarkSearch

Dark theme for google.com
GNU General Public License v3.0
41 stars 22 forks source link

@-moz-document at-rules don't work in any browsers but Firefox #28

Open HatScripts opened 7 years ago

HatScripts commented 7 years ago

I've had this style installed for a while and have been fixing things over time. I was preparing a fairly large commit to the repo when I realised the reason I originally removed the @-moz-document rules from it is that they don't work in Chrome, Opera, Safari, etc.

Is there not a way of specifying within Stylish which domains/URLs to apply the theme to? I don't use Stylish myself, and have this theme installed as a userscript. Userscripts normally have an @include tag where you can specify which domains/URLs to apply to as a regex/wildcard, but when I first installed this theme from Userstyles, the auto-generated userscript was missing the @include tag.

pawelos076232 commented 7 years ago

Hi! I think, this problem lie with the Userstyles.org, not the style.

I have same problem with my own projects. When I'm using @-moz-document "regexp", userstyles doesn't generate @include tags in JS file...

jep-dev commented 7 years ago

Agreed - it also doesn't support the full set of features that Firefox does, like the var() function, which lets you declare a parameter as if it were a property, then override it further or call var() on it to use its value in any element where it's declared or inherited. That's perfect for creating an easily-customizable palette/decoration scheme separate from the complicated logic below used to apply it. Instead the styles are stripped of anything it doesn't recognize, but comments are parsed for installation parameters, so the installed style is less portable and either needs to be updated from UserStyles or edited at every instance of a given value/keyword.

My personal solution is to use local CSS files and @import url("file:///..."); Stylish won't update from the file(s) automatically, but it will when you edit and save the stylesheet with the import rule, even if the edit is just adding and removing a space. The reason for this is that Stylish expects external resources to be unreliable, so it bakes them into the style it applies internally (copying the contents of imports, base??-encoding images, whatever it takes.) More importantly, it means that the style you installed from the source is only going to change if you allow it to update, and the local version is only going to change when you update it or save your changes.

As for restricting by domain/url, this response will help with Chrome: https://forum.userstyles.org/discussion/46809/moz-document-equivalent-on-chrome

You use the "applies to" below the edit menu in stylish on chrome, for "domain" it's "urls on the domain".

Hopefully Stylish in other browsers includes this feature or the browsers themselves are working toward @-*-document (-webkit-, -ms-, etc.) support in the near future. In general, there's @document, but from the reference, this is postponed to CSS4 and only Firefox and Gecko support it verbatim or prefixed variants. In the meantime, you can potentially find an identifying feature of each site you want to affect, e.g. body.mediawiki, but this is obviously tedious and unreliable. Your best option lacking @[-moz-]document and the Stylish 'applies to...' button would probably be to use a second addon to either interface with Stylish or apply css/js by domain/url/regex and supply it with the stylesheet. I'm open to better solutions if anyone knows one!