CSS 선택기 구문 분석에 대한 심층적인 이해: 공급업체 접두사 의사 클래스 조합의 함정

이 기사에서는 CSS 선택기 조합의 일반적인 함정을 보여줍니다. 동일한 CSS 규칙에서 표준 의사 클래스와 공급업체 접두사가 붙은 의사 클래스(예: :read-only 및 :-moz-read-only)를 결합하는 것입니다. 인식할 수 없는 선택기를 브라우저에서 처리하기 때문에 이 조합으로 인해 전체 스타일 규칙이 실패할 수 있습니다. 이 글에서는 그 원리를 심층적으로 분석하고 다중 브라우저 환경에서 CSS 스타일의 호환성과 효율성을 보장하기 위한 올바른 작성 패러다임을 제공할 것입니다.

CSS 선택기 조합에 대한 일반적인 오해

CSS 스타일을 작성할 때 코드 단순성을 위해 개발자는 종종 쉼표를 통해 동일한 스타일 선언과 다른 선택기를 결합하려고 시도합니다. 예를 들어, 읽기 전용 입력 상자에 대한 테두리 스타일을 설정하고 싶을 수 있으며, 다양한 브라우저에서 공급업체 접두사가 붙은 의사 클래스가 필요할 수 있다는 점을 고려하여 다음과 유사한 CSS 코드를 작성할 수 있습니다.

 입력:읽기 전용,
입력:-moz-읽기 전용 {
  테두리: 1px 단색 빨간색;
}

그러나 이 겉으로는 합리적으로 보이는 코드는 일부 브라우저(예: Google Chrome)에서는 예상대로 작동하지 않을 수 있습니다. 구체적인 표현은 input:read-only가 Chrome에서 지원하는 표준 의사 클래스임에도 불구하고 input:-moz-read-only가 Firefox의 고유한 제조업체 접두사 의사 클래스이기 때문에 Chrome에서 이를 인식할 수 없으며 이로 인해 결국 전체 스타일 규칙이 무시되고 테두리 스타일이 적용되지 않는다는 것입니다.

CSS 선택기 구문 분석 메커니즘에 대한 심층 분석

위 문제가 발생하는 이유를 이해하려면 CSS 선택기의 구문 분석 메커니즘을 깊이 이해해야 합니다. CSS 사양은 쉼표로 구분된 선택기 목록에 대해 명확합니다.

핵심 원칙: 브라우저가 쉼표로 구분된 CSS 선택기 목록을 구문 분석할 때 목록의 선택기 가 유효하지 않거나 구문 오류가 있거나 현재 브라우저에서 인식되지 않는 경우(예: 공급업체 접두사가 붙은 의사 클래스가 해당하지 않는 브라우저에 있는 경우) 전체 규칙 세트(즉, {} 내의 모든 스타일 선언)가 유효하지 않은 것으로 간주됩니다. 브라우저에서는 무시됩니다.

구체적인 사례 분석:

1. input:read-only : 읽기 전용 상태인 또는 요소를 일치시키는 데 사용되는 표준 CSS 의사 클래스입니다. Chrome, Firefox, Edge 등을 포함한 최신 브라우저는 이 의사 클래스를 지원합니다.
2. input:-moz-read-only : 이는 Mozilla Firefox 브라우저와 관련된 공급업체 접두사 의사 클래스로, Firefox에서 읽기 전용 상태의 요소를 일치시키는 데 사용됩니다. 다른 브라우저(예: Chrome)는 이 의사 클래스를 인식하지 못합니다.

Google Chrome은 input:read-only, input:-moz-read-only 규칙을 발견하면 목록의 선택기를 순서대로 구문 분석합니다. input:read-only를 인식하지만 input:-moz-read-only로 해석되면 이는 Firefox 전용 접두사이므로 Chrome은 이를 유효하지 않거나 인식할 수 없는 선택기로 처리합니다. CSS 구문 분석 규칙에 따라 인식할 수 없는 선택기가 목록에 존재하면 Chrome은 즉시 전체 { border: 1px solid red; } 스타일 선언 블록으로 인해 input:read-only 자체가 유효하더라도 해당 스타일이 적용되지 않습니다.

두 개의 별도 규칙으로 작성하면 다음과 같습니다.

 입력:읽기 전용 {
    테두리: 1px 단색 빨간색;
}
입력:-moz-읽기 전용 {
    테두리: 1px 단색 빨간색;
}

이 경우 Chrome은 첫 번째 규칙을 성공적으로 구문 분석하고 적용합니다. input:read-only { border: 1px solid red; } 이 선택기를 완전히 이해하기 때문입니다. 두 번째 규칙 input:-moz-read-only { border: 1px solid red; }는 선택기를 인식하지 못하기 때문에 Chrome에서 무시되지만 첫 번째 규칙의 효과에는 영향을 미치지 않습니다. 마찬가지로 Firefox는 두 규칙을 모두 인식하고 적용합니다(표준 읽기 전용을 지원하는 경우).

올바른 연습 방법 및 예시

위의 구문 분석 메커니즘을 기반으로 하는 올바른 접근 방식은 표준 선택기와 공급업체 접두사 선택기(또는 다른 공급업체의 접두사 선택기)를 동일한 쉼표로 구분된 규칙으로 병합하지 않는 것입니다.

해결 방법: 각 표준 선택기 또는 각 공급업체 접두사 선택기(및 해당 스타일)를 CSS 규칙으로 독립적으로 작성합니다.

샘플 코드:

 /* 잘못된 예: :-moz-read-only가 인식되지 않아 Chrome에서 유효하지 않아 전체 규칙이 삭제됩니다 */
/* 입력:읽기 전용,
입력:-moz-읽기 전용 {
  테두리: 1px 단색 빨간색;
} */

/* 올바른 방법: 다양한 브라우저에서 예상대로 작동합니다*/

/* 읽기 전용을 지원하는 브라우저에 적용 가능(예: Chrome, Firefox, Edge, Safari) */
입력:읽기 전용 {
  테두리: 1px 단색 빨간색;
}

/* Firefox 브라우저에만 적용 가능하며 다른 브라우저는 이 규칙을 무시합니다*/
입력:-moz-읽기 전용 {
  테두리: 1px 단색 빨간색;
}

HTML 예:

위의 CSS 규칙을 테스트하기 위해 다음 HTML 구조를 사용할 수 있습니다.

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>읽기 전용 입력 상자 스타일 테스트</title>
    
        /* 위의 올바른 CSS 코드를 여기에 입력하세요 */
        입력:읽기 전용 {
          테두리: 1px 단색 빨간색;
        }

        입력:-moz-읽기 전용 {
          테두리: 1px 단색 빨간색;
        }

        입력 {
            여백: 10px;
            패딩: 5px;
            너비: 200px;
        }
    


    <p>이것은 읽기 전용 입력 상자이며 빨간색 테두리가 있어야 합니다:</p>
    <input type="text" value="읽기 전용 텍스트">

    <p>이것은 일반적인 입력 상자이며 빨간색 테두리가 없어야 합니다:</p>
    <input type="text" value="일반 텍스트">

위 내용은 CSS 선택기 구문 분석에 대한 심층적인 이해: 공급업체 접두사 의사 클래스 조합의 함정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!