Container queries nei Themes?

Sviluppatore
1

Ho visto questi utilizzati nei plugin e nel Discourse nativo, ma non nei temi (esempio?). Sono supportati?

Nei temi, @container è supportato in .scss?

Questo sembra passare, ad esempio:

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

image

:+1:

ma non @container - il CSS racchiuso sembra scomparire nonostante soddisfi la condizione della query del contenitore.

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

Ho appena fatto un rapido test e posso confermare che le query sui contenitori funzionano nei temi… una cosa che noterò è che sono molto più difficili da ragionare rispetto alle media query. Un paio di noi nel team sono stati inizialmente confusi da questo.

Non sono semplicemente media query sui contenitori, ma hanno un set separato di requisiti. Il problema più grande è:

Il contenimento delle dimensioni disattiva la capacità di un elemento di ottenere informazioni sulle dimensioni dai suoi contenuti, il che è importante per le query sui contenitori per evitare loop infiniti.

da container-type - CSS | MDN

Quindi non è possibile utilizzare una query sui contenitori con un contenitore che ha una larghezza dinamica. È necessario impostare una larghezza statica sul contenitore. Questo limita in modo significativo ciò che ci si aspetterebbe di poter fare con loro, sfortunatamente.

Ecco una prova di concetto davvero goffa che dimostra che funzionano 
@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;
  }
}

Contenitore inferiore a 400px:

image
image816×177 12.3 KB

Contenitore superiore a 400px:

image
image1002×185 13.4 KB

3 Mi Piace
3

Grazie per averci dato un’occhiata! E grazie per la conferma,

Oh!

Decisamente! :cry:

2 Mi Piace
4

Credo di aver isolato il mio problema: i contenitori non possono essere tabelle, sembra che debbano essere div.

Ho creato una pen che aveva due contenitori identici, tranne che uno era una tabella.

La query del contenitore fallisce sulla tabella, ma riesce sul div altrimenti quasi identico.

La soluzione definitiva qui è stata spostare il contenitore su #list-area che è un div e questo ha risolto il mio problema!

Apprezzo davvero che tu abbia esaminato questo, perché confermare che dovrebbe funzionare nei temi (nella misura in cui lo fa) mi ha dato quella spinta in più importantissima!

1 Mi Piace
5

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