Why Can\'t I Access CSS Rules in Chrome 64 from Local Files?-CSS Tutorial-php.cn

Why Can\'t I Access CSS Rules in Chrome 64 from Local Files?

Linda Hamilton

Release： 2024-11-03 06:48:30

Original

887 people have browsed it

Why Can't I Access CSS Rules in Chrome 64 from Local Files?

CSS Object Model Access Restricted in Chrome 64

Accessing CSS rules from locally loaded stylesheets became problematic in Chrome 64. To understand this issue, consider the following code snippet:

<code class="html"><head>
  <link rel='stylesheet' href='myStyle.css'>
  <script>
    window.onload = function() {
      try {
        alert(document.styleSheets[0]); // works
        alert(document.styleSheets[0].cssRules); // doesn't even print undefined
      } catch (e) { alert(e); } // catch and alert the error
    }
  </script>
</head></code>

Copy after login

With Chrome 64 onwards, accessing cssRules results in an error, even though document.styleSheets[0] returns the stylesheet object.

Cause:

This is due to a change in security rules for stylesheets, enforced in Chrome 64. Specifically, accessing the CSS Object Model (CSSOM) from local files violates a Cross-Origin Resource Sharing (CORS) policy.

Solutions:

Use a local development server: This provides a controlled environment where CORS policies are relaxed.
Host files online or on localhost: Using a web server eliminates the CORS issue.
Use other browsers: Browsers such as Firefox, Edge, and Internet Explorer allow CSSOM access from local files.

Impact and Workarounds:

This change impacts developers testing CSS functionality from the local filesystem. Workarounds like using online/localhost files or other browsers provide temporary solutions.

Debate and Open Questions:

Despite being a security fix, there are ongoing discussions and debates around this change. Some argue that the lack of an alternative way to detect accessibility issues is inconvenient. Others question the extent of its implementation in other browsers. As the W3C spec is still in development, it remains to be seen how this issue will evolve.

The above is the detailed content of Why Can\'t I Access CSS Rules in Chrome 64 from Local Files?. For more information, please follow other related articles on the PHP Chinese website!