इनसेट - सीएसएस-ट्रिक्स

insetसीएसएस में संपत्ति चार इनसेट गुणों के लिए एक आशुलिपि है, top, right, bottomऔर leftएक घोषणा में। चार व्यक्तिगत गुणों की तरह ही, insetगैर-तैनात (स्थिर) तत्वों पर कोई प्रभाव नहीं है। दूसरे शब्दों में, positionइनसेट गुणों के प्रभावी होने से पहले एक तत्व को एक स्पष्ट मूल्य घोषित करना चाहिए ।

.box ( inset: 10px 20px 30px 40px; position: relative; )

inset शुरू में सीएसएस लॉजिकल प्रॉपर्टीज और वैल्यू लेवल 1 विनिर्देशन में परिभाषित किया गया है, जो 20 अप्रैल, 2020 तक संपादक के ड्राफ्ट में है।

वाक्य - विन्यास

जैसा कि आप ऊपर के उदाहरण से एकत्र हुए हैं, insetउसी के बहु-मूल्य सिंटैक्स का अनुसरण करता है paddingऔर margin। इसका मतलब है कि यह चार मूल्यों के रूप में कई के रूप में (के लिए घोषित ऑफसेट करने के लिए स्वीकार करता है top, right, bottomऔर left) और एक मूल्य के रूप में कुछ के रूप में (घोषित करने के लिए एक सभी चार संपत्तियों के लिए ऑफसेट बराबर)। और, जैसे paddingऔर margin, मान एक दक्षिणावर्त दिशा में बहते हैं, जिसके साथ शुरू होता है top।

.element ( inset: 1em 2em 3em 0; /* top right bottom left */ inset: 10% 5% -10%; /* top left/right bottom */ inset: 0 10px; /* top/bottom left/right */ inset: 20px; /* all edges = 20px */ )

इससे पहले inset, हमें प्रत्येक insetउप-संपत्ति को अलग-अलग घोषित करना होगा , जैसे:

.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )

अब, हम बस सीएसएस की एक पंक्ति के लिए कर सकते हैं:

.box ( position: absolute; inset: 0; /* ? */ )

मूल्यों

insetसंपत्ति सिर्फ शीर्ष, सही, नीचे और बाएँ तरह संख्यात्मक मान स्वीकार करता है। उन मूल्यों को इस तरह के रूप में, किसी भी वैध सीएसएस लंबाई हो सकता है px, em, remऔर %दूसरों के बीच में,।

आइए तार्किक गुणों के बारे में बात करते हैं

हम सिर्फ तार्किक गुणों की सतह को खरोंचने जा रहे हैं क्योंकि वास्तविक फोकस insetऔर इसके संबंधित उप-गुण हैं। राहेल एंड्रयू द्वारा इस स्मैशिंग मैगज़ीन लेख में इस विषय पर गहन गहन जानकारी प्राप्त करें।

वहाँ अधिक कर रहे हैं insetकी तुलना में उप-गुणों top, right, bottomऔर leftताकि उन्हें समझने के लिए लेकिन, यह की कीमत तार्किक गुण और मूल्यों से परिचित हो लें।

सामग्री को अलग-अलग दिशाओं (अर्थात लेखन मोड) में प्रदर्शित किया जा सकता है, जिसमें बाएँ-से-दाएँ, दाएँ-से-बाएँ, ऊपर से नीचे, और नीचे-से-शीर्ष शामिल हैं। जब हम "तार्किक" अवधारणाओं के बारे में बात करते हैं, तो हम वास्तव में सामग्री की लेखन दिशा के आधार पर शुरुआती बिंदु का उल्लेख कर रहे हैं।

कल्पना कीजिए कि आप एक ऐसी वेबसाइट का निर्माण कर रहे हैं, जिसमें अंग्रेजी और स्पैनिश की तरह बाएँ-से-दाएँ (LTR) भाषाओं और राइट-टू-लेफ्ट (RTL) भाषाओं का समर्थन करने की आवश्यकता है, जैसे फ़ारसी या अरबी। मान लें कि आप एक आइकन और उसके आगे एक पंक्ति पाठ के बीच एक मार्जिन जोड़ना चाहते हैं।

स्वाभाविक रूप से, आप margin-rightएलटीआर का समर्थन करने के लिए संपत्ति तक पहुंच सकते हैं , फिर एक और नियम जोड़ें जो उस मार्जिन को हटा देता है और इसे margin-leftआरटीएल के साथ बदल देता है :

.icon ( margin-right: 1em; ) 
 /* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )

यह एक पृष्ठ का एक छोटा सा हिस्सा है। अब इस तरह से एक बड़ी वेबसाइट बनाने की कल्पना करें - यह बहुत काम की है! लेकिन तार्किक गुण हमारे लिए लेखन मोड को ध्यान में रखकर इसे एक स्नैप बनाते हैं। उदाहरण के लिए, हम तत्व के अंत में मार्जिन जोड़ सकते हैं , जहां भी ऐसा हो:

.icon ( margin-inline-end: 1em; )

तार्किक गुणों का जिक्र करते समय इसका मतलब है - वे भौतिक दिशा के बजाय लेखन मोड के सापेक्ष हैं। देखें कि कैसे काम करने के लिए तार्किक गुण बहुत अधिक तार्किक हैं?

इनसेट तार्किक गुण

इसलिए, जो आप अब तार्किक गुणों के बारे में जानते हैं, उसे जानने के बाद, चार अतिरिक्त इनसेट उप-गुण हैं:

तार्किक संपत्ति	क्षैतिज प्रवाह समतुल्य	यह क्या करता है
inset-block-start	top	उस दिशा में शुरुआती बढ़त के लिए ऑफसेट निर्दिष्ट करता है जो लेखन दिशा के लंबवत है।
inset-block-end	bottom	लेखन दिशा के लंबवत दिशा में छोर के लिए ऑफसेट निर्दिष्ट करता है।
inset-inline-start	left	लेखन दिशा में शुरुआती बढ़त के लिए ऑफसेट को निर्दिष्ट करता है, जो तत्व के लेखन मोड, दिशा और पाठ अभिविन्यास के आधार पर एक भौतिक ऑफसेट के लिए मैप करता है।
inset-inline-end	right	लेखन दिशा में अंतिम छोर के लिए ऑफसेट निर्दिष्ट करता है।

हम उन चार उप-गुणों को दो अतिरिक्त आशुलिपि गुणों में भी समूहित कर सकते हैं:

तार्किक संपत्ति	आशुलिपि के लिए	यह क्या करता है
inset-inline	inset-inline-start inset-inline-end	दोनों को सेट करने के लिए एक एकल मान स्वीकार करता है inset-inline-startऔर inset-inline-end। दो मूल्यों को भी स्वीकार करता है, जहां पहला निर्दिष्ट करता है inset-inline-startऔर दूसरा निर्दिष्ट करता है inset-inline-end।
inset-block	inset-block-start inset-block-end	दोनों inset-block-starटी और सेट करने के लिए एक एकल मान स्वीकार करता है inset-block-end। दो मूल्यों को भी स्वीकार करता है, जहां पहला निर्दिष्ट करता है inset-block-startऔर दूसरा निर्दिष्ट करता है inset-block-end।

डेमो

वे कैसे काम करते हैं इसका एक बेहतर विचार प्राप्त करने के लिए इनसेट गुणों के लेखन-मोड और मूल्यों को बदलें:

सिर ऊपर: insetसंपत्ति तर्कसंगत नहीं है

हालाँकि insetयह लॉजिकल प्रॉपर्टीज़ और वैल्यूज़ स्पेसिफिकेशन का हिस्सा है, लेकिन यह लॉजिकल ब्लॉक या इनलाइन ऑफ़सेट्स को परिभाषित नहीं करता है। इसके बजाय, यह तत्व के लेखन मोड, दिशा और पाठ अभिविन्यास की परवाह किए बिना, भौतिक ऑफसेट को परिभाषित करता है। दूसरे शब्दों में, insetके लिए बस आशुलिपि है top, right, bottomऔर left।

GitHub पर कुछ चर्चाओं के उपयोग के बारे में यहाँ कुछ चर्चा है जो इस संपत्ति का तार्किक तरीके से भी उपयोग करने में सक्षम है।

तो, क्या हम अभी भी शारीरिक ऑफसेट का उपयोग करते हैं? कल्पना कीजिए कि आप अपने पृष्ठ के शीर्ष और बाएँ कोने पर एक बैज या लोगो तय करना चाहते हैं, और भाषा कोई भी हो, आप चाहते हैं कि यह वहीं हो। उस स्थिति में आप तार्किक ऑफसेट का उपयोग नहीं कर सकते हैं और इसके बजाय भौतिक गुणों का सहारा लेना होगा।

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

insetसंपत्ति के लिए समर्थन अभी भी अपने शुरुआती चरण में है। इस लेखन के रूप में, कैनीयूज़ वैश्विक समर्थन का अनुमान मात्र 3.79% है।

डेस्कटॉप

इंटरनेट एक्स्प्लोरर	एज	फ़ायर्फ़ॉक्स	क्रोम	सफारी	ओपेरा
नहीं न	नहीं न	66+	नहीं न	नहीं न	नहीं न

मोबाइल

iOS सफारी	ऑपेरा मिनी	Android ब्राउज़र	क्रोम Android	फ़ायरफ़ॉक्स Android
नहीं न	नहीं न	६ 68	नहीं न	नहीं न

अधिक जानकारी

• सीएसएस तार्किक गुण और मूल्य स्तर 1 (विशिष्टता, संपादक का मसौदा)
• लॉजिकल प्रॉपर्टीज़ एंड वैल्यूज़ (स्मैशिंग मैगज़ीन) को समझना
• सीएसएस तार्किक गुण (सीएसएस-ट्रिक्स)