Consultas de contêiner em Temas?

Dev
1

Eu vi estes sendo usados em Plugins e no Discourse nativo, mas não em Temas (exemplo?). Eles são suportados?

Em Temas, @container é suportado em .scss?

Isso parece passar, por exemplo:

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

image

:+1:

mas não @container - o CSS incluído parece desaparecer apesar de atender à condição da consulta de contêiner.

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

Acabei de fazer um teste rápido e confirmo que as consultas de contêiner funcionam em temas… uma coisa que observarei é que elas são muito mais difíceis de raciocinar do que as media queries. Alguns de nós na equipe ficaram confusos com isso inicialmente.

Elas não são simplesmente media queries em contêineres, mas têm um conjunto separado de requisitos. O maior problema é:

A contenção de tamanho desliga a capacidade de um elemento obter informações de tamanho de seu conteúdo, o que é importante para as consultas de contêiner para evitar loops infinitos.

de container-type - CSS | MDN

Portanto, você não pode usar uma consulta de contêiner com um contêiner que tenha uma largura dinâmica. Você deve definir uma largura estática no contêiner. Isso limita significativamente o que você esperaria ser capaz de fazer com elas, infelizmente.

Aqui está uma prova de conceito realmente boba que mostra que elas funcionam 
@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;
  }
}

Contêiner com menos de 400px:

image
image816×177 12.3 KB

Contêiner com mais de 400px:

image
image1002×185 13.4 KB

3 curtidas
3

Obrigado por analisar isso! E obrigado por confirmar,

Oh!

Com certeza! :cry:

2 curtidas
4

Acredito que isolei meu problema: contêineres não podem ser tabelas, parece que eles precisam ser divs.

Criei um pen que tinha dois contêineres idênticos, exceto que um era uma tabela.

A consulta de contêiner falha na tabela, mas funciona no div, que de outra forma é quase idêntico.

A solução final aqui foi mover o contêiner para #list-area, que é um div, e isso resolveu meu problema!

Realmente aprecio você ter analisado isso, porque confirmar que deve funcionar em temas (na medida em que funciona) me deu o ímpeto extra mais importante!

1 curtida
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.