CSS UserStyle Not working for me.

[citizensoftheworld]

System Information:

macOS version: 10.14.6 (18G6032) Userscripts version: 2.2.0 Safari version: Version 14.0.1 (14610.2.11.51.10)

UserScripts (JS) work just fine, but I can't get any css to function. Does anyone else have this problem? I've checked a number of styles from those I can see working in PaleMoon, to a random selection from online sources.

Is there some specific protocol/syntax I should be using with Safari?

[quoid]

@citizensoftheworld can you please share the code you've tried and on which website you've tried it?

[quoid]

Also, if you are copying and pasting a stylesheet meant to be used in other extension, that is most likely the cause. As you mention, there could some properties or values that are not supported. You can check that the extension is working properly by installing this test style and then visiting google. If the background is blue, your issue is more than likely a syntax problem.

I am considering ditching the UserStyle syntax in Version 3 to avoid support confusion.

[citizensoftheworld]

Here's a random one that I've just checked works in PaleMoon. I experimented with various combinations of with/without the '@-moz-document' & '@namespace' lines.

`/ name: DailyFail Clean date: 16:21 28 October 2016 Updated:
notes: Adapted from, greasyfork.org/en/scripts/9323-dailymail-right-pane-remover /

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("dailymail.co.uk") {

iframe,

articleIconLinksContainer,

footer,

infinite-list,

mini-carousel-wrapper,

most-read-news-wrapper,

most-watched-videos-wrapper,

p-16,

reader-comments,

.and-footer, .beta, .fb, .floating-buttons, .jkl23j4l23, .mol-previous-next-navigation_previous-button, .mol-previous-next-navigation_next-button, .page-footer, .rc-content, .related-carousel, .shareArticles, .supplements, .weather

{display:none !important;}

}`

[quoid]

Yeah, it's a syntax issue. Most of the way traditional userstyles are written isn't supported. The only thing that is supported is the open/close tags and some of the metadata. That's why I am leaning on removing any mentioned of it in the next major update - I want to distance the extension from "UserStyles" but still allow users to create "css userscripts." At the time on version 2, I thought it made more semantic sense to allow for UserStyle tags, but then it gives the user the impression that using UserStyles will be copy and paste, and that's not the case.

Here's a version of that dailymail code that will work (note, UserStyle tags are optional, you can use Userscript even for css files):

// ==UserScript==
// @name        DailyFail Clean 
// @description Adapted from, greasyfork.org/en/scripts/9323-dailymail-right-pane-remover
// @match       *://*dailymail.co.uk*
// ==/UserScript==

iframe,
#articleIconLinksContainer,
#footer,
#infinite-list,
#mini-carousel-wrapper,
#most-read-news-wrapper,
#most-watched-videos-wrapper,
#p-16,
#reader-comments,
.and-footer,
.beta,
.fb,
.floating-buttons,
.jkl23j4l23,
.mol-previous-next-navigation_previous-button,
.mol-previous-next-navigation_next-button,
.page-footer,
.rc-content,
.related-carousel,
.shareArticles,
.supplements,
.weather {
    display:none !important;
}

[citizensoftheworld]

I can see it now. What's you're doing is actually in line with correct CSS semantics. It will be no hardship adapting previous stylesheets now I understand your thinking.

Thank you Justin for the prompt reply, and for a superb extension.

Having control within Safari has been a long time coming.

[quoid]

Awesome glad to hear you can adapt them. I'll be tweaking the syntax next version, I think. But it shouldn't affect ones using the syntax I pasted above. I'm thinking of switch out "UserStyle" to something else to avoid the association.

Anyway, I'll close the issue since it seems like this is settled.

[howsiyu]

I can't get the test style working.

[quoid]

@howsiyu There's an error in your metadata

@match https://www.google.com*

Should be:

@match https://www.google.com/*

[howsiyu]

@quoid Thanks it works now. The css is created by you a few comments above.