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

सेंटरिंग की 5 तकनीकों को अपनाएं, ताकि वे अलग-अलग जांच से गुज़र सकें. इससे आपको पता चलेगा कि किस मॉडल में बदलाव करने का सबसे बेहतर तरीका है.

एडम आर्गील

सीएसएस में फ़ोकस करना एक बड़ी चुनौती है, जो चुटकुलों और मज़ाक़ से भरी होती है. 2020 सीएसएस 2020 में बड़ी हो गई है और अब हम उन चुटकुलों पर ईमानदारी से हंस सकते हैं.

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

चुनौती

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

द रेज़िलिएंस रिंगर

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

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

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

लेजेंड

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

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

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

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

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. ऑटोबॉट

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. पॉप एंड प्लेप

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

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

मोडल, टोस्ट और मैसेज, स्टैक और डेप्थ इफ़ेक्ट, पॉपओवर के लिए शानदार.

विजेता

अगर मैं किसी द्वीप पर होता, तो केंद्र में सिर्फ़ एक तकनीक की ज़रूरत होती, तो वह...

[ड्रम रोल]

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

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

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

एमवीपी

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

.fluffy-center {
  padding: 2ch;
}

Fluffy Center इतना माइक्रो है कि इसे सेंटरिंग तकनीक के रूप में देखना आसान है, लेकिन यह मेरी सेंटरिंग रणनीतियों का अहम हिस्सा है. यह इतना परमाणु होता है कि कभी-कभी मैं इसे इस्तेमाल करने में भूल जाता हूं.

नतीजा

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

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

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

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