Modern CSS
CSS Functions
calc(), var(), url()
💡 CSS functions calculator jaisi hain — different units ko mix karke math kar sakte ho (jaise "100% minus 50px"), jo sirf static values se possible nahi tha.
calc() DIFFERENT units ko mix karke calculations allow karta hai (jaise 100% - 50px, jo alag-alag units hain, normally combine nahi ho sakte). var() custom properties access karta hai. url() external resources (images, fonts) reference karta hai. Ye sab functions ek doosre ke andar bhi nest ho sakte hain.
.sidebar {
width: calc(100% - 250px); /* full width MINUS fixed sidebar */
}
.dynamic-spacing {
padding: calc(var(--spacing-unit) * 2 + 5px);
/* Variable + math, sab ek saath */
}
.hero {
background-image: url('hero.jpg');
}
.responsive-font {
font-size: calc(1rem + 1vw);
/* Base size + viewport-relative scaling — simple fluid typography */
}🧮
CSS functions calculator jaisi hain — different units ko mix karke math kar sakte ho (jaise "100% minus 50px"), jo sirf static values se possible nahi tha.
1 / 2
⚡ Quick Recap
- calc() = mixed-unit math (100% - 50px jaisa)
- Operators ke around spaces MANDATORY hain
- var()/url() bhi calc() ke andar nest ho sakte hain
Is page mein (2 subtopics)
Ye functions calc() ke saath combine bhi ho sakte hain complex, powerful expressions banane ke liye — jaise ek spacing jo dono viewport-relative AUR bounded ho.
.container {
padding: clamp(16px, calc(4vw + 8px), 48px);
/* Complex fluid calculation, min/max bounds ke saath */
}Tip: Bahut complex calc()/clamp() expressions readability kharab kar sakte hain — agar formula bahut complicated ho raha hai, ek CSS variable mein break karna (ya comment add karna) helpful hai.
Modern CSS color syntax (space-separated, optional alpha with slash) purane comma-separated syntax se cleaner hai, aur transparency ke saath existing colors modify karne ke liye rgb()/hsl() variable values bhi accept karte hain.
/* Modern syntax: */
.modern {
color: rgb(255 0 0 / 50%); /* space-separated, slash for alpha */
}
/* Purana syntax (still valid): */
.old {
color: rgba(255, 0, 0, 0.5);
}Tip: Dono syntax functionally equivalent hain — modern (space-separated) syntax gradually zyada common ho raha hai naye codebases mein, lekin comma-separated abhi bhi widely used/supported hai.