Kenapa lembaran gaya tersuai berkuatkuasa pada laman web tempatan di Safari tetapi tidak di halaman Baidu?

Safari Custom Stylesheet: Berkesan secara tempatan, tidak sah dari jauh?

Artikel ini menganalisis masalah biasa dengan Lembaran Gaya Pelayar Safari: Kenapa CSS tersuai yang berkuatkuasa pada laman web tempatan gagal apabila mengakses laman web jauh seperti Baidu?

Pemaju front-end menggunakan lembaran gaya tersuai dalam keutamaan safari, cuba kod CSS berikut:

 badan {
    Latar Belakang-Image: URL ("/Pengguna/Mewah/Desktop/Wallhaven-O5762L.png")! PENTING;
}

Hasil ujian menunjukkan bahawa gaya di bawah laman web tempatan (protokol fail) berkuatkuasa, manakala gaya di bawah laman web Baidu (protokol HTTP) telah tamat.

Kunci masalah terletak pada perbezaan protokol dan laluan sumber . Laman web tempatan menggunakan protokol fail untuk mengakses sistem fail tempatan secara langsung; manakala laman web Baidu menggunakan protokol HTTP untuk mengakses pelayan jauh. url("/Users/luxury/Desktop/wallhaven-o5762l.png") dalam lembaran gaya tersuai cuba merujuk imej tempatan, yang jelas tidak dapat diakses dalam persekitaran web terpencil.

Pelayar akan menghuraikan URL mengikut protokol laman web semasa. Di halaman Baidu, penyemak imbas akan cuba melawat http://www.baidu.com/Users/luxury/Desktop/wallhaven-o5762l.png . Laluan ini tidak wujud, menyebabkan imej gagal memuatkan, mengakibatkan kegagalan gaya. Walaupun peraturan CSS sendiri boleh digunakan, imej latar belakang tidak dapat dipaparkan kerana sumber imej 404. Panel web alat pemaju dapat mengesahkannya.

Di samping itu, mekanisme lembaran gaya pengguna Safari mungkin mempunyai sekatan ke atas pemprosesan laluan fail tempatan. Untuk pengesahan selanjutnya, adalah disyorkan untuk cuba mengubah suai kod CSS, sebagai contoh:

 badan {
    Latar Belakang: #FFBEBE URL ("/Users/Luxury/Desktop/Wallhaven-O5762L.png")! PENTING;
}

Ini akan menetapkan warna latar belakang lalai, dan anda boleh melihat sama ada gaya digunakan walaupun imej gagal dimuatkan.

Ringkasnya, dalam stylesheets tersuai, elakkan menggunakan protokol fail dan sumber rujukan laluan mutlak tempatan, terutamanya projek yang dikerahkan ke pelayan. Pendekatan yang betul adalah menggunakan laluan relatif atau laluan rangkaian lengkap untuk merujuk kepada sumber.

Atas ialah kandungan terperinci Kenapa lembaran gaya tersuai berkuatkuasa pada laman web tempatan di Safari tetapi tidak di halaman Baidu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!