CSS @container 规则

Paglilinaw at paggamit

CSS @container Ang patakaran ay ginagamit upang tukuyin ang estilo ng iba pang elemento batay sa laki o estilo ng container.

Ang mga pangungusap ng estilo ay magiging pinaliwanag batay sa kundisyon, at ilalapat sa container kung ang kundisyon ay totoo. Kapag nagbabago ang laki o halaga ng estilo ng container, ang kundisyon ay muling pinagtassuhin.

Mga payo:Sa CSS, ang container ay ang elemento na naglalagay ng iba pang elemento, na ginagamit upang isagupin ang mga ito para sa pagtayo ng estilo.

Halimbawa

Tukuyin ang estilo ng iba pang elemento batay sa laki o estilo ng container:

.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* Magdagdag ng estilo kung ang myContainer ay mas maliit sa 500px ang lapad */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solid maroon;
    background-color: salmon;
  }
}

Subukan nang sarili

CSS syntax

@container containername (containerquery) {
  css declarations
}

Halaga ng atribute

Suporta ng browser

Ang numero sa talahanayan ay naglalarawan ng unang berserki na ganap na sumusuporta sa @ patakaran.