Jassif Team Institution

CSS கணித சார்புகள்

CSS கணித சார்புகள் பண்பு மதிப்புகளாக கணித வெளிப்பாடுகளைப் பயன்படுத்த அனுமதிக்கின்றன.

இந்த அத்தியாயத்தில், பின்வரும் கணித சார்புகளை விளக்குவோம்:

CSS calc() சார்பு

calc() சார்பு ஒரு கணிதக் கணக்கீட்டைச் செய்கிறது, இது பண்பு மதிப்பாகப் பயன்படுத்தப்படும்.

calc() சார்பு கூட்டல் (+), கழித்தல் (-), பெருக்கல் (*) மற்றும் வகுத்தல் (/) ஆகியவற்றை ஆதரிக்கிறது, மேலும் பிக்சல்கள் மற்றும் சதவீதங்கள் போன்ற வெவ்வேறு அலகுகளை இணைக்க முடியும்.

CSS தொடரியல்

calc(expression)

எடுத்துக்காட்டு

ஒரு <div> உறுப்பின் அகலம் மற்றும் உயரத்தைக் கணக்கிட calc() ஐப் பயன்படுத்தவும்:

#div1 {
  margin: auto;
  width: calc(100% - 100px);
  height: calc(30vh + 50px);
  border: 1px solid black;
  padding: 10px;
}

CSS max() சார்பு

max() சார்பு காற்புள்ளி பிரிக்கப்பட்ட மதிப்புகளின் பட்டியலை எடுத்து, பட்டியலிலிருந்து மிகப்பெரிய மதிப்பைப் பண்பு மதிப்பாகப் பயன்படுத்துகிறது.

CSS தொடரியல்

max(value1, value2, ...)

எடுத்துக்காட்டு

#div1 இன் அகலத்தை எந்த மதிப்பு மிகப்பெரியதோ அதற்கு அமைக்க max() ஐப் பயன்படுத்தவும், 50% அல்லது 300px:

#div1 {
  height: 100px;
  width: max(50%, 300px);
  border: 1px solid black;
  padding: 10px;
}

CSS min() சார்பு

min() சார்பு காற்புள்ளி பிரிக்கப்பட்ட மதிப்புகளின் பட்டியலை எடுத்து, பட்டியலிலிருந்து மிகச் சிறிய மதிப்பைப் பண்பு மதிப்பாகப் பயன்படுத்துகிறது.

CSS தொடரியல்

min(value1, value2, ...)

எடுத்துக்காட்டு

#div1 இன் அகலத்தை எந்த மதிப்பு மிகச் சிறியதோ அதற்கு அமைக்க min() ஐப் பயன்படுத்தவும், 50% அல்லது 300px:

#div1 {
  height: 100px;
  width: min(50%, 300px);
  border: 1px solid black;
  padding: 10px;
}

CSS clamp() சார்பு

clamp() சார்பு ஒரு மதிப்பை அமைக்க பயன்படுகிறது, இது காட்சி திரையின் அளவைப் பொறுத்து குறைந்தபட்ச மதிப்புக்கும் அதிகபட்ச மதிப்புக்கும் இடையில் பதிலளிக்கும் வகையில் சரிசெய்யும்.

clamp() சார்புக்கு மூன்று அளவுருக்கள் உள்ளன: ஒரு குறைந்தபட்ச மதிப்பு, ஒரு விருப்ப மதிப்பு மற்றும் ஒரு அதிகபட்ச மதிப்பு. விருப்ப மதிப்பு குறைந்தபட்ச மதிப்பை விட சிறியதாகவோ அல்லது அதிகபட்ச மதிப்பை விட பெரியதாகவோ இருந்தால், விருப்ப மதிப்பு பயன்படுத்தப்படுகிறது.

CSS தொடரியல்

clamp(min, preferred, max)

எடுத்துக்காட்டு

<h2> உறுப்பின் குறைந்தபட்ச font-size ஐ 2rem ஆகவும், அதிகபட்ச font-size ஐ 3.5rem ஆகவும் அமைக்கவும். மேலும், <p> உறுப்பின் குறைந்தபட்ச font-size ஐ 1rem ஆகவும், அதிகபட்ச font-size ஐ 2.5rem ஆகவும் அமைக்கவும்:

h2 {
  font-size: clamp(2rem, 2.5vw, 3.5rem);
}

p {
  font-size: clamp(1rem, 2.5vw, 2.5rem);
}

CSS கணித சார்புகள் பயிற்சி

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

நடைமுறைப் பயன்பாடுகள்

எடுத்துக்காட்டு: மையப்படுத்தப்பட்ட கன்டெய்னர்

.centered-container {
  width: min(90%, 1200px);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem);
}

.responsive-element {
  width: calc(50% - 1rem);
  margin: 0.5rem;
}

உலாவி ஆதரவு மற்றும் பின்வாங்கு உத்திகள்

எடுத்துக்காட்டு: பின்வாங்குடன் @supports

/* பழைய உலாவிகளுக்கான பின்வாங்கு */
.container {
  width: 90%;
  max-width: 1200px;
}

/* நவீன உலாவிகளுக்கு */
@supports (width: min(90%, 1200px)) {
  .container {
    width: min(90%, 1200px);
  }
}