CSS @container sääntö

Määritelmä ja käyttö

CSS @container Säännöt määrittelevät, miten muiden elementtien tyylejä määritellään konttorin koosta tai tyylistä riippuen.

Tyylejä suodellaan ehdolla, ja ne sovelletaan konttoroon, jos ehto on totta. Kun konttorin koko tai tyylivertailu muuttuu, ehto arvioidaan uudelleen.

Vinkki:CSS:ssa konttori on elementti, joka sisältää muita elementtejä, ja joka käytetään niiden ryhmittämiseen tyylejä varten.

esimerkki

Määritä muiden elementtien tyylejä konttorin koosta tai tyylistä:

.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* Lisää tyylejä, jos myContainer on alle 500px leveä */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solid maroon;
    background-color: salmon;
  }
}

Kokeile itse

CSS-grammatiikka

@container containername (containerquery) {
  css-deklaratiot
}

ominaisuusarvo

Selaimen tuki

Taulukon numerot ilmaisevat ensimmäisen täysin tukevan @ säännön selaimen version.