CSS Functions: calc(), min(), max() and clamp()
CSS Functions అంటే ఏమిటి?
CSS functions అనేవి CSS valueలో calculation లేదా value selection చేయడానికి ఉపయోగించే built-in functions. ఈ lessonలో calc(), min(), max() మరియు clamp() నేర్చుకుంటాం.
1. calc()
calc() రెండు లేదా అంతకంటే ఎక్కువ values మధ్య calculation చేయడానికి ఉపయోగిస్తాం. ఉదాహరణకు, width: calc(100% - 40px); అంటే parent widthలో 40px తగ్గించి మిగిలిన width ఇవ్వాలి అని అర్థం.
calc()లో + మరియు - operators చుట్టూ spaces ఉంచడం మంచి పద్ధతి. ఉదాహరణ: calc(100% - 40px).
2. min()
min() ఇచ్చిన valuesలో చిన్న valueను ఎంచుకుంటుంది. ఉదాహరణకు width: min(90%, 700px); అంటే width 90% మరియు 700pxలో చిన్నదిగా ఉంటుంది. పెద్ద screenలో content చాలా వెడల్పుగా కాకుండా ఉంచడానికి ఇది ఉపయోగకరం.
3. max()
max() ఇచ్చిన valuesలో పెద్ద valueను ఎంచుకుంటుంది. ఉదాహరణకు padding: max(20px, 4vw); అంటే 20px మరియు 4vwలో పెద్ద value paddingగా ఉపయోగించబడుతుంది.
4. clamp()
clamp() మూడు values తీసుకుంటుంది: clamp(minimum, preferred, maximum). Preferred value screen size ఆధారంగా మారుతుంది, కానీ result minimum కంటే తక్కువగా మరియు maximum కంటే ఎక్కువగా ఉండదు.
ఉదాహరణ: font-size: clamp(1.5rem, 4vw, 3rem);. ఇక్కడ font size కనీసం 1.5rem, సాధారణంగా 4vw ఆధారంగా మారుతుంది, కానీ గరిష్ఠంగా 3rem మాత్రమే ఉంటుంది.
ఎప్పుడు ఏ function ఉపయోగించాలి?
- calc(): valuesను కలపడానికి లేదా తీసివేయడానికి.
- min(): value ఒక గరిష్ఠ పరిమితిని మించకుండా ఉంచడానికి.
- max(): value ఒక కనీస పరిమితి కంటే తగ్గకుండా ఉంచడానికి.
- clamp(): responsive valueకు minimum, preferred మరియు maximum limits ఇవ్వడానికి.
Browserలో ఇది ఎలా పనిచేస్తుంది?
Browser CSS functionను చదివి, అందులోని valuesను ప్రస్తుత screen size మరియు parent size ఆధారంగా calculate చేస్తుంది. Window size మార్చినప్పుడు responsive units ఉన్న functions మళ్లీ calculate కావచ్చు.
Simple Explanation
ఒక card widthను ఎప్పుడూ ఒకే px valueగా పెట్టకుండా, screen sizeకి అనుగుణంగా మార్చాలంటే CSS functions చాలా ఉపయోగకరంగా ఉంటాయి.
calc()అంటే calculation చేయడం.min()అంటే చిన్న valueను తీసుకోవడం.max()అంటే పెద్ద valueను తీసుకోవడం.clamp()అంటే valueకు lower limit, flexible value మరియు upper limit ఇవ్వడం.
ఈ functions వల్ల అనేక media queries రాయకుండానే responsive sizing చేయవచ్చు.
Real-Life Example
ఒక shopping websiteలో product card ఉందని అనుకోండి. Mobile screenలో card దాదాపు మొత్తం screen width ఉపయోగించాలి. కానీ desktop screenలో అది చాలా వెడల్పుగా మారకూడదు. దీనికి width: min(90%, 700px) ఉపయోగించవచ్చు.
అదేవిధంగా, heading mobileలో చాలా చిన్నగా కనిపించకూడదు మరియు desktopలో చాలా పెద్దగా మారకూడదు. దీనికి font-size: clamp(1.5rem, 4vw, 3rem) ఉపయోగించవచ్చు.
Code Examples
calc(), min(), max() మరియు clamp() ఉదాహరణ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Functions</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 20px;
background-color: #eef4ff;
font-family: Arial, sans-serif;
}
.card {
width: min(90%, 700px);
min-height: max(260px, 45vh);
margin: 0 auto;
padding: calc(16px + 1vw);
background-color: white;
border: 3px solid #2563eb;
border-radius: 12px;
}
h1 {
margin-top: 0;
font-size: clamp(1.5rem, 4vw, 3rem);
color: #123b7a;
}
p {
font-size: clamp(1rem, 1.5vw, 1.25rem);
line-height: 1.6;
color: #263238;
}
</style>
</head>
<body>
<main class="card">
<h1>Responsive CSS Functions</h1>
<p>This card changes its size smoothly as the screen size changes.</p>
</main>
</body>
</html>ఈ complete HTML pageలో నాలుగు CSS functions ఉపయోగించబడ్డాయి. calc() paddingను calculationతో నిర్ణయిస్తుంది. min() card widthను 90% లేదా 700pxలో చిన్నదిగా ఉంచుతుంది. max() card height కనీసం 260px లేదా 45vhలో పెద్దదిగా ఉండేలా చేస్తుంది. clamp() heading మరియు paragraph font sizesకు minimum, flexible మరియు maximum limits ఇస్తుంది.
Browserలో light blue backgroundపై మధ్యలో ఒక తెల్లని responsive card కనిపిస్తుంది. Card width పెద్ద screenపై 700pxకి మించదు. Heading మరియు paragraph screen size ఆధారంగా మారుతాయి, కానీ ఇచ్చిన minimum మరియు maximum limitsలోనే ఉంటాయి.
Line-by-Line Explanation
అన్ని elementsను select చేస్తుంది. ఈ exampleలో width calculationను సులభంగా అర్థం చేసుకోవడానికి box sizingను ఒకే విధంగా ఉంచడానికి దీనిని ఉపయోగించాం.
Element యొక్క declared widthలో padding మరియు borderను కూడా లెక్కలోకి తీసుకుంటుంది.
Card width 90% మరియు 700pxలో చిన్న valueగా ఉంటుంది. అందువల్ల mobileలో card flexibleగా ఉంటుంది, desktopలో 700pxను మించదు.
Card heightకు 260px మరియు viewport heightలో 45% valuesలో పెద్దదాన్ని ఎంచుకుంటుంది. కాబట్టి card చాలా చిన్నగా మారదు.
Paddingను 16pxతో 1vw కలిపి calculate చేస్తుంది. Screen width పెరిగినప్పుడు padding కూడా కొద్దిగా పెరుగుతుంది.
పై, కింది marginను 0గా ఉంచి, left మరియు right marginలను autoగా ఉంచుతుంది. దీని వల్ల card horizontalగా centerలో కనిపిస్తుంది.
Heading font size కనీసం 1.5rem, సాధారణంగా 4vw ఆధారంగా మారుతుంది, కానీ గరిష్ఠంగా 3rem మాత్రమే ఉంటుంది.
Paragraph text చిన్న screenలో 1rem కంటే చిన్నది కాదు, పెద్ద screenలో 1.25rem కంటే పెద్దది కాదు.
Try It
Try this CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Try CSS Functions</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
background-color: #f0f5ff;
}
.box {
width: min(90%, 600px);
padding: calc(12px + 1vw);
margin: 0 auto;
background-color: white;
border: 2px solid #2563eb;
}
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
</style>
</head>
<body>
<section class="box">
<h1>Try These CSS Functions</h1>
<p>Resize the browser window and observe the changes.</p>
</section>
</body>
</html>Practice
Practice: Practice: .notice widthను min(90%, 650px)గా మార్చండి. Paddingను max(20px, 3vw)గా మార్చండి. తరువాత h1 font sizeను clamp(1.5rem, 4vw, 2.5rem)గా మార్చి browser windowను resize చేసి గమనించండి.
Hint: widthకు min(), paddingకు max(), font-sizeకు clamp() ఉపయోగించండి. Functionలో values commaతో వేరు చేయాలి.
Common Mistakes
calc(100%-40px) అని operators చుట్టూ spaces లేకుండా రాయడం.సరైన మరియు readable syntax
calc(100% - 40px). ముఖ్యంగా + మరియు - operators చుట్టూ spaces ఉంచండి.
min(90% 700px) అని values మధ్య comma పెట్టకపోవడం.Valuesను commaతో వేరు చేయాలి:
min(90%, 700px).
clamp(1rem, 3rem) అని రెండు values మాత్రమే ఇవ్వడం.clamp()కు మూడు values అవసరం: clamp(minimum, preferred, maximum).
clamp(3rem, 2vw, 1rem)లో minimum కంటే maximum చిన్నగా ఇవ్వడం.సాధారణంగా minimum value maximum value కంటే చిన్నదిగా ఉండాలి. ఉదాహరణ:
clamp(1rem, 2vw, 3rem).
Functionను property declarationలో valueగా రాయాలి. ఉదాహరణ:
width: min(90%, 700px);.
Interview Questions
calc() functionను ఎందుకు ఉపయోగిస్తారు?
Answer: calc() CSS values మధ్య calculation చేయడానికి ఉపయోగిస్తారు. ఉదాహరణకు width: calc(100% - 40px).
min() మరియు max() మధ్య తేడా ఏమిటి?
Answer: min() ఇచ్చిన valuesలో చిన్న valueను ఎంచుకుంటుంది. max() ఇచ్చిన valuesలో పెద్ద valueను ఎంచుకుంటుంది.
clamp() syntax ఏమిటి?
Answer: clamp(minimum, preferred, maximum) అనేది syntax. Result minimum కంటే తక్కువగా లేదా maximum కంటే ఎక్కువగా ఉండదు.
Responsive designలో clamp() ఉపయోగం ఏమిటి?
Answer: Screen size మారినప్పుడు font size లేదా spacing సున్నితంగా మారుతుంది. అదే సమయంలో minimum మరియు maximum limits వల్ల text చాలా చిన్నగా లేదా చాలా పెద్దగా మారదు.
Exam Questions
ఈ CSS declarationలో browser ఏ valueను ఎంచుకుంటుంది? width: min(80%, 500px);
Answer:
80% మరియు 500pxలో చిన్న valueను widthగా ఎంచుకుంటుంది.
font-size: clamp(1rem, 3vw, 2rem);లో మూడు values ఏం సూచిస్తాయి?
Answer:
1rem minimum value, 3vw preferred flexible value, 2rem maximum value.
calc(100% - 30px) ఏం చేస్తుంది?
Answer:
Parent లేదా containing area widthలో 30px తగ్గించి మిగిలిన widthను calculate చేస్తుంది.
చిన్న value ఎంచుకోవడానికి ఏ CSS function ఉపయోగిస్తారు?
Answer:
min() function ఉపయోగిస్తారు.
Quick Revision
calc()CSS values మధ్య calculation చేస్తుంది.min()ఇచ్చిన valuesలో చిన్న valueను ఎంచుకుంటుంది.max()ఇచ్చిన valuesలో పెద్ద valueను ఎంచుకుంటుంది.clamp()minimum, preferred మరియు maximum valuesను ఉపయోగిస్తుంది.clamp()responsive font sizes మరియు spacing కోసం చాలా ఉపయోగకరం.calc()లో+మరియు-operators చుట్టూ spaces ఉంచండి.- CSS functionsను property valueలో రాయాలి; selectorగా కాదు.