Container Queries in Themes?

Entwickler
1

Ich habe diese in Plugins und nativem Discourse gesehen, aber nicht in Themes (Beispiel?). Werden sie unterstützt?

Wird @container in Themes in .scss unterstützt?

Dies scheint durchzukommen, z. B.:

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

image

:+1:

aber nicht @container - das umschlossene CSS scheint zu verschwinden, obwohl die Container-Abfragebedingung erfüllt ist.

@container side-by-side (min-width: 500px) {
  .side-by-side {
     tbody {
2 „Gefällt mir“
2

Ich habe gerade einen schnellen Test durchgeführt und kann bestätigen, dass Containerabfragen in Themes funktionieren… eine Sache, die ich anmerken werde, ist, dass sie viel schwieriger zu verstehen sind als Media Queries. Ein paar von uns im Team waren anfangs verwirrt.

Sie sind nicht einfach Media Queries für Container, sondern haben eigene Anforderungen. Das größte Problem ist:

Die Größenbeschränkung schaltet die Fähigkeit eines Elements aus, Größeninformationen aus seinen Inhalten zu erhalten, was für Containerabfragen wichtig ist, um Endlosschleifen zu vermeiden.

von container-type - CSS | MDN

Sie können also keine Containerabfrage mit einem Container verwenden, der eine dynamische Breite hat. Sie müssen dem Container eine statische Breite zuweisen. Dies schränkt leider erheblich ein, was Sie damit tun können.

Hier ist ein wirklich alberner Proof of Concept, der zeigt, dass sie funktionieren 
@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;
  }
}

Container unter 400px:

image
image816×177 12.3 KB

Container über 400px:

image
image1002×185 13.4 KB

3 „Gefällt mir“
3

Danke für die Prüfung! Und danke für die Bestätigung,

Oh!

In der Tat! :cry:

2 „Gefällt mir“
4

Ich glaube, ich habe mein Problem eingegrenzt: Container können keine Tabellen sein, sie müssen anscheinend divs sein.

Ich habe einen Pen erstellt, der zwei identische Container hatte, außer dass einer eine Tabelle war.

Die Containerabfrage schlägt bei der Tabelle fehl, funktioniert aber bei dem ansonsten fast identischen Div.

Die ultimative Lösung war, den Container nach oben zu #list-area zu verschieben, was ein div ist, und das hat mein Problem gelöst!

Ich weiß es wirklich zu schätzen, dass Sie sich das angesehen haben, denn die Bestätigung, dass es in Themes (soweit es funktioniert) funktionieren sollte, hat mir den wichtigen zusätzlichen Anstoß gegeben!

1 „Gefällt mir“
5

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