공급업체별 자리 표시자 선택기를 단일 CSS 규칙에 결합할 수 없는 이유는 무엇입니까?

공급업체별 선택기 결합의 수수께끼 풀기

CSS 영역 내에서 여러 브라우저에 걸쳐 자리 표시자 텍스트 스타일을 지정하는 난제에 직면합니다. . 최적의 브라우저 간 지원을 달성하기 위해 공급업체별 의사 클래스와 의사 요소의 조합이 사용됩니다. 그러나 당혹스러운 문제가 있습니다. 다른 CSS 시나리오에서 관례적인 것처럼 이를 단일 규칙 세트로 병합하는 것이 왜 불가능합니까?

CSS2.1 사양을 깊이 파고들면 답을 찾을 수 있습니다. 선택자는 첫 번째 왼쪽 중괄호({)까지 이어지는 모든 항목으로 정의되어야 합니다. 사용자 에이전트가 해독할 수 없는 선택기를 발견하면 선택기와 그에 따른 선언 블록을 모두 무시해야 합니다.

이는 특정 접두사가 있는 브라우저가 다른 공급업체별 접두사가 있는 선택기를 이해하지 못할 수 있음을 의미합니다. , 선택기에서 인식할 수 없는 접두사를 언급하는 규칙이 제외됩니다. 결과적으로 이러한 규칙을

input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder {
  font-style: italic;
  text-align: right;
}

과 같이 쉼표로 구분된 단일 규칙 세트로 결합하려는 시도는 소용이 없습니다. 사용자 에이전트는 인식된 선택자에만 스타일을 적용하므로 브라우저 간에 스타일이 일관되지 않게 됩니다.

이 복잡한 규칙은 목적에 부합합니다. 이는 브라우저가 인식된 CSS 구문을 준수하고 완전히 이해하는 규칙만 구현하도록 보장합니다. 이를 시행함으로써 공급업체별 편차로 인한 잠재적인 불일치나 렌더링 오류를 방지할 수 있습니다.

위 내용은 공급업체별 자리 표시자 선택기를 단일 CSS 규칙에 결합할 수 없는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!