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

सेंटरिंग की 5 तकनीकों का इस्तेमाल करें. इन तकनीकों को टेस्ट करके यह जाना जा सकता है कि किस तकनीक को बदलने की काबिलीयत को कम किया जा सकता है.

Adam Argyle

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

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

चुनौती

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

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

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

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

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

Legend

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

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

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

रिज़िलियेंस रिंगर में सेंटरिंग करने वाली 5 तकनीकें शामिल की जाती हैं, सिर्फ़ एक को ही रिज़िलियेंस क्राउन 🧧.

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

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

display: grid की कमियों और place-content शॉर्टहैंड. यह बच्चों को सामूहिक तौर पर शिक्षा देता है और उनकी उम्र तय करता है. यह पढ़े जाने वाले एलिमेंट के ग्रुप को बीच में लाने वाली एक ठोस तकनीक है.

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

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

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

1. स्क्विश: बढ़िया!
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. स्क्विश: बहुत बढ़िया
2. स्क्वॉश: शानदार
3. डुप्लीकेट: ठीक है
4. बदलाव करें: बहुत बढ़िया
5. फ़्लो: शानदार

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

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

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

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

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

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

.fluffy-center {
  padding: 10ch;
}

शब्द या वाक्यांश पर आधारित सेंटरिंग, टैग, पिल, बटन, चिप वगैरह के लिए यह बेहतरीन है वगैरह को कॉपी करने का विकल्प है.

5. पॉप और प्लॉट

1. स्क्विश: ठीक है
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 इतना छोटा है कि इसे सेंटरिंग तकनीक के रूप में देखना आसान है, लेकिन यह मेरी रणनीतियों का अहम हिस्सा है. यह इतनी ऐटमिक है कि कभी-कभी भूल जाओ, मैं इसका इस्तेमाल कर रहा हूं.

नतीजा

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

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

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

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