Jassif Team Institution

CSS @supports விதி

@supports விதி உலாவி ஒரு குறிப்பிட்ட CSS பண்பு அல்லது மதிப்பை ஆதரிக்கிறதா என சரிபார்க்கவும், அம்சம் ஆதரிக்கப்படாவிட்டால் பின்வாங்கல் பாணிகளை வரையறுக்கவும் உங்களை அனுமதிக்கிறது.

உலாவி அவற்றைக் கையாள முடியும் போது மட்டுமே பாணிகளைப் பயன்படுத்த இது பயனுள்ளதாக இருக்கும்.

அடிப்படை தொடரியல்

@supports (property: value) {
  /* நிபந்தனை உண்மையாக இருந்தால் பயன்படுத்த CSS விதிகள் */
}

எடுத்துக்காட்டு: grid மற்றும் flex உடன் @supports பயன்படுத்துதல்

பின்வாங்கல் ஸ்டைலிங்கை வழங்க @supports ஐ வழக்கமான CSS உடன் இணைக்கலாம்.

இங்கே, உலாவி display: flex ஐ ஆதரித்தால், @supports விதிக்குள் உள்ள CSS பயன்படுத்தப்படும். இல்லையென்றால், @supports விதிக்கு வெளியே உள்ள .container வகுப்பு பயன்படுத்தப்படும்:

/* உலாவி display: flex ஐ ஆதரிக்கவில்லை என்றால் இந்த CSS ஐப் பயன்படுத்தவும் */
.container {
  float: left;
  width: 100%;
}

/* உலாவி display: flex ஐ ஆதரித்தால் இந்த CSS ஐப் பயன்படுத்தவும் */
@supports (display: flex) {
  .container {
    display: flex;
  }
}

இங்கே, உலாவி display: grid ஐ ஆதரித்தால், @supports விதிக்குள் உள்ள CSS பயன்படுத்தப்படும். இல்லையென்றால், @supports விதிக்கு வெளியே உள்ள .container வகுப்பு பயன்படுத்தப்படும்:

/* உலாவி display: grid ஐ ஆதரிக்கவில்லை என்றால் இந்த CSS ஐப் பயன்படுத்தவும் */
.container {
  display: table;
  width: 90%;
  background-color: #2196F3;
  padding: 10px;
}

/* உலாவி display: grid ஐ ஆதரித்தால் இந்த CSS ஐப் பயன்படுத்தவும் */
@supports (display: grid) {
  .container {
    display: grid;
    grid: auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
}

not உடன் மறுப்பு

ஒரு அம்சம் ஆதரிக்கப்படாதபோது மட்டுமே பாணிகளைப் பயன்படுத்த not பயன்படுத்தலாம்:

@supports not (display: grid) {
  .warning {
    background-color: pink;
    padding: 10px;
    border: 1px solid red;
  }
}

நிபந்தனைகளை இணைத்தல்

பல நிபந்தனைகளுக்கு and, or, மற்றும் not பயன்படுத்தலாம்:

@supports (display: grid) and (gap: 10px) {
  .container {
    display: grid;
    gap: 10px;
  }
}

CSS குறிப்பு

CSS @supports பயிற்சி

CSS @supports விதி பற்றிய உங்கள் அறிவை இந்தப் பயிற்சி சோதிக்கும்: