CSS @కంటైనర్ రూల్

定义和用法

CSS @container 规则用于根据容器的大小或样式为其他元素定义样式。

样式声明会根据条件进行过滤，如果条件为真，则应用于容器。当容器的大小或样式值发生变化时，条件会被重新评估。

提示：在 CSS 中，容器是一个包裹其他元素的元素，用于将它们分组以便进行样式设置。

ఉదాహరణ

కంటైనర్ పరిమాణం లేదా శైలి ఆధారంగా ఇతర మేలుకు శైలులను నిర్వచించండి:

.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* Add styles if myContainer is less than 500px wide */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solid maroon;
    background-color: salmon;
  }
}

ప్రయోగించండి

CSS సంకేతాలు

@container containername (containerquery) {
  css declarations
}

అటువంటి విలువ

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు మొదటి పూర్తిగా @ పద్ధతిని మద్దతు ఇచ్చే బ్రౌజర్ వెర్షన్ను సూచిస్తాయి.