सीएसएस में फ़ोकस करना

सेंटरिंग की पांच तकनीकों का इस्तेमाल करें. इन तकनीकों को कई टेस्ट के ज़रिए देखा जाता है, ताकि यह पता लगाया जा सके कि इनमें से कौनसी तकनीक बदलावों के हिसाब से सबसे ज़्यादा बेहतर है.

Adam Argyle

सीएसएस में कॉन्टेंट को बीच में रखना एक मुश्किल काम है. इस बारे में कई चुटकुले और मज़ाक़ किए जाते हैं. 2020 में, सीएसएस काफ़ी बेहतर हो गई है. अब हम उन चुटकुलों पर दिल खोलकर हंस सकते हैं, न कि दांत दबाकर.

अगर आपको वीडियो देखना पसंद है, तो यहां इस पोस्ट का YouTube वर्शन दिया गया है:

चुनौती

केंद्रित करने के अलग-अलग तरीके होते हैं. अलग-अलग इस्तेमाल के उदाहरणों, केंद्र में रखने के लिए चीज़ों की संख्या वगैरह से. "बेहतरीन" सेंटरिंग तकनीक के पीछे के लॉजिक को दिखाने के लिए, मैंने Resilience Ringer बनाया. यह सेंटरिंग की हर रणनीति के लिए, स्ट्रेस टेस्ट की एक सीरीज़ है. इससे आपको रणनीति की परफ़ॉर्मेंस को देखने में मदद मिलती है. आखिर में, मैंने सबसे ज़्यादा स्कोर करने वाली तकनीक के साथ-साथ "सबसे अहम" तकनीक के बारे में भी बताया. हमें उम्मीद है कि आपको वीडियो को सेंटर करने की नई तकनीकें और समाधान मिलेंगे.

The Resilience Ringer

'रिज़ाइलिएंस रिंगर', मेरे इस विश्वास को दिखाता है कि केंद्रित करने की रणनीति, अंतरराष्ट्रीय लेआउट, अलग-अलग साइज़ के व्यूपोर्ट, टेक्स्ट में किए गए बदलावों, और डाइनैमिक कॉन्टेंट के हिसाब से होनी चाहिए. इन सिद्धांतों की मदद से, हमने नीचे दिए गए रिसीलियंस टेस्ट को तैयार किया है, ताकि फ़ोकस करने की तकनीकों को बेहतर बनाया जा सके:

1. छोटा किया गया: सेंटर करने की सुविधा, चौड़ाई में हुए बदलावों को मैनेज कर सकती है
2. स्क्वैश किया गया: केंद्रित करने की सुविधा, ऊंचाई में हुए बदलावों को मैनेज कर सकती है
3. डुप्लीकेट: आइटम की संख्या के हिसाब से, केंद्र में रखना डाइनैमिक होना चाहिए
4. बदलाव: कॉन्टेंट की लंबाई और भाषा के हिसाब से, टेक्स्ट को बीच में अलाइन करना चाहिए
5. फ़्लो: कॉन्टेंट को दस्तावेज़ की दिशा और लिखने के मोड के हिसाब से सेंटर किया जाना चाहिए

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

Legend

हमने कुछ विज़ुअल कलर के सुझाव दिए हैं, ताकि आपको कुछ मेटा जानकारी को संदर्भ में रखने में मदद मिल सके:

• पिंक बॉर्डर से पता चलता है कि सेंटरिंग स्टाइल का मालिकाना हक किसके पास है
• स्लेटी रंग का बॉक्स, कंटेनर का बैकग्राउंड होता है. इसमें आइटम को बीच में रखा जाता है
• हर चाइल्ड का बैकग्राउंड सफ़ेद होता है, ताकि आपको यह पता चल सके कि चाइल्ड बॉक्स के साइज़ पर, केंद्रित करने की तकनीक का कोई असर पड़ा है या नहीं

पांच प्रतियोगी

पांच सेंटरिंग तकनीक, 'डियर ऐनिमेशन क्रिएटर' प्रतियोगिता में शामिल हुई हैं. इनमें से सिर्फ़ एक को 'डियर ऐनिमेशन क्रिएटर' का मुकुट 👸 मिलेगा.

1. कॉन्टेंट सेंटर

1. Squish: बढ़िया!
2. स्क्वॉश: बढ़िया!
3. डुप्लीकेट: बढ़िया!
4. बदलाव करें: बढ़िया!
5. फ़्लो: बहुत बढ़िया!

display: grid और place-content की कम शब्दों में दी गई जानकारी से आगे बढ़कर काम करना काफ़ी मुश्किल होगा. यह बच्चों को एक साथ बीच में और सही जगह पर दिखाता है. इसलिए, यह पढ़ने के लिए बने एलिमेंट के ग्रुप को बीच में दिखाने का बेहतरीन तरीका है.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

यह ऐसे मैक्रो लेआउट के लिए बेहतरीन है जिनमें पैराग्राफ़ और हेडलाइन, प्रोटोटाइप या आम तौर पर ऐसी चीज़ें शामिल हों जिनके बीच में पैराग्राफ़ और हेडलाइन हो.

2. जेंटल फ़्लेक्स

1. Squish: बढ़िया!
2. स्क्वॉश: बहुत बढ़िया!
3. डुप्लीकेट: बढ़िया!
4. बदलाव करें: बढ़िया!
5. फ़्लो: बढ़िया!

Gentle Flex, सिर्फ़ ध्यान खींचने वाली एक सच्ची रणनीति है. यह सॉफ़्ट और आसान है, क्योंकि place-content: center के उलट, केंद्रित करने के दौरान बच्चों के बॉक्स के साइज़ में कोई बदलाव नहीं होता. सभी आइटम को धीरे से स्टैक किया जाता है, बीच में रखा जाता है, और उनके बीच स्पेस दिया जाता है.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

यह मैक्रो और माइक्रो लेआउट, दोनों के लिए बेहतरीन है.

3. Autobot

1. Squish: बढ़िया
2. स्क्वॉश: बहुत बढ़िया
3. डुप्लीकेट: ठीक है
4. बदलाव: बढ़िया
5. फ़्लो: बढ़िया

कंटेनर को बिना अलाइनमेंट स्टाइल के फ़्लेक्स पर सेट किया गया है, जबकि डायरेक्ट चाइल्ड को ऑटो मार्जिन के साथ स्टाइल किया गया है. इस एलिमेंट के हर हिस्से पर काम करने से जुड़ी margin: auto की खासियत है. इससे यह याद करने वाला और खूबसूरत बात है.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

आइकॉन या स्यूडो-एलिमेंट को बीच में रखने के लिए बेहतरीन.

4. फ़्लफ़ी सेंटर

1. Squish: खराब
2. स्क्वॉश: खराब
3. डुप्लीकेट: खराब
4. बदलाव: बढ़िया!
5. फ़्लो: बढ़िया! (जब तक लॉजिकल प्रॉपर्टी का इस्तेमाल किया जा रहा हो)

"फ़्लफ़ी सेंटर" नाम का कॉन्टेंट, अब तक का सबसे अच्छा कॉन्टेंट है. यह कॉन्टेंट, एलिमेंट/चाइल्ड के लिए उपलब्ध एक ऐसी सेंटरिंग टेक्नोलॉजी है जो पूरी तरह से एलिमेंट/चाइल्ड के मालिकाना हक वाली है. हमारा अकेले आंतरिक गुलाबी बॉर्डर देखें!?

.fluffy-center {
  padding: 10ch;
}

यह इनके लिए बेहतर है: शब्द या वाक्यांश के हिसाब से केंद्र में रखना, टैग, पिल, बटन, चिप वगैरह.

5. Pop & Plop

1. Squish: ठीक है
2. स्क्वॉश: ठीक है
3. डुप्लीकेट: खराब
4. बदलाव करें: ठीक
5. फ़्लो: ठीक है

यह "पॉप" इसलिए होता है, क्योंकि एब्सोलूट पोज़िशनिंग, एलिमेंट को सामान्य फ़्लो से बाहर पॉप करती है. नाम का "प्लॉप" वाला हिस्सा तब से आता है, जब मुझे यह सबसे काम का लगता है: उसे दूसरी चीज़ों के ऊपर रखना. यह ओवरले को बीच में रखने की एक क्लासिक और आसान टेक्नोलॉजी है. यह कॉन्टेंट के साइज़ के हिसाब से, डाइनैमिक और फ़्लेक्सिबल होती है. कभी-कभी, आपको किसी एक यूज़र इंटरफ़ेस (यूआई) को दूसरे यूआई के ऊपर प्लॉप करने की ज़रूरत पड़ती है.

यह मोडल, टॉस्ट, मैसेज, स्टैक, और डीप इफ़ेक्ट के साथ-साथ पॉपओवर के लिए बेहतर है.

विजेता

अगर मैं किसी टापू पर होता और मेरे पास सिर्फ़ एक सेंटरिंग तकनीक होती, तो वह यह होती…

[ड्रम रोल]

जेंटल फ़्लेक्स 🎉

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

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

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

फ़्लफ़ी सेंटर इतना छोटा है कि इसे फ़ोकस करने की तकनीक के तौर पर आसानी से अनदेखा किया जा सकता है. हालांकि, यह फ़ोकस करने की मेरी रणनीतियों का मुख्य हिस्सा है. यह इतना आसान है कि कभी-कभी मुझे याद नहीं रहता कि इसका इस्तेमाल किया जा रहा है.

नतीजा

किन चीज़ों की वजह से, कॉन्टेंट को बीच में दिखाने की रणनीतियां काम नहीं करतीं? रेज़िलिएंस रिंगर में और किन चैलेंज को शामिल किया जा सकता है? मैंने अनुवाद और कंटेनर पर अपने-आप ऊंचाई बदलने की सुविधा को शामिल किया है… और क्या-क्या!?

अब आपको पता है कि मैंने इसे कैसे किया, तो आप इसे कैसे करेंगे?! आइए, अलग-अलग तरह के काम करते हैं और वेब पर काम करने के सभी तरीके सीखते हैं. इस पोस्ट में दिए गए उदाहरणों की तरह, अपने हिसाब से केंद्र में दिखाने का उदाहरण बनाने के लिए, इस पोस्ट के साथ दिए गए कोडलैब का पालन करें. अपना वर्शन मुझसे ट्वीट करें. हम इसे यहां दिए गए कम्यूनिटी रीमिक्स सेक्शन में जोड़ देंगे.

कम्यूनिटी रीमिक्स

• ब्लॉग पोस्ट में सीएसएस की ट्रिक