カスタムスタイルのシートは、SafariのローカルWebページでバイドゥページでは効果を発揮できないのはなぜですか？

Safari Custom StyleSheet：現地で効果的で、リモートで無効ですか？

この記事では、Safariブラウザのカスタムスタイルのシートに関する一般的な問題を分析します。バイドゥなどのリモートWebサイトにアクセスすると、ローカルWebページで有効になるカスタムCSSが失敗するのはなぜですか？

Safari設定でカスタムスタイルシートを使用するフロントエンド開発者は、次のCSSコードを試してください。

体 {
    背景イメージ：url（ "/users/luxury/desktop/wallhaven-o5762l.png"）！faliest;
}

テストの結果は、ローカルWebページ（ファイルプロトコル）の下のスタイルが有効になり、Baidu Webページ（HTTPプロトコル）の下のスタイルが有効になっていることを示しています。

問題の鍵は、プロトコルの違いとリソースパスにあります。ローカルWebページは、ファイルプロトコルを使用して、ローカルファイルシステムに直接アクセスします。 BaiduのWebページは、HTTPプロトコルを使用してリモートサーバーにアクセスします。カスタムスタイルシートのurl("/Users/luxury/Desktop/wallhaven-o5762l.png")は、リモートWeb環境では明らかにアクセスできないローカル画像を参照しようとします。

ブラウザは、現在のWebページのプロトコルに従ってURLを解析します。 Baiduページでは、ブラウザはhttp://www.baidu.com/Users/luxury/Desktop/wallhaven-o5762l.pngにアクセスしようとします。このパスは存在せず、画像のロードに失敗し、スタイルの故障が発生します。 CSSルール自体が適用される場合がありますが、画像リソース404のために背景画像を表示することはできません。開発者ツールのWebパネルはこれを検証できます。

さらに、Safariのユーザースタイルシートメカニズムには、ローカルファイルパスの処理に制限がある場合があります。さらに検証するには、CSSコードを変更しようとすることをお勧めします。

体 {
    背景：#ffbebe url（ "/users/luxury/desktop/wallhaven-o5762l.png"）！faliest;
}

これにより、デフォルトの背景色が設定され、画像がロードに失敗した場合でもスタイルが適用されているかどうかを観察できます。

要するに、カスタムスタイルシートでは、ファイルプロトコルとローカルな絶対パス参照リソース、特にサーバーに展開されたプロジェクトの使用を避けてください。正しいアプローチは、相対パスまたは完全なネットワークパスを使用してリソースを参照することです。

以上がカスタムスタイルのシートは、SafariのローカルWebページでバイドゥページでは効果を発揮できないのはなぜですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。