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

Rachel Andrew

सभी मुख्य इंजन में, अब सीएसएस स्टेप्ड वैल्यू मैथ फ़ंक्शन—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() तरीके की तरह काम करता है. वैल्यू को, पूर्णांकन वाले इंटरवल के सबसे पास वाले पूर्णांक मल्टीपल तक पूर्णांक बनाता है.

डैन विल्सन की ओर से The New CSS Math: round() में round() के बारे में ज़्यादा जानें.

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

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

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

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

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