Working with the CSSstyleSheet API
- Changing the selectorText -
Test 5 - adapting the script for IE-11
Instead of using the Developer Tool in order to change the selectorText's (impossible in IE-11), now we'll change them by javascript only.
As said, the cssRule.selectorText is readonly in IE-11, and can not be used. But IE-11 can
delete a whole style rule, and also
insert a new style rule, like the other browsers. This is
used as a workaround:
- Instead of skiving off the "main" of "main code" (with a selectorText replacement), the whole rule is deleted, and a new rule with only the "code" definition is inserted.
- The ".testbox1" in the 2nd style block only has to be deleted.
- The ".testbox2" is deleted, and a rule ".otherClass" is inserted.
See what happens!
Testing a style update
Just click the buttonto update the styles and selectorText.- Note: eventual changes made in the Developer Pane cause errors!
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
- Firefox, Chrome, Opera and IE-11 on desktop: working as expected. No difference online/offline.
- I suppose MS Edge will not deviate (not tested).
Conclusions
- Finish reached.
- In this case the CodePen embedding has distorted the results.
- It is commendable not to drop IE-11 during at least the
Windows8.1/IE-11 lifetime,
which is January 10, 2023;
not sure what's going to happen with IE-11 under Windows-10 at that moment.
Francky Kleyneman, 5 jan. 2019