Container queries dans les Themes ?

Dev
1

J’ai vu ceux-ci utilisés dans des plugins et dans Discourse natif, mais pas dans les thèmes (exemple ?). Sont-ils pris en charge ?

Dans les thèmes, @container est-il pris en charge dans .scss ?

Cela semble passer, par exemple :

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

image

:+1 :

mais pas @container - le CSS inclus semble disparaître malgré la satisfaction de la condition de requête de conteneur.

@container side-by-side (min-width: 500px) {
  .side-by-side {
     tbody {
2 « J'aime »
2

J’ai juste fait un test rapide et je peux confirmer que les requêtes de conteneur fonctionnent dans les thèmes… une chose que je noterai, c’est qu’il est beaucoup plus difficile de les raisonner que les requêtes média. Quelques-uns d’entre nous dans l’équipe ont été confus par cela au début.

Ce ne sont pas simplement des requêtes média sur des conteneurs, mais elles ont un ensemble distinct d’exigences. Le plus gros problème étant :

La confinement de taille désactive la capacité d’un élément à obtenir des informations de taille à partir de son contenu, ce qui est important pour que les requêtes de conteneur évitent les boucles infinies.

de container-type - CSS | MDN

Vous ne pouvez donc pas utiliser une requête de conteneur avec un conteneur qui a une largeur dynamique. Vous devez définir une largeur statique sur le conteneur. Cela limite considérablement ce que vous pourriez espérer en faire, malheureusement.

Voici une preuve de concept vraiment farfelue qui montre qu'ils fonctionnent 
@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;
  }
}

Conteneur de moins de 400px :

image
image816×177 12.3 KB

Conteneur de plus de 400px :

image
image1002×185 13.4 KB

3 « J'aime »
3

Merci d’avoir regardé ça ! Et merci de confirmer,

Oh !

Tout à fait ! :cry:

2 « J'aime »
4

Je pense avoir isolé mon problème : les conteneurs ne peuvent pas être des tableaux, il semble qu’ils doivent être des divs.

J’ai créé un pen qui avait deux conteneurs identiques, sauf qu’un était un tableau.

La requête de conteneur échoue sur le tableau, mais réussit sur le div par ailleurs presque identique.

La solution ultime ici a été de déplacer le conteneur vers #list-area qui est un div et cela a résolu mon problème !

J’apprécie vraiment que vous ayez examiné cela, car confirmer que cela devrait fonctionner dans les thèmes (dans la mesure où cela fonctionne) m’a donné l’élan supplémentaire si important !

1 « J'aime »
5

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