CSS @کانتینر رول

ਨਿਰਧਾਰਣ ਅਤੇ ਵਰਤੋਂ

CSS @container ਰੂਲਾਂ ਨੂੰ ਕੰਟੇਨਰ ਦੇ ਸਾਈਜ਼ ਜਾਂ ਸਟਾਈਲ ਦੇ ਅਧਾਰ 'ਤੇ ਹੋਰ ਤੱਤਾਂ ਲਈ ਸਟਾਈਲ ਨਿਰਧਾਰਿਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

ਸਟਾਈਲ ਐਲਾਨ ਪ੍ਰਸੰਗ ਦੇ ਅਧਾਰ 'ਤੇ ਫਿਲਟਰ ਹੁੰਦੇ ਹਨ، ਜੇਕਰ ਪ੍ਰਸੰਗ ਸੱਚਾ ਹੈ ਤਾਂ ਉਹ ਕੰਟੇਨਰ 'ਤੇ ਐਪਲਾਈ ਕਰੇਗਾ। ਜਦੋਂ ਕੰਟੇਨਰ ਦਾ ਸਾਈਜ਼ ਜਾਂ ਸਟਾਈਲ ਦਾ ਮੁੱਲ ਬਦਲੇਗਾ ਤਾਂ ਪ੍ਰਸੰਗ ਮੁੱਲਾਂਕਣ ਕੀਤਾ ਜਾਵੇਗਾ。

ਸੁਝਾਅ:ਕ੍ਰਿਸਟ ਵਿੱਚ ਕੰਟੇਨਰ ਇੱਕ ਤੱਤ ਹੁੰਦਾ ਹੈ ਜੋ ਹੋਰ ਤੱਤਾਂ ਨੂੰ ਸਮੂਹ ਵਿੱਚ ਰੱਖਦਾ ਹੈ ਤਾਕਿ ਉਹ ਸਟਾਈਲਾਂ ਦੀ ਮਦਦ ਕਰਨ ਲਈ ਪ੍ਰਭਾਵਿਤ ਹੋ ਸਕਣ।

ਉਦਾਹਰਣ

ਕੰਟੇਨਰ ਦੇ ਸਾਈਜ਼ ਜਾਂ ਸਟਾਈਲ ਦੇ ਅਧਾਰ 'ਤੇ ਹੋਰ ਤੱਤਾਂ ਲਈ ਸਟਾਈਲ ਨਿਰਧਾਰਿਤ ਕਰੋ:

.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
}

ਪ੍ਰਤੀਭਾਵ ਮੁੱਲ

ਬਰਾਊਜ਼ਰ ਸਪੋਰਟ

ਸਪਲਾਇਬਲ ਟੇਬਲ ਵਿੱਚ ਨੰਬਰਾਂ ਦੇ ਦਾਇਰੇ ਪਹਿਲੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਪੋਰਟ ਕਰਨ ਵਾਲੇ ਬਰਾਊਜ਼ਰ ਦੀ ਸੰਸਕਰਣ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ。