CSS Calc Deep Dive
In this page:
selector {
width: calc(value1 operator value2); /* + - * / */
}एक Expression में Unit Types Mix करना
calc() तब shine करता है जब ऐसे unit types combine किए जाएँ जो normally interact नहीं कर सकते, जैसे किसी percentage-based width में एक fixed pixel value जोड़ना, जिससे आप ऐसे layout rules express कर सकते हैं जिन्हें वरना JavaScript चाहिए होती।
उदाहरण: Mixing Unit Types in One Expression
<style>
.box {
width: calc(100% - 40px);
background: lightblue;
padding: 10px;
}
</style>
<div class="box">Percentage and pixels combined in one expression</div>calc() Expressions को Nest करना
calc() expressions दूसरे calc() expressions को reference कर सकते हैं या parentheses में grouped sub-expressions रख सकते हैं, जो तब उपयोगी है जब कोई value कई derived intermediate calculations पर निर्भर करती है।
उदाहरण: Nesting calc() Expressions
<style>
.box {
width: calc(calc(100% - 20px) / 2);
background: lightblue;
padding: 10px;
}
</style>
<div class="box">A calc() expression built from another calc()</div>Responsive Calculations
calc() को viewport units और min/max width constraints के साथ जोड़ना fluid layouts बनाने देता है जो fixed media query thresholds पर अचानक jump करने के बजाय breakpoints में smoothly respond करते हैं।
उदाहरण: Responsive Calculations
<style>
h1 {
font-size: calc(1rem + 2vw);
}
</style>
<h1>Scales smoothly across breakpoints</h1>Custom Properties के साथ calc()
Custom properties calc() के साथ combine होने पर कहीं ज़्यादा powerful हो जाती हैं, जिससे एक single base value एक central source of truth से पूरी stylesheet में कई derived measurements drive कर सकती है।
उदाहरण: calc() With Custom Properties
<style>
.wrapper {
border: 2px dashed #999;
padding: 10px;
}
:root {
--cc-base-unit: 8px;
}
.box {
margin: calc(var(--cc-base-unit) * 3);
background: lightblue;
padding: 10px;
}
</style>
<div class="wrapper">
<div class="box">Derived from one central custom property</div>
</div>calc() के साथ Practical Layout Patterns
calc() के common real-world इस्तेमालों में sticky footers, एक fixed header को account में लेने वाले full-height sections, और shared gutters को घटाने वाले equal-width columns शामिल हैं, ऐसे patterns जो production websites में बार-बार दिखते हैं।
उदाहरण: Practical Layout Patterns With calc()
<style>
:root {
--header-height: 60px;
}
.content {
min-height: calc(100vh - var(--header-height));
background: lightblue;
}
</style>
<div class="content">Fills the screen minus the fixed header</div>- बिना ज़रूरत calc() को nest करना, calc() expressions plain arithmetic sub-expressions को किसी दूसरे calc() में wrap किए बिना भी रख सकते हैं।
- किसी percentage को viewport unit के साथ mix करने की कोशिश करना और एक single simple conversion की उम्मीद करना, browser combine करने से पहले हर unit को उसके अपने reference के against resolve करता है, जो अगर दोनों references अलग हों तो unexpected results दे सकता है।
- stylesheet में कहीं और calc() के अंदर इस्तेमाल हो रही एक custom property को overwrite करना, जिससे उसे reference करने वाला हर calc() expression चुपचाप बदल जाता है।
- calc() एक ही expression में percentages, pixels, viewport units, और custom properties को freely mix कर सकता है।
- calc() expressions को एक-दूसरे के अंदर nest किया जा सकता है, हालांकि उन्हें एक expression में flatten करना आमतौर पर ज़्यादा साफ़ होता है।
- shared values को custom properties में store करना और उन्हें calc() के अंदर reference करना एक maintainable, centrally controlled sizing system बनाता है।
calc() हर modern browser में supported है, और nested calc() expressions व calc() के अंदर custom property references वहाँ हर जगह supported हैं जहाँ calc() खुद supported है।
Chapter Quiz — Complete all 14 topics to unlock
0/14 topics done
Complete these topics first: