CSS rules doesn't work in opera 11.60

I wrote lots of css to define the view of a webpage.
And I usually apply a css named Adblock.css to all webpages to block Ads.
For example,
I use below css to block the avatar, the signature and footer in forums.

DIV[class*="avatar"]{display: none !important;}  
DIV[class="sign"]{display: none !important;} 
 DIV[id="footer"]{display: none !important;}

After I upgrade from 11.52 to 11.60, this css stop working.

Is it a bug?

Yes, styling a simple

textarea

per user stylesheet doesn’t work anymore too. :(

Originally posted by oceanstar:

I use below css to block the avatar, the signature and footer in forums.

DIV[class*="avatar"]{display: none !important;}  
DIV[class="sign"]{display: none !important;} 
 DIV[id="footer"]{display: none !important;}

After I upgrade from 11.52 to 11.60, this css stop working.
Is it a bug?

I wonder why it worked at all. None of your lines should work in My Opera: [class*="avatar"] is not an attribute for the DIV element, a class "sign" doesn't exist and "footer" is a class here, not an id.

Try

[class*="avatar"],
[class*="sig"],
div.footer {display: none !important;}

Originally posted by mochikun:

Originally posted by oceanstar:

I use below css to block the avatar, the signature and footer in forums.

DIV[class*="avatar"]{display: none !important;}  
DIV[class="sign"]{display: none !important;} 
 DIV[id="footer"]{display: none !important;}

After I upgrade from 11.52 to 11.60, this css stop working.
Is it a bug?

I wonder why it worked at all. None of your lines should work in My Opera: [class*="avatar"] is not an attribute for the DIV element, a class "sign" doesn't exist and "footer" is a class here, not an id.

Try

[class*="avatar"],
[class*="sig"],
div.footer {display: none !important;}

Hi, this code is for blocking 3 element...It works fine with 11.52. If you use ADblock, it will generate the same CSS.
I don't know why it doesnt' work with 11.60. Is it a bug or 11.60 means to do that?

+1

I confirm that Opera has stopped applying my user CSS files properly on sites. I, too, came to notice it with textarea elements first. The issue remains in the public 11.60 release.

Originally posted by oceanstar:

...It works fine with 11.52. If you use ADblock, it will generate the same CSS.

No, it doesn't, at least not here in the MyOpera forum...no surprise. Just tested with 11.52. On which site is it supposed to work?

Originally posted by toscho:

Yes, styling a simple

textarea

per user stylesheet doesn’t work anymore too.

+1
http://files.myopera.com/Ryszard/files/textarea.png
Why?

Why?

Originally posted by mochikun:

Originally posted by oceanstar:

...It works fine with 11.52. If you use ADblock, it will generate the same CSS.

No, it doesn't, at least not here in the MyOpera forum...no surprise. Just tested with 11.52. On which site is it supposed to work?

you can try this one

http://www.distown.net/

Originally posted by oceanstar:

you can try this one
http://www.distown.net/

Tried it on 11.60:

DIV[class*="avatar"]{display: none !important;} ==> works perfectly  
DIV[class="sign"]{display: none !important;}    ==> not testable (no sigs)
DIV[id="footer"]{display: none !important;}     ==> not testable (no footer)

Maybe something wrong with references to your CSS files?

Originally posted by trupson:

But it depends on the forum. For example, if you want to block the avatar on my opera you need to put
.forumavatar {display: none !important;}
in your css file.

Yes, that would be much better, but If I understand the OP correctly he uses one custom CSS files for all forums, hence his strange syntax:
[class*="avatar"] would find any stylename containing "avatar", including "forumavatar". His CSS rules are very strict and IMHO unsuitable as default rules, but the syntax is OK and works for me in 11.60 while he claims it doesn't.

Hi, in opera 11.52 or any version before 11.60

DIV[id*="adfloat"]{display: none !important;} means block the div which id is adfloat
DIV[id^="adfloat"]{display: none !important;} means block the div which id is started with adfloat
DIV[id*="Adv"]{display: none !important;} means block the div which id is containning word 'adv'

So for my CSS

DIV[class*="avatar"]{display: none !important;}
DIV[class="sign"]{display: none !important;}
DIV[id="footer"]{display: none !important;}

I think it's OK.
Does opera change the user css rules in 11.60? it's more strict now?

Originally posted by oceanstar:

Does opera change the user css rules in 11.60? it's more strict now?

No, it is broken.

textarea { border-radius: 0 !important; }

… must override the author rule. See CSS 2.1 for details. It doesn’t now.

Originally posted by oceanstar:

I think it's OK.
Does opera change the user css rules in 11.60? it's more strict now?

Yes, it's OK, and as I mentioned before the syntax works perfectly on your linked site, although only 1 of your rules apply to this site. In other words: your linked site is a bad example for what you want to demonstrate. I just can't verify your problem.

Originally posted by toscho:

No, it is broken.

textarea { border-radius: 0 !important; }

… must override the author rule. See CSS 2.1 for details. It doesn’t now.

If you ask me, the spec is broken as well. Higher specificity should override author rules without having to resort to !important. Sadly Opera fixed this "bug" around version 9 or so.

Sadly, this is pretty much a showstopper for me. I am going to downgrade to Opera 11.5x. All textareas and text inputs are something like #eeeeee foreground on #ffffff background. Barely visible at all.

Sorry, Opera, but you #fail here. I guess that's what large rewrites do to your codebase... can haz test suite? :-\

Someone should file a clear precise testcase; the subject of this forum thread does not exactly match the problem.

How to reproduce the bug.

Create a user style stylesheet with this content:

textarea{width: 80% !important}

Go to http://labs.toscho.de/escape/ and set the user stylesheet as a page specific stylesheet. Watch how the textarea is not 80% wide.

Yes, these are known bugs. Concerning

DIV[class*="avatar"]{display: none !important;}

it is caused by tag name written in UPPERCASE. Workaround is to replace DIV with div.

Concerning textarea - my workaround is a bit more tricky: first you should replace

textarea { border-radius: 0 !important; }

with something like

.ThisIsATextareaSoStyleItPlease { border-radius: 0 !important; }

(i.e. use a class name that none uses), and then add a UserJS file like this:

(function(){
var q=document.getElementsByTagName('textarea');
for(var w=0;w<q.length;w++)
    q[w].className+=' ThisIsATextareaSoStyleItPlease';
})();

(this will add this class to all textareas).

Of cause, this will not work for dynamically-created elements - in this case you have to use bookmarklets, custom buttons or timers...

Thanks!

It's weird that some styles don't work anymore in user styel sheets, and others still work. Add a rule h1 {font-style: italic !important} to the same stylesheet, and you'll notice that *that* one is still applied in 11.60.

I'll try to see if we have a bug report on this regression.

Originally posted by Rijk:

It's weird that some styles don't work anymore in user styel sheets, and others still work. Add a rule h1 {font-style: italic !important} to the same stylesheet, and you'll notice that *that* one is still applied in 11.60.

The difference is the specificity in the author stylesheet: The h1 is addressed as h1 {}, the textarea as textarea.wide{}.

Add …

textarea.wide{border: 1px solid red !important}

… and the rule is applied. Just border-color does not work.

But … specificity in author stylesheets is irrelevant for user stylesheets. It looks like Opera now applies the author rules after the user rules. The cascading order is broken.

Originally posted by toscho:

Originally posted by Rijk:

It's weird that some styles don't work anymore in user styel sheets, and others still work. Add a rule h1 {font-style: italic !important} to the same stylesheet, and you'll notice that *that* one is still applied in 11.60.

The difference is the specificity in the author stylesheet: The h1 is addressed as h1 {}, the textarea as textarea.wide{}.

Add …

textarea.wide{border: 1px solid red !important}

… and the rule is applied. Just border-color does not work.

But … specificity in author stylesheets is irrelevant for user stylesheets. It looks like Opera now applies the author rules after the user rules. The cascading order is broken.

is it a bug? will opera fix it?

any update?

This bugs (about uppercase tags and textarea) are forwarded to developers and they will fix them according to their working schedule.

Concerning

Originally posted by toscho:

But … specificity in author stylesheets is irrelevant for user stylesheets. It looks like Opera now applies the author rules after the user rules. The cascading order is broken.

Doesn't cited spec say that "author normal declarations" (item 3) should go after "user normal declarations" (item 2)?

i won't go into detail because much has already been said, but i have several serious issues with opera 11.60 and css not working properly (for example, can't log out from facebook anymore because the dropdown menu isn't working properly ...) i was developing today under opera and had to switch to chrome because of opera ignoring declarations etc.

let me say that i'm extremely disappointed. in particular because opera has so much to offer and there is no real alternative to it, neither chrome nor ff. opera has a very small market share. why do you risk it with such a bad update?

i hope that you improve and i don't have to switch back to other browsers.

have you filed a bug report? maybe you should.

Originally posted by alex-shpak:

Doesn't cited spec say that "author normal declarations" (item 3) should go after "user normal declarations" (item 2)?

Yes, but we are talking about rules with an !important. Those have to win always.

Just want to add my weight to this one. It was working fine before and now it's not. It's especially annoying in my case because now all my textarea boxes are blue. Even this one.

Any update? This is STILL not working in Opera 12.

No updates, sorry. Let me just leave bug numbers for future reference:

CORE-43001 (CSS selectors in UserCSS files are case-sensitive)
CORE-43069 (user css not applied to textarea)

Thanks for the reply, Alex!