Working with the CSSstyleSheet API
- Changing the selectorText -
Test 3 - correcting script leaks
New vanilla javascript. - The for...of... statement is not supported by IE-11 (see
MDN compatibility list),
so I replaced it by a plain old for loop. To call the selectorText it seems not needed to stringify it
(the MDN description says that the
syntax of a CSSRule.selectorText is a string by itself), so I omitted it. Also applied some
JSLint suggestions.
See what happens!
Testing a style update
- Use the Developer Tool of the browser and go to the 2nd
<style>block in the<head>. - Click right and "Edit as HTML".
- Delete the word
mainof the selector rulemain code { ... } - Delete the whole style rule
.testbox-1 { background: turquoise; color: black }and leave the editor by clicking somewhere in the Developer Pane outside the editor box. - Then use the button to update the selectorText via the
CSSStyleSheetAPI.
This is ".testbox1"This is ".testbox2"
The initial selectorText for each style rule of the 2nd style block is:
*
main code
.testbox1
.testbox2
The updated selectorText for each style rule of the 2nd style block is:
*
code
.otherClass
Results
- For Firefox, Chrome and Opera the results of this test version 3 are the same as in the first and second test: still not good.
- IE-11 has now joined the others in the initial selectorText (correct).
- Now it appears impossible in IE-11 to edit the CSS blocks in the
<head>, so only a button click without changing anything is possible. Then the color results in IE-11 should be: "testbox1" still "turquoise/black", "testbox 2" now "green/white", and in the updated selectorText box the "expected" is now incorrect, and should read for IE-11:
* | main code | .testbox1 | .otherClass - But:
in IE-11 the "testbox2" is not green/white, and.testbox2is not replaced by.otherClass
Conclusions
- The CodePen was not telling the truth, the whole truth and nothing but the truth.
- There must be more leaks in the javascript...