वर्डप्रेस ब्लॉक थीम्स में फ्लुइड टाइपोग्राफी सपोर्ट जोड़ना

द्रव टाइपोग्राफी है a फैंसी तरीका "फ़ॉन्ट गुणों का वर्णन करना, जैसे कि आकार या रेखा की ऊँचाई, जो कि व्यूपोर्ट के आकार के अनुसार तरल रूप से मापी जाती है"। यह है अन्य नामों से भी जाना जाता है, जैसे प्रतिक्रियाशील टाइपोग्राफी, लचीला प्रकार, द्रव प्रकार, व्यूपोर्ट आकार की टाइपोग्राफी, द्रव टाइपोग्राफी, और यहां तक ​​कि उत्तरदायी प्रदर्शन पाठ।

यहाँ एक है द्रव टाइपोग्राफी का उदाहरण कि आप लाइव खेल सकते हैं (सौजन्य) एमडीएन दस्तावेज). CSS-Tricks ने द्रव टाइपोग्राफी को कवर किया है व्यापक रूप से भी। लेकिन यहां बात आपको द्रव टाइपोग्राफी से परिचित कराने की नहीं है, बल्कि इसका उपयोग कैसे करना है। अधिक विशेष रूप से, मैं आपको दिखाना चाहता हूं कि वर्डप्रेस 6.1 में द्रव टाइपोग्राफी को कैसे लागू किया जाए, जिसने हाल ही में सीधे वर्डप्रेस ब्लॉक एडिटर में एक द्रव प्रकार की सुविधा पेश की है।

खोलो अपने style.css फ़ाइल, फैंसी के साथ एक स्टाइल नियम में थप्पड़ clamp()- पर font-size संपत्ति, और जाने के लिए अच्छा है, है ना? ज़रूर, यह आपको तरल पाठ देगा, लेकिन ब्लॉक संपादक नियंत्रण प्राप्त करने के लिए जो आपकी वर्डप्रेस साइट पर कहीं भी द्रव प्रकार लागू करना संभव बनाता है? इन अवरुद्ध दिनों में इसके लिए एक अलग दृष्टिकोण की आवश्यकता है।

गुटेनबर्ग में द्रव टाइपोग्राफी समर्थन

कुछ वर्डप्रेस थीम डेवलपर्स इसका उपयोग कर रहे हैं clamp() एक तरल पदार्थ को परिभाषित करने के लिए कार्य font-size, उनके WordPress विषयों में, यहां तक ​​कि नए “ब्लॉक” थीम जैसे . में भी ट्वेंटी-ट्वेंटी, तेईस तेईस, और दूसरों.

लेकिन गुटेनबर्ग प्लगइन - जिसमें वर्डप्रेस ब्लॉक और साइट संपादक सुविधाओं के लिए प्रयोगात्मक विकास शामिल है - ने द्रव टाइपोग्राफी के लिए समर्थन पेश किया संस्करण 13.8 . में शुरू हो रहा है. इसने थीम स्तर पर कार्यान्वयन के लिए द्वार खोल दिया ताकि द्रव प्रकार को विशिष्ट तत्वों पर लागू किया जा सके और सीधे ब्लॉक संपादक में ब्लॉक किया जा सके। सीएसएस-ट्रिक्स को यहां तक ​​​​कि चिल्लाया गया था पुल अनुरोध जिसने फीचर को मर्ज कर दिया।

वह काम WordPress Core का हिस्सा बन गया वर्डप्रेस 6.1. रिच ताबोर, ब्लॉक एडिटर में द्रव टाइपोग्राफी के पहले अधिवक्ताओं में से एक कहते हैं:

[फ्लुइड टाइपोग्राफी] भी वर्डप्रेस को अधिक शक्तिशाली बनाने का एक हिस्सा है, जबकि अधिक जटिल नहीं है (जिसे हम सभी जानते हैं कि यह काफी चुनौती भरा है)। […] द्रव टाइपोग्राफी बस काम करती है। असल में, मुझे लगता है कि यह बहुत अच्छा काम करता है।

इस वर्डप्रेस पोस्ट को हाइलाइट करें ब्लॉक स्तर पर सुविधा का समर्थन करने के लिए लिया गया दृष्टिकोण ताकि डिफ़ॉल्ट रूप से गतिशील रूप से ब्लॉक पर एक द्रव फ़ॉन्ट आकार लागू किया जा सके। वहाँ हैं कुछ लाभ इसके लिए, निश्चित रूप से:

• यह विषय लेखकों को कोड में इसे लागू करने की चिंता किए बिना द्रव टाइपोग्राफी को सक्रिय करने का एक तरीका प्रदान करता है।
• यह विशिष्ट टाइपोग्राफ़िकल संस्थाओं, जैसे तत्वों या ब्लॉकों को बनाए रखने योग्य और पुन: प्रयोज्य तरीके से द्रव टाइपोग्राफी लागू करता है।
• यह फ़ॉन्ट आकार इकाइयों के संदर्भ में लचीलेपन की अनुमति देता है (जैसे px, rem, em, तथा %).

अब जब यह नई सुविधा डिफ़ॉल्ट रूप से वर्डप्रेस ब्लॉक एडिटर में उपलब्ध है, तो थीम लेखक अतिरिक्त कोड लिखे बिना समान तरल टाइपोग्राफी लागू कर सकते हैं।

टाइपोग्राफी और स्पेसिंग सेटिंग्स का समर्थन करने वाले ब्लॉक

गुटेनबर्ग 14.1 16 सितंबर, 2022 को जारी किया गया, और ब्लॉकों के एक समूह पर टाइपोग्राफ़िक सेटिंग्स की शुरुआत की। इसका मतलब है कि उन ब्लॉक के लिए टेक्स्ट सेटिंग्स पहले सीएसएस में सेट की गई थीं और उन्हें सीएसएस में भी बदलना पड़ा था। लेकिन वे ब्लॉक अब ब्लॉक संपादक इंटरफ़ेस में फ़ॉन्ट और रिक्ति नियंत्रण प्रदान करते हैं।

वह काम वर्तमान में वर्डप्रेस 6.1 में जोड़ा जाना है, जैसा कि विस्तृत है यह वर्डप्रेस ब्लॉग पोस्ट बनाएं. और इसके साथ टाइपोग्राफी समर्थन के साथ ब्लॉकों की एक विस्तारित संख्या है।

वर्डप्रेस ब्लॉक थीम में फ्लुइड टाइप घोषित करना

तो, हम इस नई तरल टाइपोग्राफी को वर्डप्रेस में कैसे उपयोग करते हैं? उत्तर में है theme.json, एक नई-ईश फ़ाइल जो थीम को ब्लॉक करने के लिए विशिष्ट है जिसमें key:value जोड़े में थीम कॉन्फ़िगरेशन का एक गुच्छा होता है।

आइए एक बड़े फ़ॉन्ट के लिए एक नियम देखें theme.json जहां contentSize: 768px और हम एक के साथ काम कर रहे हैं widesize: 1600px विन्यास। इस प्रकार हम एक CSS निर्दिष्ट कर सकते हैं font-size का उपयोग clamp() समारोह:

"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [ 
      {
        "name": "Large",
        "size": "clamp(2.25rem, 6vw, 3rem)",
        "slug": "large"
      }
    ]
  }
}

वर्डप्रेस 6.1 के अनुसार, केवल rem, em और px इकाइयों का समर्थन किया जाता है।

यह बहुत अच्छा है और काम करता है, लेकिन नई द्रव प्रकार की सुविधा के साथ हम वास्तव में एक अलग दृष्टिकोण का उपयोग करेंगे। सबसे पहले, हम पर द्रव टाइपोग्राफी का विकल्प चुनते हैं settings.typography, जिसमें एक नया है fluid संपत्ति:

"settings": {
  "typography": {
    "fluid": true
  }
}

फिर हम अपना निर्दिष्ट करते हैं settings.fontSizes पहले की तरह, लेकिन एक नए के साथ fluidSize संपत्ति जहां हम सेट कर सकते हैं min और max हमारे द्रव प्रकार सीमा के लिए आकार मान।

"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [ 
      {
        "size": "2.25rem",
        "fluidSize": {
          "min": "2.25rem",
          "max": "3rem"
        },
        "slug": "large",
        "name": "Large"
      }
    ]
  }
}

सचमुच यही है। हमने अभी-अभी फ्लुइड टाइप को "लार्ज" नामक फॉन्ट साइज में एक रेंज के साथ जोड़ा है जो से शुरू होता है 2.25rem और स्केल अप करने के लिए 3rem. अब, हम "लार्ज" फॉन्ट को फॉन्ट सेटिंग्स के साथ किसी भी ब्लॉक में लागू कर सकते हैं।

यह हुड के नीचे कैसे काम करता है? Rich Tabor एक अच्छी व्याख्या प्रस्तुत करता है, जैसा हुआ GitHub में यह पुल अनुरोध. संक्षेप में, वर्डप्रेस परिवर्तित करता है theme.json निम्नलिखित सीएसएस नियम में गुण:

.has-large-font-size {
  font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);
}

... जो तत्व पर लागू होता है, एक पैराग्राफ ब्लॉक कहें:

...

प्रारंभ में, मुझे सीएसएस की अवधारणा को समझने और अपने दिमाग में लपेटने में मुश्किल हुई clamp() के बारे में भी सीखे बिना कार्य करें min(), max(), तथा calc() कार्य करता है. यह कैलकुलेटर टूल मुझे काफी मदद मिली, खासकर यह निर्धारित करने के लिए कि मेरी अपनी थीम परियोजनाओं में कौन से मूल्यों का उपयोग करना है।

प्रदर्शन उद्देश्यों के लिए, आइए कैलकुलेटर का उपयोग हमारे . को परिभाषित करने के लिए करें font-size रेंज ताकि आकार है 36px एक पर 768px व्यूपोर्ट की चौड़ाई और 48px एक पर 1600px व्यूपोर्ट की चौड़ाई।

कैलकुलेटर स्वचालित रूप से निम्नलिखित सीएसएस उत्पन्न करता है:

/* 36px @ 768px increasing to 48px @ 1600px */
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);

कैलकुलेटर इनपुट इकाइयों को चुनने के लिए विकल्प प्रदान करता है: px, rem, तथा em. अगर हम चुनते हैं rem इकाई, कैलकुलेटर निम्नलिखित उत्पन्न करता है clamp() मूल्य:

/* 2.25rem @ 48rem increasing to 3rem @ 100rem */
font-size: clamp(2.25rem, calc(2.25rem + ((1vw - 0.48rem) * 1.4423)), 3rem);

तो, वे न्यूनतम और अधिकतम मान के अनुरूप हैं fluidSize.min और fluidSize.max में मूल्य theme.json। min मूल्य उन व्यूपोर्ट्स पर लागू किया जाता है जो हैं 768px चौड़ा और नीचे। फिर font-size जैसे-जैसे व्यूपोर्ट की चौड़ाई बढ़ती है, स्केल बढ़ता जाता है। यदि व्यूपोर्ट . से अधिक चौड़ा है 1600px, max लागू किया जाता है और font-size वहाँ छाया हुआ है।

उदाहरण

वहां विस्तृत परीक्षण निर्देश मर्ज किए गए पुल अनुरोध में जिसने सुविधा पेश की। से और भी अधिक परीक्षण निर्देश हैं मेक वर्डप्रेस पर जस्टिन टैडलॉक की प्री-प्री-रिलीज़ पोस्ट.

उदाहरण 1: एक नया द्रव फ़ॉन्ट सेटिंग सेट करना

आइए जस्टिन के निर्देशों के सेट से शुरू करें। मैंने डिफ़ॉल्ट के संशोधित संस्करण में उपयोग किया है तेईस तेईस विषय जो वर्तमान में विकास के अधीन है।

सबसे पहले, आइए सुनिश्चित करें कि हम गुटेनबर्ग प्लगइन (13.8 और ऊपर) या वर्डप्रेस 6.1 चला रहे हैं, फिर फ्लुइड टाइप में ऑप्ट इन करें settings.typography.fluid में संपत्ति theme.json फ़ाइल:

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1600px"
    },
    "typography": {
      "fluid": true
    }
  }
}

अब, चलो छोड़ देते हैं settings.typography.fontSizes वहां उदाहरण:

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1600px"
    },
    "typography": {
      "fluid": true
      "fontSizes": [
        {
          "name": "Normal",
          "size": "1.125rem",
          "fluid": {
            "min": "1rem",
            "max": "1.5rem"
          },
          "slug": "normal"
        }
      ]
    }
  }
}

यदि सब कुछ सही ढंग से काम कर रहा है, तो अब हम वर्डप्रेस ब्लॉक एडिटर में जा सकते हैं और हमारे ब्लॉक में "सामान्य" फ़ॉन्ट सेटिंग लागू कर सकते हैं:

अच्छा! और अगर हम उस तत्व को सामने के छोर पर सहेजते हैं और उसका निरीक्षण करते हैं, तो यह मार्कअप है:

बहुत अच्छा। अब आइए सुनिश्चित करें कि CSS वास्तव में है:

अच्छा अच्छा। आइए उस सीएसएस कस्टम प्रॉपर्टी को यह देखने के लिए बेनकाब करें कि यह वास्तव में क्लैम्पिन है या नहीं:

ऐसा लगता है कि सब कुछ वैसा ही काम कर रहा है जैसा हम चाहते हैं! आइए एक और उदाहरण देखें…

उदाहरण 2: द्रव प्रकार से फ़ॉन्ट सेटिंग को छोड़कर

इस बार, आइए अनुसरण करें मर्ज किए गए पुल अनुरोध से निर्देश कैरोलिना न्यमार्क द्वारा इस उदाहरण के लिए एक मंजूरी के साथ जो दिखाता है कि हम एक विशिष्ट फ़ॉन्ट सेटिंग पर द्रव प्रकार को कैसे अक्षम कर सकते हैं।

मैं प्रयोग किया जाता खाली विषय जैसा कि निर्देशों में सलाह दी गई है और खोला गया है theme.json परीक्षण के लिए फ़ाइल। सबसे पहले, हम द्रव प्रकार में ठीक वैसे ही चुनते हैं जैसे हमने पहले किया था:

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1000px"
    },
    "typography": {
      "fluid": true
    }
  }
}

इस बार, हम छोटे के साथ काम कर रहे हैं wideSize के मूल्य 1000px के बजाय 1600px. इससे हमें द्रव प्रकार को एक सटीक सीमा में काम करते हुए देखने की अनुमति मिलनी चाहिए।

ठीक है, नीचे कुछ कस्टम फ़ॉन्ट आकार परिभाषित करने के लिए settings.typography.fontSizes:

{
  "version": 2,
  "settings": {
    "typography": {
      "fluid": true,
      "fontSizes": [
        {
          "size": ".875rem",
          "fluid": {
            "min": "0.875rem",
            "max": "1rem"
        },
          "slug": "small",
          "name": "Small"
        },
        {
          "size": "1rem",
          "fluid": {
            "min": "1rem",
            "max": "1.5rem"
          },
          "slug": "normal",
          "name": "Normal"
        },
        {
          "size": "1.5rem",
          "fluid": {
            "min": "1.5rem",
            "max": "2rem"
          },
          "slug": "large",
          "name": "Large"
        },
        {
          "size": "2.25rem",
          "fluid": false,
          "slug": "x-large",
          "name": "Extra large"
        }
      ]
    }
  }
}

ध्यान दें कि हमने द्रव प्रकार की सुविधा को केवल "सामान्य", "मध्यम" और "बड़े" फ़ॉन्ट सेटिंग्स पर लागू किया है। "एक्स्ट्रा लार्ज" वह विषम है जहां fluid वस्तु पर सेट है false.

वर्डप्रेस यहाँ से क्या करता है — के माध्यम से गुटेनबर्ग स्टाइल इंजन - हमारे द्वारा सीएसएस में सेट की गई संपत्तियों को लागू करता है clamp() प्रत्येक फ़ॉन्ट आकार सेटिंग के लिए फ़ंक्शन जिसने द्रव प्रकार और एक्स्ट्रा लार्ज सेटिंग के लिए एकल आकार मान चुना है:

--wp--preset--font-size--small: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem);
--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.962), 1.5rem);
--wp--preset--font-size--large: clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem);
--wp--preset--font-size--x-large: 2.25rem;

आइए सामने के छोर पर मार्कअप की जाँच करें:

अच्छी शुरुआत! आइए पुष्टि करें कि .has-x-large-font-size वर्ग को द्रव प्रकार से बाहर रखा गया है:

अगर हम उजागर करते हैं --wp--preset--font-size--x-large चर, हम देखेंगे कि यह सेट है 2.25rem.

ठीक यही हम चाहते हैं!

द्रव टाइपोग्राफी का समर्थन करने वाली थीम को ब्लॉक करें

कई वर्डप्रेस थीम पहले से ही इसका उपयोग करती हैं clamp() दोनों ब्लॉक और क्लासिक विषयों में द्रव प्रकार के लिए कार्य। द्रव टाइपोग्राफी उपयोग का एक अच्छा उदाहरण हाल ही में जारी किया गया है तेईस तेईस डिफ़ॉल्ट विषय.

मैंने से सभी ब्लॉक थीम की समीक्षा की है वर्डप्रेस ब्लॉक थीम निर्देशिका, परीक्षा theme.json प्रत्येक विषय की फ़ाइल और यह देखने के लिए कि वर्तमान में कितने ब्लॉक थीम द्रव टाइपोग्राफी का समर्थन करते हैं - नई सुविधा नहीं है क्योंकि यह अभी भी इस लेखन के रूप में गुटेनबर्ग प्लगइन में है - सीएसएस का उपयोग करना clamp() समारोह। मैंने जिन 146 विषयों की समीक्षा की, उनमें से अधिकांश ने a . का उपयोग किया clamp() रिक्ति को परिभाषित करने के लिए कार्य। उनमें से आधे से थोड़ा अधिक इस्तेमाल किया clamp() फ़ॉन्ट आकार परिभाषित करने के लिए। Alara थीम का उपयोग करने के लिए केवल एक ही है clamp() परिभाषित करने के लिए लेआउट कंटेनर आकार.

जाहिर है, हाल ही में जारी किए गए कुछ ही विषयों में नई द्रव टाइपोग्राफी सुविधा शामिल है। लेकिन यहाँ वे हैं जिन्हें मैंने पाया है जो इसे परिभाषित करते हैं theme.json:

और अगर आप मेरी पिछली पोस्ट यहाँ CSS-Tricks पर पढ़ते हैं, तो TT2 गोफर ब्लॉक डेमो के लिए मेरे द्वारा उपयोग की जाने वाली थीम को भी फ्लुइड टाइपोग्राफी सुविधा का समर्थन करने के लिए अपडेट किया गया है।

वर्डप्रेस द्रव टाइपोग्राफी सुविधाओं के लिए चयनित प्रतिक्रियाएं

वर्डप्रेस में सेटिंग स्तर पर तरल टाइपोग्राफी होना बहुत ही रोमांचक है! मैंने सोचा कि मैं वर्डप्रेस डेवलपर समुदाय में उन लोगों से कुछ विचार साझा करूंगा जिन्होंने इस पर टिप्पणी की है।

गुटेनबर्ग परियोजना के प्रमुख वास्तुकार मतियास वेंचुरा:

मेरी पसंदीदा नवीनतम गुटेनबर्ग विशेषताओं में से एक द्रव प्रकार है - उम्मीद है - "बस काम करता है"। यह 13.8 में परीक्षण के लिए उपलब्ध है। pic.twitter.com/9SLUgEg4pF

- मतियास वेंचुरा (@matias_ventura) अगस्त 4, 2022

अमीर ताबोर:

वर्डप्रेस में खूबसूरती से समृद्ध पृष्ठों को प्रकाशित करने की दिशा में बड़े प्रयासों में से एक के रूप में, द्रव टाइपोग्राफी वर्डप्रेस के साथ निर्माण करने वाले लोगों और सामग्री का उपभोग करने वाले दोनों के लिए एक बहुत बड़ा अनुभव है।

स्वचालित डेवलपर रेमन डोड टिप्पणी पुल अनुरोध में:

उस विचार को फ़ॉन्ट आकार के साथ तुलना करें जो विशिष्ट व्यूपोर्ट आकारों का जवाब देता है, जैसे कि परिभाषित किया गया मीडिया के प्रश्नों, लेकिन उन आकारों के बीच में कुछ न करें। theme.json पहले से ही लेखकों को अपने स्वयं के द्रव फ़ॉन्ट आकार मान सम्मिलित करने की अनुमति देता है। यह नहीं बदलेगा, लेकिन यह पीआर इसे उन लोगों को प्रदान करता है जो कार्यान्वयन विवरण के बारे में चिंता नहीं करना चाहते हैं।

निक क्रॉफ्ट, जेनेसिसडब्ल्यूपी के लेखक:

मैं झूठ नहीं बोलूंगा, मुझे लगता है कि यही वह विशेषता है जिसके बारे में मैं सबसे ज्यादा उत्साहित हूं। ऐसा करने के लिए क्लैंप का उपयोग कर रहा था लेकिन सिंटैक्स आपके औसत व्यक्ति के लिए आसान दिखता है।

- निक क्रॉफ्ट (@Nick_theGeek) सितम्बर 1, 2022

ब्रायन गार्नर, WPEngine में डिज़ाइनर और प्रिंसिपल डेवलपर एडवोकेट:

द्रव टाइपोग्राफी एक बहुत बड़ा सुधार है #wordpress. FSE थीम प्रयोगात्मक रूप से गुटेनबर्ग प्लगइन के माध्यम से इसमें शामिल हो सकते हैं, लेकिन हम इसे आधिकारिक तौर पर 6.1 इस गिरावट में समर्थित देखेंगे। यहां बताया गया है कि यह कैसा दिखता है/काम करता है: pic.twitter.com/Jc7gHdyz5R

- ब्रायन गार्डनर (@bgardner) सितम्बर 1, 2022

कुछ डेवलपर्स सोचना कुछ सुविधाओं में ऑप्ट-इन होना चाहिए। जेसन क्रिस्टो Automattic का कहना है:

मुझे द्रव टाइपोग्राफी की शक्ति पसंद है, हालांकि मैं यह भी नहीं मानता कि इसे डिफ़ॉल्ट रूप से सक्षम किया जाना चाहिए। इसका उपयोग (और इसका विवरण) महत्वपूर्ण डिजाइन निर्णय हैं जिन्हें सावधानी से किया जाना चाहिए।

आप आधिकारिक में अधिक टिप्पणियों का एक गुच्छा भी पा सकते हैं परीक्षण निर्देश सुविधा के लिए।

ऊपर लपेटकर

वर्डप्रेस में फ्लुइड टाइपोग्राफी फीचर है अभी भी सक्रिय विकास में इस लेखन के समय। इसलिए, अभी, थीम लेखकों को इसका उपयोग करने के लिए आगे बढ़ना चाहिए, लेकिन सावधानी के साथ और आधिकारिक रूप से जारी होने से पहले कुछ संभावित परिवर्तनों की अपेक्षा करें। जस्टिन सावधान विषय लेखक इस सुविधा का उपयोग करते हैं और निम्नलिखित दो GitHub मुद्दों पर नज़र रखने का सुझाव देते हैं:

अभी भी बहुत कुछ है जारी काम टाइपोग्राफी और अन्य डिज़ाइन से संबंधित वर्डप्रेस टूल्स पर। यदि आप रुचि रखते हैं, तो इसे देखें टाइपोग्राफी ट्रैकिंग GitHub टिकट और डिजाइन उपकरण संबंधित GitHub मुद्दे.

उपयुक्त संसाधन चुनें

द्रव प्रकार पर शोध करते समय मैंने निम्नलिखित लेखों का उपयोग किया और वर्डप्रेस इसे एक सुविधा के रूप में कैसे लागू कर रहा है।

ट्यूटोरियल और राय

सीएसएस-ट्रिक्स

calc() और संबंधित सीएसएस कार्य