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:
Container über 400px:
