kangax said:
Garrett said:
kangax said:
Thomas 'PointedEars' Lahn wrote:
[...]
function getRulesMap(s)
{
function normalizeSelector(sel)
{
return sel.replace(
/([^#.])(\w+)/g,
function(m, p1, p2) {
return p1 + p2.toLowerCase();
});
}
This will turn "BODY" into "Body" and "#FOO" into "#Foo". And if you
Yeah, that wouldn't work as-is. Even with a small tweak to the RegExp
to add a '+' after the group, the approach would fail because you
can't modify selectorText in IE.
MSDN's four-star documentation[1] says that selectorText is read/write
but I just get the error "Not implemented." (example below).
Actually, MSDN says two things:-
| selectorText Property
|
| Retrieves a string that identifies which elements the corresponding
| style sheet rule applies to.
| Syntax
|
| [ sSelectorText = ] object.selectorText
Notice it does *not* read "Sets or retrieves[...]" but "retrieves[...]".
Immediately below that:-
| Possible Values
|
| sSelectorText String that specifies or receives the element.
|
| The property is read/write. The property has no default value.
I am lost as to how to interpret that first sentence. "the element"
could be interpreted as "selector-text to be applied to the styleSheet."
The second sentence clearly states: "The property is read/write".
Seems to be factually false, from IE5.5 to IE8. Perhaps the
selectorText needs massaging. Maybe whitespace? I don't know couldn't
get it to work, as the example below demonstrates.
Well, DOM Level 2 Style specs do not mention that `selectorText`
property of a `CSStyleRule` interface is readonly
<
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule>
They say that there might be two types of errors thrown, but an error
you mentioned doesn't look like one of them.
On the other hand, FF (3.0.9) doesn't seem to allow to modify
`selectorText` either. It doesn't throw, as IE does, but it doesn't
mutate it either.
Even if IE *did* allow modifying the selectorText, it might still
convert that rule.selectorText to upper case, either upon setting or
upon subsequent retrieval. Element selectors are case sensitive in
CSS, just IE changes them to upper case.
You might have noticed the one in APE:-
http://github.com/GarrettS/ape-java...5ce25746a2/src/dom/StyleSheetAdapter.js#LC105
APE.dom.StyleSheetAdapter._tagNamesToUpperCase = function(s) {
// Element Selector = Start of string or ws,
// followed by one or more letter chars.
var elementSelector = /(^|\s)([a-z]+)/;
var matches = s.match( elementSelector ), R = RegExp;
while( elementSelector.test(s) ) s = s.replace(elementSelector,
R.$1+R.$2.toUpperCase());
return s;
};
Interesting. I'm not familiar with DOM L2 Style module. Will take a look
at your `StyleSheetAdapter`.
[...]
Example
<html>
<head>
<title></title>
<style type="text/css">
body{ }
</style>
</head>
<body>
<script type="text/javascript">
var sheet = document.styleSheets[0],
rules = "cssRules" in sheet ? sheet.cssRules : sheet.rules;
if(typeof rules != "undefined") {
document.write("rules[0].selectorText: " + rules[0].selectorText);
s = "<br>assign rules[0].selectorText = 'body'";
try {
rules[0].selectorText = "body";
document.write("rules[0].selectorText: " + rules[0].selectorText);
} catch(ex) {
document.write("error: " + ex.message);
}
}
</script>
</body>
</html>
Firefox, Safari, Opera, Chrome:
rules[0].selectorText: body
assign rules[0].selectorText = 'body'...
rules[0].selectorText: body
Was this example aimed at testing whether setter throws or if setting
operation is successful? I assume it's the former one, since you're
assigning the same selector string, making it impossible to check if
modification took place.
Yeah, right.
The example should use new selectorText. This next test case affects a
visual update on the page that can be confirmed visually and
programmatically (by checking computed style or currentStyle). (Example
below).
First a look at DOM 2 Style spec:-
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule
| selectorText of type DOMString
| The textual representation of the selector for the rule set. The
| implementation may have stripped out insignificant whitespace while
| parsing the selector.
| Exceptions on setting
|
| DOMException
|
|
| SYNTAX_ERR: Raised if the specified CSS string value has a syntax
| error and is unparsable.
|
| NO_MODIFICATION_ALLOWED_ERR: Raised if this rule is readonly.
| style of type CSSStyleDeclaration, readonly
| The declaration-block of this rule set.
A SYNTAX_ERR should be raise if the selectorText is set with a value
that is unparseable. That I understand.
A NO_MODIFICATION_ALLOWED_ERR if the rule is readonly. How can I know if
the rule should be readonly?
The following example sets selectorText of a cssRule. I create a rule
with selectorText "u" and try to modify that to "#pass". This affects
the div id="pass" (and class="pass"). Since id has higher specificity
than class, applying the style rules for ID should take precedence.
<!doctype html>
<html>
<head>
<title>assign to selectorText</title>
<style type="text/css">
u {
/* try to modify this rule */
background: #090;
display: block;
color: #cfc;
}
..pass {
display: none;
}
</style>
</head>
<body>
<pre id="pass" class="pass">pass</pre>
<script type="text/javascript">
var sheet = document.styleSheets[0],
rules = "cssRules" in sheet ? sheet.cssRules : sheet.rules,
newSelectorText = "#pass";
if(typeof rules != "undefined") {
document.write("<pre>rules[0].selectorText: " + rules[0].selectorText
+ "<" + "/pre>");
document.write("<p>assign rules[0].selectorText = " + newSelectorText
+ "...</p>");
try {
rules[0].selectorText = newSelectorText;
document.write("<pre>rules[0].selectorText: " +
rules[0].selectorText+ "<" + "/pre>");
} catch(ex) {
document.write("<b>error: " + ex.message+ "<" + "/b>");
}
var resultEl = document.getElementById("pass");
var dv = document.defaultView;
var display = dv && "getComputedStyle" in dv ?
dv.getComputedStyle(resultEl, "").display :
resultEl.currentStyle.display;
document.write("<br>", display == "block" ? "view updated" : "view
not updated");
}
</script>
</body>
</html>
Result:
Opera:
| pass
| rules[0].selectorText: u
|
| assign rules[0].selectorText = #pass...
| rules[0].selectorText: #pass
|
| view updated
Firefox, Safari, Chrome:-
| rules[0].selectorText: u
| assign rules[0].selectorText = #pass...
|
| rules[0].selectorText: u
|
| view not updated
IE7:
| rules[0].selectorText: BODY
| assign rules[0].selectorText = #pass...
|
| error: Not implemented
| view not updated
IE Usability Note: select-all and copy (ctrl+c) did not include newlines
and included the "pass" text that was not visually displayed.
Modifying the selectorText resulted in Error in IE, failed silently in
FF, Chrome, and Safari, and succeeded in Opera.
Garrett
