मैनुअल मटुज़ोविक: मैक्स () ट्रिकरी

ए के माध्यम से मैनुअल माटुज़ोविक द्वारा पोस्ट जो एक डेमो के माध्यम से है तेमानी अफिफ.

.wrapper {
  margin-inline: max(0px, ((100% - 64rem) / 2)); 
}

यहां जो कुछ भी हो रहा है, उसके बारे में मैनुअल के टूटने को पढ़ने के लिए आप खुद को एक एहसान कर रहे होंगे, लेकिन यह मूल रूप से इस लंबे सिंटैक्स के बराबर काम करता है:

.wrapper {
  max-width: 64rem;
  margin: 0 auto;
  width: 100%;
}

…कहाँ पे:

• अधिकतम () सीएसएस संख्यात्मक मानों की अल्पविराम से अलग की गई सूची को स्वीकार करता है, जहां लागू मूल्य सबसे बड़ा है (या के रूप में एमडीएन इसे डालता है, "सबसे सकारात्मक") सेट में से एक।
• 0px सेट में पहला मान है, यह सुनिश्चित करता है कि सबसे छोटा मान हमेशा शून्य पिक्सेल से अधिक होने वाला है।
• (100% - 64rem) सेट में दूसरा "मान" है, लेकिन गणना के रूप में व्यक्त किया जाता है (ध्यान दें कि calc() अनावश्यक है) जो को घटाता है max-width तत्व का (64rem) इसके पूर्ण उपलब्ध से width (100%) जो बचा है वह वह स्थान है जो तत्व द्वारा नहीं लिया गया है।
• ((100% - 64rem) / 2)) उस शेष स्थान को समान रूप से विभाजित करता है क्योंकि हम इसे तत्व की इनलाइन सीमाओं के बीच विभाजित कर रहे हैं।
• max(0px, ((100% - 64rem) / 2)) तुलना 0px और (100% - 64rem) / 2). सबसे बड़ा मूल्य उपयोग किया जाता है। यह ज्यादातर मामलों में समीकरण का परिणाम होगा, लेकिन अगर 64rem तत्व के पूर्ण के परिकलित मान से कभी अधिक होता है 100% चौड़ाई, यह उस मान को शून्य पर लॉक कर देगा ताकि यह सुनिश्चित हो सके कि इसका परिणाम कभी भी नकारात्मक मान में न हो।
• margin-inline वह गुण है जो जीतने वाला मान सेट करता है, जो तत्व के इनलाइन पक्षों पर मार्जिन लागू करता है - यह तार्किक आशुलिपि है जो समान मान को सेट करने के बराबर है margin-left और margin-right भौतिक गुण।

यह एक ही तरह का विचार है क्रिस ने कुछ समय पहले शेयर किया था जो सीएसएस का उपयोग करता है max()हल करने के लिए कार्य "अंदर की समस्या" — एक कंटेनर जो एक पूर्ण ब्लीड पृष्ठभूमि रंग का समर्थन करता है, जबकि इसके अंदर की सामग्री को सीमित करता है padding.

max(), calc(), margin-inline... यह बहुत सी नई तरह की सीएसएस है! और मैनुअल सही स्मैक थपका के बीच में है इन और अन्य आधुनिक CSS सुविधाओं के बारे में 100 दिनों में लिखना.

सीधा लिंक →