Why can custom style sheets take effect on local web pages in Safari but not on Baidu pages?

Safari custom stylesheet: effective locally, invalid remotely?

This article analyzes a common problem with Safari browser custom style sheets: Why does the custom CSS that takes effect on local web pages fail when accessing remote websites such as Baidu?

A front-end developer using a custom stylesheet in Safari preferences, try the following CSS code:

 body {
    background-image: url("/Users/luxury/Desktop/wallhaven-o5762l.png") !important;
}

The test results show that the style under the local web page (file protocol) takes effect, while the style under the Baidu web page (http protocol) has expired.

The key to the problem lies in protocol differences and resource paths . Local web pages use the file protocol to directly access the local file system; while Baidu web pages use the http protocol to access the remote server. url("/Users/luxury/Desktop/wallhaven-o5762l.png") in the custom style sheet tries to reference the local image, which is obviously inaccessible in the remote web environment.

The browser will parse the URL according to the protocol of the current web page. On the Baidu page, the browser will try to visit http://www.baidu.com/Users/luxury/Desktop/wallhaven-o5762l.png . This path does not exist, causing the image to fail to load, resulting in the style failure. Although the CSS rules themselves may be applied, the background image cannot be displayed due to the image resource 404. The web panel of the developer tools can verify this.

In addition, Safari's user style sheet mechanism may have restrictions on the processing of local file paths. For further verification, it is recommended to try to modify the CSS code, for example:

 body {
    background: #ffbebe url("/Users/luxury/Desktop/wallhaven-o5762l.png") !important;
}

This will set a default background color, and you can observe whether the style is applied even if the image fails to load.

In short, in custom stylesheets, avoid using file protocol and local absolute path reference resources, especially projects deployed to servers. The correct approach is to use relative paths or complete network paths to refer to resources.

The above is the detailed content of Why can custom style sheets take effect on local web pages in Safari but not on Baidu pages?. For more information, please follow other related articles on the PHP Chinese website!