Safari의 로컬 웹 페이지에서 맞춤형 스타일 시트가 적용되지만 Baidu 페이지에서는 그렇지 않은 이유는 무엇입니까?

Safari Custom Stylesheet : 현지에서 효과적이고 유효하지 않게?

이 기사는 Safari 브라우저 사용자 정의 스타일 시트의 일반적인 문제를 분석합니다. Baidu와 같은 원격 웹 사이트에 액세스 할 때 로컬 웹 페이지에 적용되는 사용자 정의 CSS가 실패하는 이유는 무엇입니까?

Safari 환경 설정에서 사용자 정의 스타일 시트를 사용하는 프론트 엔드 개발자는 다음 CSS 코드를 사용해보십시오.

 몸 {
    배경 이미지 : URL ( "/user/luxury/goodtop/wallhaven-o5762l.png")!
}

테스트 결과는 로컬 웹 페이지 (파일 프로토콜)의 스타일이 적용되는 반면 Baidu 웹 페이지 (HTTP 프로토콜)의 스타일이 만료되었음을 보여줍니다.

문제의 핵심은 프로토콜 차이 와 리소스 경로 에 있습니다. 로컬 웹 페이지는 파일 프로토콜을 사용하여 로컬 파일 시스템에 직접 액세스합니다. Baidu 웹 페이지는 HTTP 프로토콜을 사용하여 원격 서버에 액세스합니다. url("/Users/luxury/Desktop/wallhaven-o5762l.png") 로컬 이미지를 참조하려고 시도하며, 이는 원격 웹 환경에서 접근 할 수 없습니다.

브라우저는 현재 웹 페이지의 프로토콜에 따라 URL을 구문 분석합니다. Baidu 페이지에서 브라우저는 http://www.baidu.com/Users/luxury/Desktop/wallhaven-o5762l.png 를 방문합니다. 이 경로는 존재하지 않으므로 이미지가로드되지 않아 스타일 고장이 발생합니다. CSS 규칙 자체가 적용될 수 있지만 이미지 리소스 404로 인해 배경 이미지를 표시 할 수 없습니다. 개발자 도구의 웹 패널에서이를 확인할 수 있습니다.

또한 Safari의 사용자 스타일 시트 메커니즘은 로컬 파일 경로 처리에 제한이있을 수 있습니다. 추가 확인을 위해 CSS 코드를 수정하는 것이 좋습니다.

 몸 {
    배경 : #ffbebe url ( "/user/luxury/goodtop/wallhaven-o5762l.png")!
}

이렇게하면 기본 배경색이 설정되며 이미지가로드되지 않더라도 스타일이 적용되는지 여부를 관찰 할 수 있습니다.

요컨대, 사용자 정의 스타일 시트에서는 파일 프로토콜 및 로컬 절대 경로 참조 리소스, 특히 서버에 배포 된 프로젝트를 사용하지 마십시오. 올바른 접근법은 상대 경로 또는 완전한 네트워크 경로를 사용하여 리소스를 참조하는 것입니다.

위 내용은 Safari의 로컬 웹 페이지에서 맞춤형 스타일 시트가 적용되지만 Baidu 페이지에서는 그렇지 않은 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!