테마에서 컨테이너 쿼리 사용 가능?

개발
1

이 기능들이 플러그인이나 네이티브 Discourse에서는 사용되고 있지만, 테마에서는 사용된 사례(예시)를 본 적이 없습니다. 지원되나요?

테마에서 .scss에 @container가 지원되나요?

다음과 같은 경우처럼 통과하는 것 같습니다:

.side-by-side {
  container-type: inline-size;
  container-name: side-by-side;
}

image

:+1:

하지만 @container는 그렇지 않습니다 - 컨테이너 쿼리 조건을 충족함에도 불구하고 내부의 CSS가 사라지는 것 같습니다.

@container side-by-side (min-width: 500px) {
  .side-by-side {
     tbody {
2

방금 간단한 테스트를 해보니 테마에서 컨테이너 쿼리가 동작하는 것을 확인할 수 있었습니다. 다만 한 가지 주목할 점은, 미디어 쿼리보다 훨씬 더 추론하기 어렵다는 것입니다. 팀원 중 몇 명은 처음에 이 부분에 대해 혼란을 겪었습니다.

이것은 단순히 컨테이너에 적용된 미디어 쿼리가 아니라, 별도의 요구 사항을 가지고 있습니다. 가장 큰 문제는 다음과 같습니다:

“사이즈 컨테이너(size containment)는 요소가 콘텐츠로부터 크기 정보를 가져오는 기능을 비활성화하며, 이는 컨테이너 쿼리가 무한 루프를 피하는 데 중요합니다.”

출처: container-type CSS property - CSS | MDN

따라서 동적 폭을 가진 컨테이너에는 컨테이너 쿼리를 사용할 수 없습니다. 컨테이너에 정적 폭을 설정해야 합니다. 불행히도 이는 컨테이너 쿼리로 기대했던 것보다 기능을 상당히 제한합니다.

동작하는 것을 보여주는 매우 엉뚱한 개념 증명(Proof of Concept)입니다 
@media screen and (min-width: 500px) {
  .fk-d-button-tooltip {
    width: 300px;
    background: green;
    container-type: inline-size;
  }
}

@media screen and (min-width: 1000px) {
  .fk-d-button-tooltip {
    width: 500px;
    background: yellow;
    container-type: inline-size;
  }
}

@container (min-width: 400px) {
  #create-topic {
    background: blue !important;
  }
}

400px 미만 컨테이너:

image
image816×177 12.3 KB

400px 초과 컨테이너:

image
image1002×185 13.4 KB

3

확인해 주셔서 감사합니다! 확인해 주셔서 감사합니다.

아!

그렇습니다! :cry:

4

문제를 파악한 것 같습니다: 컨테이너는 테이블이 될 수 없고, div여야 하는 것 같습니다.

두 개의 동일한 컨테이너를 만든 펜을 만들었는데, 그중 하나는 테이블이었습니다.

컨테이너 쿼리는 테이블에서는 실패했지만, 거의 동일한 div에서는 성공했습니다.

결국 이 문제를 해결한 방법은 컨테이너를 #list-area(이것은 div입니다)로 옮긴 것이었고, 이렇게 하니 문제가 해결되었습니다!

테마에서(작동하는 범위 내에서) 이것이 작동해야 한다는 것을 확인해 주셔서 정말 감사드립니다. 그 덕분에 정말 중요한 추가 동기가 생겼습니다!