Pourquoi les feuilles de style personnalisées peuvent-elles prendre effet sur les pages Web locales de Safari mais pas sur les pages Baidu?

Safari Custom Stylesheet: efficace localement, non valide à distance?

Cet article analyse un problème commun avec les feuilles de style personnalisé du navigateur Safari: pourquoi le CSS personnalisé qui prend effet sur les pages Web locaux échoue lors de l'accès à des sites Web distants tels que Baidu?

Un développeur frontal utilisant une feuille de style personnalisée dans les préférences Safari, essayez le code CSS suivant:

 corps {
    Image en arrière-plan: URL ("/ utilisateurs / luxe / bureau / wallhaven-o5762l.png")! IMPORTANT;
}

Les résultats des tests montrent que le style sous la page Web locale (protocole de fichier) prend effet, tandis que le style sous la page Web Baidu (protocole HTTP) a expiré.

La clé du problème réside dans les différences de protocole et les chemins de ressources . Les pages Web locales utilisent le protocole de fichier pour accéder directement au système de fichiers local; Alors que les pages Web Baidu utilisent le protocole HTTP pour accéder au serveur distant. url("/Users/luxury/Desktop/wallhaven-o5762l.png") dans la feuille de style personnalisée essaie de référencer l'image locale, qui est évidemment inaccessible dans l'environnement Web distant.

Le navigateur analysera l'URL en fonction du protocole de la page Web actuelle. Sur la page Baidu, le navigateur essaiera de visiter http://www.baidu.com/Users/luxury/Desktop/wallhaven-o5762l.png . Ce chemin n'existe pas, provoquant le chargement de l'image, entraînant la défaillance du style. Bien que les règles CSS elles-mêmes puissent être appliquées, l'image d'arrière-plan ne peut pas être affichée en raison de la ressource d'image 404. Le panneau Web des outils du développeur peut le vérifier.

De plus, le mécanisme de la feuille de style utilisateur de Safari peut avoir des restrictions sur le traitement des chemins de fichier locaux. Pour plus de vérification, il est recommandé d'essayer de modifier le code CSS, par exemple:

 corps {
    Contexte: URL #ffbebe ("/ utilisateurs / luxe / bureau / wallhaven-o5762l.png")! IMPORTANT;
}

Cela définira une couleur d'arrière-plan par défaut, et vous pouvez observer si le style est appliqué même si l'image ne se charge pas.

En bref, dans les feuilles de styles personnalisées, évitez d'utiliser le protocole de fichier et les ressources de référence de chemin absolu locales, en particulier les projets déployés sur les serveurs. L'approche correcte consiste à utiliser des chemins relatifs ou à terminer les chemins de réseau pour désigner les ressources.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!