लिस्ट मार्कर के बाद गैप के बारे में वह सब कुछ जो आपको जानना चाहिए

मैं पढ़ रहा था "रचनात्मक सूची स्टाइलिंग" Google के web.dev ब्लॉग पर और कोड उदाहरणों में से एक में कुछ अजीब देखा ::marker लेख का खंड। अंतर्निहित सूची मार्कर बुलेट, क्रम संख्या और अक्षर हैं। ::marker छद्म-तत्व हमें इन मार्करों को शैलीबद्ध करने या उन्हें एक कस्टम वर्ण या छवि के साथ बदलने की अनुमति देता है।

::marker { content: url('/marker.svg') ' ';
}

जिस उदाहरण ने मेरा ध्यान आकर्षित किया वह सूची आइटम के लिए एक कस्टम मार्कर के रूप में एसवीजी आइकन का उपयोग करता है। लेकिन एक सिंगल स्पेस कैरेक्टर भी है (" ") के आगे CSS मान में url() समारोह। ऐसा लगता है कि इस जगह का उद्देश्य कस्टम मार्कर के बाद एक अंतर डालना प्रतीत होता है।

जब मैंने यह कोड देखा, तो मुझे तुरंत आश्चर्य हुआ कि क्या अंतर बनाने का कोई बेहतर तरीका है। के लिए एक स्थान जोड़ना content इष्टतम समाधान की तुलना में वर्कअराउंड की तरह अधिक लगता है। सीएसएस प्रदान करता है margin और padding और पृष्ठ पर तत्वों को अलग करने के अन्य मानक तरीके। क्या इन गुणों में से कोई भी इस स्थिति में उपयोग नहीं किया जा सकता है?

सबसे पहले, मैंने स्पेस कैरेक्टर को उचित मार्जिन से बदलने की कोशिश की:

::marker { content: url('/marker.svg'); margin-right: 1ch;
}

यह काम नहीं किया। जैसे की वो पता चला, ::marker केवल a . का समर्थन करता है ज्यादातर टेक्स्ट-संबंधित CSS गुणों का छोटा सेट. उदाहरण के लिए, आप बदल सकते हैं font-size और color मार्कर की, और सेटिंग द्वारा एक कस्टम मार्कर परिभाषित करें content जैसा कि ऊपर दिखाया गया है, एक स्ट्रिंग या यूआरएल के लिए। लेकिन margin और padding गुण हैं समर्थित नहीं, इसलिए उन्हें सेट करने से कोई प्रभाव नहीं पड़ता है। बेहद दुःख की बात।

क्या यह वास्तव में हो सकता है कि कस्टम मार्कर के बाद अंतर डालने का एकमात्र तरीका स्पेस कैरेक्टर है? मुझे पता लगाने की जरूरत थी। जैसा कि मैंने इस विषय पर शोध किया, मैंने कुछ दिलचस्प खोजें कीं जिन्हें मैं इस लेख में साझा करना चाहता हूं।

पैडिंग और मार्जिन जोड़ना

पहले, आइए पुष्टि करें कि क्या है margin और padding पर करें <ul> और <li> तत्व। मैंने इस उद्देश्य के लिए एक परीक्षण पृष्ठ बनाया है। प्रासंगिक स्लाइडर्स को खींचें और सूची मार्कर के प्रत्येक तरफ रिक्ति पर प्रभाव का निरीक्षण करें। युक्ति: सभी नियंत्रणों को उनके आरंभिक मानों पर रीसेट करने के लिए उदारतापूर्वक रीसेट बटन का उपयोग करें।

नोट: ब्राउज़र एक डिफ़ॉल्ट लागू करते हैं padding-inline-left of 40px सेवा मेरे <ol> और <ul> तत्व। तार्किक padding-inline-left संपत्ति भौतिक के बराबर है padding-left बाएं से दाएं इनलाइन दिशा के साथ राइटिंग सिस्टम में संपत्ति। इस लेख में, मैं सरलता के लिए भौतिक गुणों का उपयोग करने जा रहा हूँ।

जैसा कि आप देख सकते हैं, padding-left on <li> सूची मार्कर के बाद अंतर बढ़ाता है। अन्य तीन गुण मार्कर के बाईं ओर रिक्ति को नियंत्रित करते हैं, दूसरे शब्दों में, सूची आइटम का इंडेंटेशन।

ध्यान दें कि सूची आइटम के होने पर भी padding-left is 0px, मार्कर के बाद अभी भी एक न्यूनतम अंतर है। से इस अंतर को कम नहीं किया जा सकता है margin or padding. न्यूनतम अंतर की सटीक लंबाई ब्राउज़र पर निर्भर करती है।

संक्षेप में, सूची आइटम की सामग्री मार्कर से ब्राउज़र-विशिष्ट न्यूनतम दूरी पर स्थित है, और इस अंतर को एक जोड़कर और बढ़ाया जा सकता है padding-left सेवा मेरे <li>.

अगला, आइए देखें कि जब हम मार्कर को स्थापित करते हैं तो क्या होता है अंदर सूची आइटम।

मार्कर को सूची आइटम के अंदर ले जाना

RSI list-style-position संपत्ति दो कीवर्ड स्वीकार करती है: outside, जो डिफ़ॉल्ट है, और inside, जो मार्कर को सूची आइटम के अंदर ले जाता है। उत्तरार्द्ध पूर्ण-चौड़ाई वाली सूची आइटम के साथ डिज़ाइन बनाने के लिए उपयोगी है।

यदि मार्कर अब है अंदर सूची आइटम, क्या इसका मतलब यह है padding-left on <li> अब मार्कर के बाद गैप नहीं बढ़ता है? चलो पता करते हैं। मेरे परीक्षण पृष्ठ पर, चालू करें list-style-position: inside चेकबॉक्स के माध्यम से। चार कैसे हैं padding और margin इस परिवर्तन से प्रभावित गुण?

जैसा कि आप देख सकते हैं, padding-left on <li> अब रिक्ति को बढ़ा देता है बाएं मार्कर का। इसका मतलब है कि हमने मार्कर के बाद गैप बढ़ाने की क्षमता खो दी है। इस स्थिति में, जोड़ने में सक्षम होना उपयोगी होगा margin-right को ::marker लेकिन यह काम नहीं करता, जैसा कि हमने ऊपर स्थापित किया है।

इसके अतिरिक्त, वहाँ एक है क्रोमियम में बग जो मार्कर के बाद गैप का कारण बनता है ट्रिपल पर स्विच करने के बाद inside स्थिति। डिफ़ॉल्ट रूप से, अंतराल की लंबाई पाठ के आकार का लगभग एक-तिहाई है। तो एक डिफ़ॉल्ट पर font-size of 16px, अंतराल के बारे में है 5.5px. पर स्विच करने के बाद inside, अंतर पूरी तरह से बढ़ता है 16px क्रोम में। यह बग प्रभावित करता है disc, circle, तथा square मार्कर, लेकिन क्रमिक संख्या मार्कर नहीं.

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

योग करने के लिए, पर स्विच करना list-style-position: inside दो समस्याओं का परिचय देता है। हम अब अंतर को और नहीं बढ़ा सकते हैं padding-left on <li>, और अंतराल का आकार ब्राउज़रों के बीच असंगत है।

अंत में, देखते हैं कि जब हम डिफ़ॉल्ट सूची मार्कर को कस्टम मार्कर से बदलते हैं तो क्या होता है।

एक कस्टम मार्कर पर स्विच करना

ए को परिभाषित करने के दो तरीके हैं कस्टम मार्कर:

• list-style-type और list-style-image गुण
• content पर संपत्ति ::marker छद्म तत्व

RSI content संपत्ति अधिक शक्तिशाली है। उदाहरण के लिए, यह हमें उपयोग करने की अनुमति देता है counter() सूची आइटम की क्रम संख्या तक पहुँचने के लिए कार्य (the अंतर्निहित list-item का मुकाबला) और इसे कस्टम स्ट्रिंग्स से सजाएँ।

दुर्भाग्य से, सफारी का समर्थन नहीं करता content संपत्ति पर ::marker अभी तक (वेबकिट बग). इस कारण से, मैं इसका उपयोग करने जा रहा हूँ list-style-type संपत्ति कस्टम मार्कर को परिभाषित करने के लिए। आप अभी भी उपयोग कर सकते हैं ::marker के माध्यम से घोषित कस्टम मार्कर को स्टाइल करने के लिए चयनकर्ता list-style-type. का वह पहलू ::marker सफारी में समर्थित है।

कोई भी यूनिकोड चरित्र संभावित रूप से एक कस्टम सूची मार्कर के रूप में काम कर सकता है, लेकिन वर्णों के केवल एक छोटे से सेट में वास्तव में उनके आधिकारिक नाम में "बुलेट" होता है, इसलिए मैंने सोचा कि मैं उन्हें संदर्भ के लिए यहां संकलित करूंगा।

चरित्र	नाम	कोड बिंदु	सीएसएस कीवर्ड
•	गोली	U+2022	disc
‣	त्रिकोणीय गोली	U+2023
⁃	हाइफ़न बुलेट	U+2043
⁌	ब्लैक लेफ्टवर्ड बुलेट	U+204C
⁍	ब्लैक राइटवर्ड बुलेट	U+204D
◘	उलटी गोली	U+25D8
◦	सफेद गोली	U+25E6	circle
☙	रिवर्स रोटेटेड फ्लोरल हार्ट बुलेट	U+2619
❥	घूमा हुआ भारी ब्लैक हार्ट बुलेट	U+2765
❧	रोटेट फ्लोरल हार्ट बुलेट	U+2767
⦾	गोलाकार सफेद गोली	U+29BE
⦿	गोलाकार गोली	U+29BF

नोट: सीएसएस square कीवर्ड में यूनिकोड में संबंधित "बुलेट" वर्ण नहीं होता है। जो पात्र सबसे करीब आता है वह है काला छोटा वर्ग (▪️) इमोजी (U+25AA).

अब देखते हैं कि जब हम डिफॉल्ट लिस्ट मार्कर को इससे बदलते हैं तो क्या होता है list-style-type: "•" (U+2022 गोली)। यह डिफ़ॉल्ट बुलेट के समान वर्ण है, इसलिए कोई बड़ा रेंडरिंग अंतर नहीं होना चाहिए। मेरे परीक्षण पृष्ठ पर, चालू करें list-style-type विकल्प चुनें और मार्कर में कोई भी परिवर्तन देखें।

जैसा कि आप देख सकते हैं, दो महत्वपूर्ण परिवर्तन हैं:

1. मार्कर के बाद अब न्यूनतम अंतराल नहीं है।
2. गोली छोटी हो गई है, मानो इसे छोटे पर प्रदान किया गया हो font-size.

के अनुसार सीएसएस काउंटर शैलियाँ स्तर 3, डिफ़ॉल्ट सूची मार्कर (disc) "के समान होना चाहिए • U+2022 गोली"। ऐसा लगता है कि ब्राउज़र डिफ़ॉल्ट बुलेट के आकार को और अधिक सुपाठ्य बनाने के लिए बढ़ाते हैं। फ़ायरफ़ॉक्स भी एक विशेष फ़ॉन्ट का उपयोग करता है, -moz-bullet-font, मार्कर के लिए।

क्या छोटे आकार की समस्या को CSS से ठीक किया जा सकता है? मेरे परीक्षण पृष्ठ पर, मार्कर स्टाइल चालू करें और देखें कि जब आप इसे बदलते हैं तो क्या होता है font-size, line-height, तथा font-family मार्कर का।

जैसा कि आप देख सकते हैं, बढ़ रहा है font-size कस्टम मार्कर को लंबवत रूप से गलत संरेखित करने का कारण बनता है, और इसे कम करके ठीक नहीं किया जा सकता है line-height। vertical-align संपत्ति, जो इस समस्या को आसानी से ठीक कर सकती है, पर समर्थित नहीं है ::marker.

लेकिन क्या आपने देखा है कि बदलते हुए font-family क्या मार्कर बड़ा हो सकता है? इसे सेट करने का प्रयास करें Tahoma. यह संभावित रूप से छोटे आकार की समस्या के लिए एक अच्छा पर्याप्त समाधान हो सकता है, हालांकि मैंने यह परीक्षण नहीं किया है कि प्रमुख ब्राउज़रों और ऑपरेटिंग सिस्टम में कौन सा फ़ॉन्ट सबसे अच्छा काम करता है।

आपने यह भी देखा होगा कि जब आप मार्कर को सूची आइटम के अंदर रखते हैं तो क्रोमियम बग नहीं होता है। इसका अर्थ है कि एक कस्टम मार्कर इस बग के समाधान के रूप में काम कर सकता है। और यह मुझे मुख्य समस्या की ओर ले जाता है, और यही कारण है कि मैंने इस विषय पर शोध करना शुरू किया। यदि आप एक कस्टम मार्कर को परिभाषित करते हैं और इसे सूची आइटम के अंदर रखते हैं, तो मार्कर के बाद कोई अंतर नहीं होता है और मानक तरीकों से अंतराल डालने का कोई तरीका नहीं होता है।

1. कस्टम मार्कर के बाद कोई न्यूनतम अंतर नहीं है।
2. ::marker समर्थन नहीं करता है padding or margin.
3. padding-left on <li> मार्कर की स्थिति के बाद से अंतर में वृद्धि नहीं होती है inside.

सारांश

यहाँ उन सभी प्रमुख तथ्यों का सारांश दिया गया है जिनका मैंने लेख में उल्लेख किया है:

1. ब्राउज़र एक डिफ़ॉल्ट लागू करते हैं padding-inline-start of 40px सेवा मेरे <ul> और <ol> तत्वों।
2. बिल्ट-इन लिस्ट मार्कर के बाद एक न्यूनतम अंतर है (disc, decimal, वगैरह।)। कस्टम मार्कर (स्ट्रिंग या यूआरएल) के बाद कोई न्यूनतम अंतर नहीं है।
3. एक जोड़कर अंतराल की लंबाई बढ़ाई जा सकती है padding-left सेवा मेरे <ul>, लेकिन केवल तभी जब मार्कर सूची आइटम (डिफ़ॉल्ट मोड) के बाहर स्थित हो।
4. कस्टम स्ट्रिंग मार्करों का डिफ़ॉल्ट आकार अंतर्निर्मित मार्करों की तुलना में छोटा होता है। बदल रहा है font-family on ::marker अपना आकार बढ़ा सकते हैं।

निष्कर्ष

लेख की शुरुआत से कोड उदाहरण को देखते हुए, मुझे लगता है कि अब मैं समझता हूं कि इसमें एक स्पेस कैरेक्टर क्यों है content कीमत। एसवीजी मार्कर के बाद गैप डालने का कोई बेहतर तरीका नहीं है। यह एक ऐसा समाधान है जिसकी आवश्यकता है क्योंकि कोई राशि नहीं है margin और padding सूची आइटम के अंदर स्थित कस्टम मार्कर के बाद एक अंतर बना सकता है। ए margin-right on ::marker आसानी से कर सकता है, लेकिन वह समर्थित नहीं है।

जब तक ::marker अधिक गुणों के लिए समर्थन जोड़ता है, वेब डेवलपर्स के पास अक्सर मार्कर को छिपाने और उसका अनुकरण करने के अलावा कोई विकल्प नहीं होता है ::before छद्म तत्व। मुझे हाल ही में ऐसा करना पड़ा क्योंकि मैं मार्कर को नहीं बदल सका background-color. उम्मीद है, हमें अधिक शक्तिशाली के लिए बहुत लंबा इंतजार नहीं करना पड़ेगा ::marker छद्म तत्व।

• एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
• प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
• स्रोत: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/