Cheap CSS implementations?
September 2, 2010
CSS3 defines [att=val] selectors . And they work in all modern browsers in static form.
But when you will try to use such a selector with attributes changed from script you will get problems.
Following works as expected in FF but does not work in Google Chrome and Opera:
<html>
<head>
<style>
div { display:none; }
body[show="n1"] #n1 { display:block; }
body[show="n2"] #n2 { display:block; }
</style>
<script type="text/javascript">
function test()
{
document.body.setAttribute("show","n2");
}
</script>
</head>
<body show="n1">
<a href="javascript:test()">Test</a>
<div id="n1">1</div>
<div id="n2">2</div>
</body>
</html>
I am wondering why Opera and WebKit implementations are failed on this simple test.
As for my [educated] knowledge attribute value selector has the same complexity as e.g. class selector in CSS. No idea to be honest.
I confirm, the same in new google 6.
Best regards,
JoseSilva
Comment by JoseSilva — September 3, 2010 @ 11:35 am
Hi! It works on the Opera 10.62
Comment by maxforme — September 10, 2010 @ 12:42 am
Thank, maxforme. Good to know that Opera team have found resources to fix that.
Comment by Andrew — September 10, 2010 @ 8:25 pm