>  기사  >  웹 프론트엔드  >  잘못된 선택자로 인해 CSS 규칙이 삭제되는 이유는 무엇입니까?

잘못된 선택자로 인해 CSS 규칙이 삭제되는 이유는 무엇입니까?

DDD
DDD원래의
2024-11-18 03:05:02158검색

Why Are CSS Rules Dropped Due to Invalid Selectors?

잘못된 CSS 선택기로 인해 규칙이 삭제됨: 근거

배경

CSS 선택기 레벨 3에서 구문 분석 오류로 인해 다음이 포함된 규칙이 삭제됩니다. 잘못된 선택자. 이 동작은 수년간 브라우저에서 일관되게 구현되어 예측 가능한 오류 처리를 보장합니다.

이유

전체 규칙을 폐기하는 이유는 다양합니다.

  1. 선택기 구문 분석의 모호성: 쉼표 및 기타 구두점으로 인해 구문 분석이 모호해질 수 있습니다. 순진한 파서는 오류 발생 없이 선택기 그룹 또는 선언 블록의 범위를 결정하는 데 어려움을 겪을 수 있습니다.
  2. 오류 처리의 일관성: 모든 구문 분석 오류를 균일하게 처리하면 구현이 단순화되고 일관되지 않은 동작이 발생할 가능성이 방지됩니다.
  3. 향후 호환성: 새로운 선택기 구문의 미래 잠재력을 인식하면 더 복잡하고 모호한 오류 처리 규칙의 도입을 방지할 수 있습니다.

문제를 설명하기 위해 다음은 규칙 예입니다.

#menu li.last, #menu li:last-child {
  ...
}

:last-child 지원이 부족한 IE8과 같은 브라우저에서는 유효성에도 불구하고 잘못된 선택기로 인해 전체 규칙이 삭제됩니다.

대체 접근 방식

규칙을 삭제하지 않고 인식할 수 없는 선택자를 삭제하는 것이 고려되었습니다. 그러나 잠재적인 위험이 있었습니다.

  1. 예기치 않은 선택기 동작: 구문 분석된 선택기가 잘못 적용되어 예상치 못한 레이아웃이나 스타일이 발생할 수 있습니다.
  2. 구현 복잡성: 유효하지 않은 선택기와 유효한 선택기를 분할할 위치를 결정하는 것은 어려울 수 있으며 오류가 발생할 수 있습니다.

예외

일부 레이아웃 엔진은 다른 동작을 보일 수 있습니다. WebKit은 접두사가 붙은 선택기를 무시하는 반면 다른 것들은 전체 규칙을 무시합니다. 이러한 편차는 오류 처리 규칙이 개정될 경우 브라우저 간 불일치가 발생할 가능성을 강조합니다.

위 내용은 잘못된 선택자로 인해 CSS 규칙이 삭제되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.