Chrome 64 の CSS ルールにローカルファイルからアクセスできないのはなぜですか?-CSSチュートリアル-php.cn

Chrome 64 の CSS ルールにローカルファイルからアクセスできないのはなぜですか?

Linda Hamilton

リリース： 2024-11-03 06:48:30

オリジナル

921 人が閲覧しました

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

Chrome 64 で CSS オブジェクトモデルへのアクセスが制限される

Chrome 64 では、ローカルに読み込まれたスタイルシートからの CSS ルールへのアクセスに問題が発生しました。この問題を理解するには、次のようにします。次のコードスニペットを検討してください。

<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>

ログイン後にコピー

Chrome 64 以降では、document.styleSheets[0] がスタイルシートオブジェクトを返しても、cssRules にアクセスするとエラーが発生します。

原因:

これは、Chrome 64 で適用されたスタイルシートのセキュリティルールの変更によるものです。具体的には、ローカルファイルから CSS オブジェクトモデル (CSSOM) にアクセスすると、クロスオリジンリソース共有 (CORS) に違反します。

解決策:

ローカル開発サーバーを使用する: これにより、CORS ポリシーが緩和された制御された環境が提供されます。
オンラインまたはローカルホストでファイルをホストします: Web サーバーを使用すると、CORS の問題が解消されます。
他のブラウザを使用します: Firefox、Edge、 Internet Explorer では、ローカルファイルからの CSSOM アクセスが許可されます。

影響と回避策:

この変更は、ローカルファイルシステムから CSS 機能をテストする開発者に影響します。 online/localhost ファイルや他のブラウザを使用するなどの回避策が一時的な解決策となります。

議論と未解決の質問:

セキュリティ修正であるにもかかわらず、議論や議論が継続中です。この変化。アクセシビリティの問題を検出する代替方法がないのは不便だと主張する人もいます。他のブラウザでの実装の範囲を疑問視する人もいます。 W3C 仕様はまだ開発中であるため、この問題がどのように発展するかはまだわかりません。

以上がChrome 64 の CSS ルールにローカルファイルからアクセスできないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。