컨테이너 스타일 쿼리에 더 깊이 파고 들었습니다

나는 컨테이너 스타일 쿼리에 대해 잠시 후에 몇 가지 초기 생각을 썼습니다. 아직 초기입니다. 이들은 이미 CSS Confentment Module Level 3 Specification (현재 편집자 초안 상태)에 정의되어 있지만 여전히 몇 가지 뛰어난 토론이 진행되고 있습니다.

. 기본 아이디어는 컨테이너를 정의한 다음 계산 된 스타일을 기준으로 자손에게 조건부로 스타일을 적용 할 수 있다는 것입니다.

지금까지 본 가장 좋은 예는 & lt; em & gt;, & lt; i & gt; 및 & lt; Q & gt와 같은 것으로 이탤릭체를 제거하는 것입니다. 컨텐츠가 이미 기울임 꼴로 사용되는 상황에서 사용되는 경우 :

이것이 일반적인 아이디어입니다. 그러나 당신이 그것을 몰랐다면, 사양의 편집자 인 Miriam Suzanne은 공개적으로 제공되는 컨테이너 스타일 쿼리에 대한 지속적이고 철저한 개인 메모를 유지합니다. 다른 날 업데이트되었고 나는 스타일 쿼리의 더 미묘한 측면에 머리를 감싸려고 시간을 보냈습니다. 비공식적 인 일이지만, 나는 나에게 눈에 띄는 것들을 쫓아 낼 것이라고 생각했습니다. 누가 알아? 어쩌면 그것은 우리가 결국 기대할 수있는 것일 수도 있습니다!

모든 요소는 스타일 컨테이너 입니다 우리는 모든 것이 기본적으로 스타일 컨테이너이기 때문에 스타일 컨테이너를 정의하기 위해 컨테이너 이름이나 컨테이너 유형을 분명히 할당 할 필요조차 없습니다. 그래서 위의 예제가 이탤릭체를 제거하는 것을 볼 수 있습니까? 컨테이너를 식별하지 않습니다. Style () 함수를 사용하여 쿼리로 바로 이동합니다. 그렇다면 어떤 컨테이너가 쿼리되고 있습니까? 적용된 스타일을 수신하는 요소의 직접 부모가 될 것입니다. 그렇지 않다면, 다음으로 가장 가까운 상대 컨테이너

@container <name>? <conditions> {
  /* conditional styles */
}

가 우선합니다. . <.> 나는 그것을 좋아한다. 쿼리가 일치를 검색하는 것은 매우 CSS-Y입니다. 그런 다음 일치하는 조건을 찾을 때까지 계속 거품을 일으키십시오.

. 내 작은 뇌가 스타일을 기반으로 암시 적 컨테이너를 벗어날 수있는 이유를 이해하기가 어려웠지만 크기 및 인라인 크기와 같은 치수 쿼리를 다룰 때 그리 많지는 않습니다. Miriam은 그것을 멋지게 설명합니다 :

em, i, q {
  font-style: italic; /* default UA behavior */
}

/* When the container's font-style is italic, remove italics from these elements. */
@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

치수 쿼리에는 레이아웃 루프를 방지하기 위해 컨테이너의 크기, 레이아웃 및 스타일에 대한 CSS

격리가 필요합니다. 격리는 광범위하게 적용하는 침습적 인 것이므로 저자는 크기의 컨테이너가 무엇인지 (또는 그렇지 않은) 요소를 신중하게 제어하는 ​​것이 중요했습니다. 스타일 기반 쿼리에는 동일한 제한이 없습니다. CSS에는 후손 스타일이 조상의 계산 된 스타일에 영향을 미치는 방법이 이미 없습니다.

따라서 격리가 필요하지 않으므로 스타일 쿼리 컨테이너 로서 침습적이거나 예상치 못한 부작용이 없습니다. (강조 광산) 모든 것이 결과로 나옵니다. 모든 것이 상자에서 바로 스타일 쿼리 컨테이너가되는 한 아무것도 없습니다.

컨테이너가 발견되면 : 조건이 해당 컨테이너에 대해 해결됩니다. 여러 컨테이너가 일치하는 경우 : 가장 가까운 상대 컨테이너가 우선합니다. 일치가 없으면 : 알 수없는 반환 그것은 나머지 CSS와 같은 "용서"정신입니다.

컨테이너는 치수와 스타일 쿼리를 모두 지원할 수 있습니다 우리가 명시적인 컨테이너 이름없이 스타일 쿼리를 정의하고 싶다고 가정 해 봅시다 :

이것은 모든 요소가 컨테이너 유형에 관계없이 스타일 컨테이너

이기 때문에 작동합니다. 이것이 바로 우리가 암시 적으로 쿼리 스타일을하고 가장 가까운 경기에 의존 할 수있게 해줍니다. 그리고 이것은 스타일 컨테이너를 설정할 때 부작용이 없기 때문에 완전히 괜찮습니다. 우리는 치수 쿼리에 명시적인 컨테이너 유형을 사용해야하지만 모든 요소가 스타일 쿼리이기 때문에 스타일 쿼리에는 그리 많지 않습니다. 또한이 컨테이너는 스타일
• 와 차원 쿼리라는 것을 의미합니다.
컨테이너를 제외하는 아마도 우리는 컨테이너가 일치하는 과정에 참여하기를 원하지 않을 것입니다. 그곳에서 컨테이너 유형을 설정할 수있는 곳 : 요소에 없음. 명시 적 스타일 쿼리 컨테이너는 Queried Queried를 더 잘 제어 할 수 있습니다. 예를 들어, 패딩을위한 스타일 쿼리를 작성하려면 명시 적으로 명명 된 컨테이너 또는 가장 가까운 직접 부모로 작업하는지 여부에 관계없이 가장 잘 어울리는 컨테이너를 결정할 수있는 신뢰할 수있는 방법이 없습니다. 패딩은 상속 된 속성이 아니기 때문입니다.
• 그러므로 그러한 경우에, 우리는 컨테이너 이름을 사용하여 브라우저에 그들이 가져올 수있는 컨테이너에 정보를 제공해야합니다. 더 많은 조건과 일치하도록 컨테이너에 여러 개의 명시 적 이름을 줄 수도 있습니다.
오, 컨테이너 이름은 컨테이너에 대한 옵션 및

재사용 가능한

이름을 허용합니다! 브라우저가 경기를 검색 할 때 선택을 할 수 있도록 도와 주면 훨씬 더 유연성이 있습니다.

나는 그것이 하나의 컨테이너가 통과되는 경우 "낙하"로 간주 될 수 있는지 궁금합니다.

스타일 쿼리를 결합 할 수 있습니다 OR 및 및 운영자는 우리가 wueries를 결합하여 물건을 건조하게 유지할 수있게 해줍니다.

@container <name>? <conditions> {
  /* conditional styles */
}

스타일 토글 컨테이너 스타일 쿼리와 TOGGLE () 함수를 정의하기 위해 작업이 수행되는 작업 사이에는 약간의 중첩이 있습니다. 예를 들어, 우리는 두 가지 글꼴 스타일 값 (이탤릭체와 정상)을 순환 할 수 있습니다.

쿨. 그러나 CSS 토글에 대한 제안은 Toggle () 함수가 더 간단한 접근법 일 것임을 시사합니다.

그러나 이런 종류의 이진 사용 사례를 넘어서는 것은 toggle ()가 적합한 곳입니다. 그러나 스타일 쿼리는 가기에 좋습니다. Miriam은 스타일 쿼리가 toggle ()보다 더 적합한 세 가지 인스턴스를 식별합니다.

스타일 쿼리는 "사용자 정의 속성 토글 해킹"를 해결합니다 스타일 쿼리는 "CSS 사용자 정의 속성 토글 트릭"을위한 공식적인 솔루션입니다. 거기에서 빈 사용자 지정 속성 (-foo :;)을 설정하고 Comma-Separated Fallback 메소드를 사용하여 사용자 정의 속성이 실제 값으로 설정 될 때 속성을 "토글"합니다.

em, i, q {
  font-style: italic; /* default UA behavior */
}

/* When the container's font-style is italic, remove italics from these elements. */
@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

그것은 매우 멋지다. 또한 스타일 컨테이너 쿼리가 사소한 일을하는 많은 작업. 스타일 쿼리 및 CSS 생성 컨텐츠 컨텐츠 속성에 대해 :: 이전 및 :: pseudo elements의 컨텐츠 속성에 의해 생성 된 컨텐츠에 대해, 일치하는 컨테이너는 내용이 생성되는 요소입니다.

스타일 쿼리 및 웹 구성 요소 @container style(font-style: italic) { em { font-style: normal; } } 웹 구성 요소를 컨테이너로 정의하고 스타일로 쿼리 할 수 ​​있습니다. 먼저, 우리는 & lt; template & gt; 구성 요소의 :

그런 다음 그런 다음 우리는 다음을 사용하여 컨테이너 이름, 컨테이너 유형 및 일부 고급 속성을 설정하기 위해 컨테이너로 사용합니다.

& lt; Media-Host & gt 내부의 요소; & lt; Media-Host & gt의 매개 변수를 쿼리 할 수 ​​있습니다. 요소 : <.>

.card-container {
  container: card / inline-size; /* implictly a style query container as well */
}

> 다음은 무엇입니까?

다시 말하지만, 내가 여기서 내려온 모든 것은 Miriam의 메모를 기반으로하며, 그 메모는 공식 사양을 대체하지 않습니다. 그러나 그들은 논의되고있는 것과 미래에 사물이 어디로 착륙 할 수 있는지를 나타냅니다. Miriam은 우리가 추적 할 수있는 몇 가지 뛰어난 토론을 계속해서 연결시켜 주셔서 감사합니다.

다중 선언을 제어하는 ​​고급 사용자 정의 속성#5624

스타일 () 쿼리가 허용되어야합니까! 중요한 플래그? #7413 표준 속성의 스타일 쿼리 이동 레벨 4#7185 AT-RULE PRELUDES#6966을 테스트 할 수있는 능력을 추가하십시오

.some-element {
  container-type: none;
}

위 내용은 컨테이너 스타일 쿼리에 더 깊이 파고 들었습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!