HOW it WAS
The old generator was working this way:
- Fetching Colors and Percentages then place them in arrays.
- Inserting CSS rules directly inside a style sheet:
document.styleSheets[6].insertRule("#pieSlice12{}",2);
- Editing these CSS rules using:
document.styleSheets[6].cssRules[(parseInt(document.styleSheets[6].cssRules.length)-1)].style.transform="rotate(180deg)";
- Then I display all these rules by going through a loop.
PROBLEM
The problem I faced is that Blogger uses a different number of style sheets in each browser, and working this way, I was mixing my own CSS styles with Blogger's own CSS styles, so it was difficult to know the position of my generated rules.
FIX
The best workaround I found was to create my own style sheet.
<style id="mySheet">
</style>
Then I could manipulate CSS styles using:
document.getElementById("mySheet").sheet.cssRules[1];
I no longer need to know the index of the style sheet, I can call it directly using the ID, and I just had to add the sheet property.