As we all know, those who do front-end development want to kick IE developers a few times. The reputation of IE developers is no less than that of GFW developers. They ruin the market against their conscience, and everyone can punish them. However, in these places in China, there is no way to bow to reality.
Recently, our product needs to dynamically load a piece of CSS in the browser, and the previous code was used directly:
The code copy is as follows:
var bubbleCss = document.createElement('style');
bubbleCss.type = 'text/css';
bubbleCss.innerHTML = blc_conf.bubbleStyle;
document.getElementsByTagName('head')[0].appendChild(bubbleCss);
However, this is only supported by IE9, and there will be problems under IE8. I have never noticed this. I didn't find it until I recently refactored and did a complete test.
I found a trick online. I tried it and it works, but there are some problems
The code copy is as follows:
window.bc_bubble_css = blc_conf.bubbleStyle;
document.createStyleSheet("javascript:bc_bubble_css");
Here you can create a style defined by the variable bc_bubble_css. However, as HTML5 is gradually becoming popular, some css3 selectors are also mixed in our css. Using this method will cause the IE8 parser to throw an exception when parser parsed to the css3 selector and stop parsing the subsequent css. This makes the css only loaded half of the css. The methods found online are to use the StyleSheet type addRule to increase it, but this requires you to specify the css2 selector and style.
Therefore, it is necessary to disassemble a single rule from CSS and then call addRule in turn. Example:
The code copy is as follows:
var s = document.createStyleSheet();
var rules = blc_conf.bubbleStyle.replace(///*[^/*]*/*//g, "").replace(/@[^{]*/{/g, '').match(/[^/{/}]+/{[^/}]+/}/g);
for(var i = 0; i < rules.length; i++) {
var m = rules[i].match(/(.*)/s*/{/s*(.*)/}/);
if(m) {
try {
s.addRule(m[1], m[2]);
} catch(e) {
}
}
}
There are two replacements at the beginning, removing the gaze and part of the css3 selector, but there are still selectors that miss the network, and you need to catch it later by trying catch.
Also, I despise those who design IE interfaces again