title: Dynamically modify CSS rule in Safari
body: <p>Accessing my stylesheet works for me as per this example: <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information</a></p>
  
  <pre><code>document.styleSheets[1].cssRules[0].style.backgroundColor="blue";
  </code></pre>
  
  <p>This works perfectly on other browsers I tested, but not on Safari. Even the page I linked won't work on Safari (it works on iPhone but not on a Mac) - the background color remains red.</p>
  
  <p>Is there an alternative which works for Safari?</p>
  
  <p>By the way, Mozilla's documentation has some contradictions - this page says that the style property is readonly: <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleRule" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleRule</a></p>
  
  <p>But they modify it in an example, also people do it in examples all over the web. So I am not sure the problem is in Safari. Either way, I need a working way to change the CSS rules dynamically. </p>