CSS 범위의 초기

CSS 스코핑은 트랙션을 얻고 있으며, 현재 작업 초안 사양은 상당한 진전을 나타냅니다. Miriam Suzanne이 이끄는이 제안은 이전 시도의 한계를 다룹니다.

핵심 개념은 특정 HTML 구성 요소를 명시 적으로 타겟팅하는 스타일을 만드는 데 중점을 둡니다. @scope 규칙은 다음을 용이하게합니다.

<code><div>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS 범위의 초기"><div>
    <p>...</p>
  </div>
</div></code>

이 "구성 요소"스타일링은 매우 집중됩니다.

 <code>@scope (.media) { :scope { display: grid; grid-template-columns: 50px 1fr; } img { filter: grayscale(100%); border-radius: 50%; } .content { ... } }</code>

주요 장점은 다음과 같습니다.

1. 구성 요소 수준 스타일링을 명확하게 유지하여 유지 보수를 단순화합니다.
2. 명명 충돌을 피합니다. 스타일은 구성 요소 내에 포함되어 있습니다.

부모 클래스 선불은 유사한 스코핑 ( .media , .media img , .media .content )을 제공하지만 CSS 중첩은보다 간결한 대안을 제공합니다.

 <code>.media { & img { } & .content { } }</code>

그러나 @scope 고유 한 기능을 제공합니다. "도넛 스코핑"은 범위 경계를 정확하게 제어 할 수 있습니다.

 <code>@scope (.media) to (.content) { p { } }</code>

이것은 원하는 영역을 넘어 스타일 누출을 방지합니다.

<code><div>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS 범위의 초기"><p>이것은 스코프의 양식입니다.</p>
  <div>
    <p>이것은 범위에서 스타일이 아닙니다.</p>
  </div>
</div></code>

이 사양은 또한 "가장 가까운 조상"시나리오를 우아하게 처리하며 기존 방법에 비해 크게 개선됩니다. Miriam의 블로그는 겹치는 범위와 중첩과의 상호 작용을 포함 하여이 복잡성 및 기타 복잡성에 대한 자세한 설명을 제공합니다. 그녀의 작품에 대한 추가 탐색이 적극 권장됩니다.

위 내용은 CSS 범위의 초기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!