CSS: फुल कैल्क () फंक्शन गाइड

.main-content {
  /*  80px  100vh */
  height: calc(100vh - 80px);
}

Calc () फ़ंक्शन और CSS गुण मान

.el {
  font-size: calc(3vw + 2px);
  width:     calc(100% - 20px);
  height:    calc(100vh - 20px);
  padding:   calc(1vw + 5px);
}

.el {
  margin: 10px calc(2vw + 5px);
  border-radius: 15px calc(15px / 3) 4px 2px;
  transition: transform calc(1s - 120ms);
}

.el {
  background: #1E88E5 linear-gradient(
    to bottom,
    #1E88E5,
    #1E88E5 calc(50% - 10px),
    #3949AB calc(50% + 10px),
    #3949AB
  );
}

कैल्क () फ़ंक्शन संख्यात्मक गुणों के साथ काम करने के लिए एक उपकरण है।

.el {
  /* ! */
  counter-reset: calc("My " + "counter");
}
.el::before {
  /* ! */
  content: calc("Candyman " * 3);
}

line-height: calc(1.2 * 1.2);

transform: rotate(calc(10deg * 5));

.el {
  /*   ,    */
  width: calc(20px);
}

मीडिया प्रश्नों में Calc () का उपयोग नहीं किया जा सकता है

@media (max-width: 40rem) {
  /* 40rem   */
}

/*  ! */
@media (min-width: calc(40rem + 1px)) {
  /* ,  40rem */
}

एक अभिव्यक्ति में विभिन्न इकाइयों का उपयोग करना

/*      */
width: calc(100% - 20px);

transform: rotate(calc(1turn + 45deg));

animation-delay: calc(1s + 15ms);

प्रीप्रोसेसर गणना के साथ कैल्क () की तुलना

$padding: 1rem;

.el[data-padding="extra"] {
  padding: $padding + 2rem; //  3rem;
  margin-bottom: $padding * 2; //  2rem; 
}

सीएसएस में प्रयुक्त संख्यात्मक मूल्यों के अर्थ का खुलासा करना

.el {
  /*   , */
  width: calc(100% / 7);

  /*   */
  width: 14.2857142857%;
}

[data-columns="7"] .col { width: calc(100% / 7); }
[data-columns="6"] .col { width: calc(100% / 6); }
[data-columns="5"] .col { width: calc(100% / 5); }
[data-columns="4"] .col { width: calc(100% / 4); }
[data-columns="3"] .col { width: calc(100% / 3); }
[data-columns="2"] .col { width: calc(100% / 2); }

कैल्क के गणितीय संचालक () कार्य

.el {
  /*  */
  margin: calc(10px + 10px);

  /*  */
  margin: calc(10px + 5);
}

.el {
  /*  */
  margin: calc(30px / 3);

  /*  */
  margin: calc(30px / 10px);

  /*  (   ) */
  margin: calc(30px / 0);
}

.el {
  /*  */
  margin: calc(10px * 3);

  /*  */
  margin: calc(3 * 10px);

  /*  */
  margin: calc(30px * 3px);
}

रिक्त स्थान का महत्व

.el {
  /*  */
  font-size: calc(3vw + 2px);

  /*  */
  font-size: calc(3vw+2px);

  /*  */
  font-size: calc(3vw - 2px);

  /*  */
  font-size: calc(3vw-2px);
}

.el {
  /*  */
  width: calc(
    100%     /   3
  );
}

.el {
  /*  */
  width: calc (100% / 3);
}

नेस्टेड निर्माण: कैल्क (कैल्क ())

.el {
  width: calc(
    calc(100% / 3)
    -
    calc(1rem * 2)
  );
}

.el {
  width: calc(
   (100% / 3)
    -
   (1rem * 2)
  );
}

.el {
  width: calc(100% / 3 - 1rem * 2);
}

.el {
  /* ,   , */
  width: calc(100% + 2rem / 2);

  /*     ,    */
  width: calc((100% + 2rem) / 2);
}

कस्टम सीएसएस गुण और कैल्क ()

html {
  --spacing: 10px;
}

.module {
  padding: calc(var(--spacing) * 2);
}

html {
  --spacing: 10px;
  --spacing-L: var(--spacing) * 2;
  --spacing-XL: var(--spacing) * 3;
}

.module[data-spacing="XL"] {
  padding: calc(var(--spacing-XL));
}

<div style="--index: 1;"> ... </div>
<div style="--index: 2;"> ... </div>
<div style="--index: 3;"> ... </div>
div {
  /*     HTML (   ) */
  animation-delay: calc(var(--index, 1) * 0.2s);
}

इन संपत्तियों की घोषणा के बाद कस्टम संपत्तियों को इकाइयां सौंपना

html {
  --importantNumber: 2;
}

.el {
  /*    ,  ,        */
  padding: calc(var(--importantNumber) * 1rem);
}

फूलों से काम चलाओ

html {
  --H: 100;
  --S: 100%;
  --L: 50%;
}

.el {
  background: hsl(
    calc(var(--H) + 20),
    calc(var(--S) - 10%),
    calc(var(--L) + 30%)
  )
}

आप कैल्क () और एटर () को जोड़ नहीं सकते

<div data-color="red">...</div>
div {
  /*    */
  color: attr(data-color);
}

div::before {
  content: attr(data-color);
}

<div class="grid" data-columns="7" data-gap="2">...</div>
.grid {
  display: grid;

  /*         */
  grid-template-columns: repeat(attr(data-columns), 1fr);
  grid-gap: calc(1rem * attr(data-gap));
}

<div class="grid" style="--columns: 7; --gap: 2rem;">...</div>
.grid {
  display: grid;

  /* ! */
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-gap: calc(var(--gap));
}

ब्राउज़र उपकरण

ब्राउज़र का समर्थन

.el {
  width: 92%; /*   */
  width: calc(100% - 2rem);
}

• 59 संस्करण के नीचे फ़ायरफ़ॉक्स ब्राउज़र calc()रंग सेट करने के लिए उपयोग किए जाने वाले कार्यों का समर्थन नहीं करता है । उदाहरण के लिए color: hsl(calc(60 * 2), 100%, 50%):।
• IE 9-11 संपत्ति द्वारा निर्दिष्ट छाया को प्रस्तुत नहीं करेगा box-shadowयदि इसका उपयोग किसी भी मान को निर्धारित करने के लिए किया जाता है calc()।
• width: calc()टेबल कोशिकाओं पर लागू होने पर न तो IE 9-11 और न ही एज समर्थन दृश्य डिजाइन ।

जीवन उदाहरण

• मैं calc()प्रबंधन के क्षेत्रों के लिए सहायक वर्ग बनाता था .full-bleed { width: 100vw; margin-left: calc(50% — 50vw); }:। मैं कह सकता हूं कि यह calc()मेरे शीर्ष 3 सबसे उपयोगी सीएसएस विशेषताओं में है।
• मैंने इस फ़ंक्शन का उपयोग पृष्ठ के एक निश्चित "पाद लेख" के लिए स्थान आवंटित करने के लिए किया था।
• calc() . , font-size, . font-size — calc() line-height. ( , calc() , , , rem em. , ).
• , . . — : .margin { width: calc( (100vw — var(--content-width)) / 2); }.
• calc() - , . : .drop-cap { --drop-cap-lines: 3; font-size: calc(1em * var(--drop-cap-lines) * var(--body-line-height)); }.
• , .
• , padding vw/vh.
• मैं calc()प्रतिबंधों को दरकिनार करने के लिए आवेदन करता हूं background-position। यह विशेष रूप से ग्रेडिएंट्स में रंग परिवर्तन पदों के समायोजन पर प्रतिबंध के लिए सच है। उदाहरण के लिए, इसे निम्नानुसार वर्णित किया जा सकता है: "रंग बदलने की स्थिति की स्थिति, 0.75emनीचे तक नहीं पहुंचना ।"