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

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

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. फ़्लो: ठीक है

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

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

विजेता

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

[ड्रम रोल]

Gentle Flex 🎉

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

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

एमवीपी

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

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

नतीजा

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

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

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

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