सीएसएस के स्टेप्ड वैल्यू के गणित के फ़ंक्शन अब बेसलाइन 2024 में उपलब्ध हैं

पब्लिश करने की तारीख: 14 मई, 2024

सभी मुख्य इंजन अब सीएसएस की सीढ़ीनुमा वैल्यू वाले मैथ फ़ंक्शन के साथ काम करते हैं—round(), mod(), और rem().

चरणों वाली वैल्यू वाले सभी फ़ंक्शन, किसी दी गई वैल्यू को किसी दूसरी चरण की वैल्यू के हिसाब से बदल देते हैं.

round() फ़ंक्शन

round() फ़ंक्शन, राउंड करने के लिए कोई वैल्यू, राउंड करने का इंटरवल, और राउंड करने की वैकल्पिक रणनीति लेता है. वैल्यू को राउंड करने की रणनीति के हिसाब से, राउंड करने के इंटरवल के सबसे करीबी पूर्णांक गुणज तक राउंड किया जाता है.

जिस वैल्यू को राउंड करना है या राउंड किए गए इंटरवल को, सीएसएस की कस्टम प्रॉपर्टी होना चाहिए. दोनों वैल्यू को हार्डकोड करना मान्य है. हालांकि, अगर आपके पास वैल्यू का हिसाब लगाने का विकल्प है, तो संख्या को राउंड करने का कोई मतलब नहीं है.

नीचे दी गई सीएसएस, --my-font-size की वैल्यू को 1rem के इंटरवल तक राउंड करती है.

font-size: round(var(--my-font-size), 1rem);

राउंडिंग की डिफ़ॉल्ट रणनीति nearest है. राउंडिंग की रणनीति वाला पिछला उदाहरण यहां दिया गया है:

font-size: round(nearest,var(--my-font-size), 1rem);

राउंडिंग की रणनीति के लिए ये वैल्यू हो सकती हैं:

  • up: यह JavaScript Math.ceil() तरीके के बराबर है. वैल्यू को राउंड करने के लिए, उसे राउंड करने के इंटरवल के सबसे करीबी पूर्णांक गुणज तक राउंड अप करता है.
  • down: यह JavaScript Math.floor() तरीके के बराबर है. वैल्यू को राउंड करने के लिए, इंटरवल के सबसे करीब के पूर्णांक गुणज तक वैल्यू को राउंड करता है.
  • nearest (डिफ़ॉल्ट): यह JavaScript Math.round() के बराबर है. वैल्यू को राउंड करने के लिए, उसे राउंड करने के इंटरवल के सबसे करीबी पूर्णांक गुणज तक बढ़ाया या घटाया जाता है.
  • to-zero: यह JavaScript Math.trunc() तरीके के बराबर है. वैल्यू को, राउंडिंग इंटरवल के सबसे करीबी पूर्णांक गुणज तक राउंड करता है.

round() के बारे में ज़्यादा जानने के लिए, डैन विल्सन की नई सीएसएस मैथ: round() लेख पढ़ें.

rem() और mod() फ़ंक्शन

rem() और mod() सीएसएस फ़ंक्शन, JavaScript के बचे हुए ऑपरेटर (%) की तरह ही काम करते हैं. ये दो वैल्यू लेते हैं. पहली वैल्यू (डिविडेंड) को दूसरी वैल्यू (डिविज़र) से भाग दिया जाता है और बचे हुए हिस्से को दिखाया जाता है.

margin: rem(18px, 5px); /* returns 3px */

इन दोनों फ़ंक्शन में अंतर यह है कि rem() हमेशा डिवीडेंड का साइन लेता है. इसलिए, अगर पहली वैल्यू पॉज़िटिव है, तो लौटाई गई वैल्यू भी पॉज़िटिव होगी. mod() फ़ंक्शन, भाग देने वाले का चिह्न लेता है.

rem() और mod() के बारे में ज़्यादा जानने के लिए, नई सीएसएस मैथ: rem() और mod() लेख पढ़ें. इसे डैन विल्सन ने लिखा है.