👨🏽‍🔬 📼 🏮 ट्विटर डिजाइन में दिलचस्प सीएसएस ढूँढता है ⛸️ 🏣 😚

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

उपयोगकर्ता अवतार पहलू पहलू

मैंने प्रोफ़ाइल पृष्ठ पर उपयोगकर्ता अवतार का एक दिलचस्प कार्यान्वयन देखा। यह कार्यान्वयन किसी तत्व के पहलू अनुपात को संरक्षित करने के लिए CSS तकनीक का उपयोग करता है।

प्रोफ़ाइल पृष्ठ पर उपयोगकर्ता अवतार

निम्नलिखित HTML और CSS कोड अवतार के कार्यान्वयन को दिखाता है।

<a href="#" class="avatar">
    <div class="avatar-aspect-ratio"></div>
    <img alt="" src="me.jpg">
</a>
.avatar {
  position: relative;
  width: 25%;
  display: block;
}

.avatar-aspect-ratio {
  width: 100%;
  padding-bottom: 100%;
}

.avatar img {
  position: absolute;
  top: 0; 
  right: 0; 
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

किसी तत्व के पहलू अनुपात को संरक्षित करने की तकनीक इस तथ्य के कारण काम करती है कि जब किसी तत्व का ऊर्ध्वाधर इंडेंट (संपत्ति padding-bottomया padding-top) होता है, तो इंडेंटेशन तत्व की चौड़ाई पर निर्भर करता है। निम्नलिखित उदाहरण पर एक नज़र डालें:

.element {
    width: 250px;
    padding-bottom: 100%;
}

परिकलित मान padding-bottomसमान है 250px। इसका मतलब है कि हमारे पास एक आदर्श वर्ग है। ट्विटर टीम ने एक ही तकनीक का उपयोग किया, लेकिन एक तत्व पर लागू किया गया <img>, जो मूल तत्व के संबंध में है, बिल्कुल तैनात है। क्यों? यहीं कारण है।

अवतार के साथ कुछ गड़बड़ है।

जब छवि बिल्कुल स्थिति में नहीं है, तो अवतार पिछले आंकड़े में दिखाए गए की तरह दिखाई देगा। छवि को100%चौड़ाई और ऊंचाई के लिएएक मूल्य का उपयोग करके तैनात किया जाना चाहिए। इस दृष्टिकोण के साथ, इसका आकार रैपर तत्व के आकार के अनुसार सेट किया जाएगा।

अब जब हमने इस समाधान के पीछे के विचार का पता लगा लिया है, तो आइए ट्विटर पर इस विचार को कैसे लागू किया जाता है।

संपत्तिwidth: 25%आवरण तत्व की चौड़ाई पर आधारित है। मेरी स्क्रीन पर यह है -600px। मुझे आश्चर्य हुआ कि ऐसी तकनीक को क्यों चुना गया। सीएसएस कोड के बारे में अधिक जानने के बाद, मैंने देखा कि उसी घटक का उपयोग एडिट प्रोफाइल मोडल विंडो में किया जाता है। यह सच है, निम्नलिखित शैली के उपयोग के कारण यहाँ तत्व छोटा है:

.avatar {
    max-width: 8rem; /* 112px  150px (25%) */
}

मुझे केवल संपत्ति को प्रभावित करके छवियों को प्रबंधित करने का विचार पसंद है width। यहाँ इस विचार को दर्शाने वाला एक वीडियो है।

छवि चौड़ाई नियंत्रण

यहां आप इस अनुभाग के लिए एक डेमो प्रोजेक्ट पा सकते हैं।

प्रतिशत ऊपरी इंडेंट

प्रोफ़ाइल पृष्ठ के शीर्ष पर स्थित फ़ोटो को ओवरलैप करने के लिए उपयोगकर्ता के अवतार के लिए, प्रतिशत में निर्दिष्ट एक नकारात्मक बाहरी इंडेंट है:

.avatar {
    margin-top: -18%;
}

सच है, एडिट प्रोफाइल मोडल विंडो में, ऊपरी इंडेंटेशन को समायोजित करने के लिए डिज़ाइन का उपयोग पहले से ही किया जाता है margin-top: -3rem। ध्यान दें कि मोडल विंडो में इंडेंटेशन इकाइयों का उपयोग करके सेट किया गया है rem। संपत्ति सेट करने के लिए समान इकाइयों का उपयोग किया जाता है max-width।

कैल्क () CSS फ़ंक्शन का अजीब उपयोग

मैंने देखा कि कुछ बटन को स्टाइल करने के लिए निम्न CSS का उपयोग किया जाता है:

.button {
    min-width: calc(45.08px)
}

फ़ंक्शंस एक calc()ही मान क्यों देते हैं ? मैं बात नहीं देखता। शायद वे 45.08 की संख्या को गोल करना चाहते थे? लेकिन इस दृष्टिकोण के साथ, यह 45 तक गोल नहीं है। बटन की चौड़ाई बहुत छोटी है। बटन, जब अरबी जैसे आरटीएल भाषा में आवेदन का अनुवाद करता है, तो यह बहुत छोटा होगा।

एक बटन जो बहुत छोटा है

फ़ंक्शनcalc()इनलाइन CSS में दिखाई देता है। इसलिए, मेरा मानना है कि यह रिएक्ट का उपयोग करके बटन की गतिशील स्टाइलिंग का परिणाम है।

सीएसएस पृष्ठभूमि और HTML छवियों को मिलाएं

साइट पर कई स्थानों पर, मुझे सीएसएस और HTML छवियों द्वारा परिभाषित पृष्ठभूमि छवियों का मिश्रण मिला। निम्नलिखित उदाहरण पर एक नज़र डालें:

<div style="background-image: url(me.jpg);"></div>
<img alt="" src="me.jpg">

मैंने इसे उपयोगकर्ता प्रोफ़ाइल में, और ग्रिड लेआउट के निर्माण में उपयोग किए जाने वाले घटक में देखा। दिलचस्प है, opacityतत्व संपत्ति के लिए <img>निर्धारित है 0। सक्रिय छवि का स्रोत एक संपत्ति है background-image। इसके अलावा, यहां एक संपत्ति का उपयोग किया जाता है background-size: coverजो छवि विरूपण से बचा जाता है।

मैंने विपरीत करने की कोशिश की, अर्थात्, तत्व प्रदर्शित करने <img>और सीएसएस पृष्ठभूमि को छिपाने के लिए, और ग्रिड लेआउट की तुलना की। इस तुलना के परिणाम नीचे दिखाए गए हैं।

बाईं ओर वह विकल्प है जिसमें पृष्ठभूमि छवि का उपयोग किया गया है, और दाईं ओर वह विकल्प है जिसमें HTML छवि का उपयोग किया गया है।

जाहिर है, दाईं ओर की छवि विकृत है! मुझे पता नहीं है किobject-fit: coverविकृति को रोकने केलिए विकास टीम ने सीएसएस संपत्तिकाउपयोग क्यों नहीं किया। और मैं जानना चाहूंगा कि यहां दो छवियों का उपयोग क्यों किया जाता है।

शैलियाँ रीसेट करें

मैंने एक पैटर्न पर ध्यान दिया, जो सीएसएस वर्ग का निरंतर उपयोग है जो तत्वों में जोड़ा जाता है <div>। यहाँ प्रासंगिक सीएसएस है:

.css-1dbjc4n {
    align-items: stretch;
    border: 0 solid black;
    box-sizing: border-box;
    display: flex;
    flex-basis: auto;
    flex-direction: column;
    flex-shrink: 0;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    min-height: 0px;
    min-width: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    position: relative;
    z-index: 0;
}

यह शैली <div>पृष्ठ पर प्रत्येक तत्व पर शाब्दिक रूप से लागू होती है । क्यों? यहाँ सीएसएस शैलियों को रीसेट करना पर्याप्त नहीं है?

ऊपर वर्णित शैलियों में से कुछ मेरे लिए काफी समझ में आते हैं, जैसे कि min-width: 0, फ्लेक्सबॉक्स के साथ कुछ संबंध है। लेकिन इंडेंटेशन, इंडेंटेशन, बॉर्डर का क्या? एक तत्व <div>को शैलियों को रीसेट करने की आवश्यकता क्यों है , इस तथ्य को देखते हुए कि इस तत्व में उपयुक्त गुण नहीं हैं?

फ्लेक्सबॉक्स और न्यूनतम चौड़ाई: 0

संपत्ति min-widthका डिफ़ॉल्ट मूल्य है auto, जो शून्य हो जाता है। जब किसी चीज को एक फ्लेक्स तत्व के रूप में प्रदर्शित किया जाता है, तो उसकी संपत्ति min-widthका मूल्य उसकी सामग्री के आकार के बराबर होता है। इस व्यवहार की अनुमति देने से लेआउट का उल्लंघन हो सकता है यदि तत्व की सामग्री इससे बड़ी है।

इस समस्या से बचने के लिए, आपको min-widthफ्लेक्स-एलिमेंट्स के वंशजों के लिए प्रॉपर्टी को रीसेट करना होगा ।

फ्लेक्स आइटम और फ्लेक्सबॉक्स आवरण

ऊपर दिखाए गए लेआउट से पता चलता है कि फ्लेक्स आइटम की सामग्री बहुत लंबी होने पर क्या हो सकता है। ध्यान दें कि पाठ आवरण तत्व की सीमा से परे चला जाता है। लेकिन संपत्ति का उपयोग करते समय क्या होता हैmin-width: 0।

सामग्री फ्लेक्स तत्व से आगे नहीं जाती है

स्थिति का उपयोग करना: चिपचिपा संपत्ति

मैंने position: stickyट्विटर के दाएं साइडबार में संपत्ति का उपयोग देखा (जहां मीडिया के रुझान और उपयोगकर्ताओं के अनुसरण के बारे में सिफारिशें प्रदर्शित की गई हैं)। यह मेरे लिए दिलचस्प था कि संपत्ति के मूल्यों के साथ काम कैसे आयोजित किया गया था bottomऔर topस्क्रॉल करते समय। डिफ़ॉल्ट मान इस प्रकार हैं:

.sidebar {
    position: sticky;
    width: 350px;
    bottom: -470.5px;
}

जब पृष्ठ नीचे स्क्रॉल करता है, तो संपत्ति bottomको संपत्ति के साथ बदल दिया जाता है top: -480.5px। मुझे लगता है कि डिजाइनरों ने ऐसा करने के लिए उपयोगकर्ता को साइडबार के अंत तक पहुंचने की अनुमति दी। topउसके बाद संपत्ति को जोड़ा जाता है।

विभाजक तत्व

जैसे फेसबुक डिज़ाइन में मैंने पहले विश्लेषण किया था, वैसे ही ट्विटर डिज़ाइन में, कई स्थानों पर, विभाजक तत्वों का उपयोग किया जाता है। ये सभी फ्लेक्स तत्व हैं जिनकी चौड़ाई संपत्ति का उपयोग करके सेट की गई है flex-basis।

विभाजक तत्व

पिछली छवि में दिखाया गया पहला तत्व विभाजक तत्व को सेट करते समय गुण का उपयोग करता हैflex-grow: 1। दूसरा पिक्सेल में निर्दिष्ट एक निश्चित चौड़ाई का उपयोग करता है।

ट्वीट सामग्री बनाना

ट्वीट

एब्यू मेरे द्वारा बनाया गया है। पहली नज़र में, ऐसा लग सकता है कि हमारे पास एक तत्व है<p>या<span>जिसमें पाठ जोड़ा गया है। लेकिन, जैसा कि यह निकला, प्रत्येक स्माइली को एक अलग टैग द्वारा दर्शाया गया है<span>, और यदि पाठ दो ऐसे तत्वों के बीच है, तो इसे टैग के रूप में भी बनाया जाता है<span>।

ट्वीट

इमोटिकॉन के पाठ का डिज़ाइन - यह<span>, जिसमें एक तत्व है<div>,<div>जिसमें दो चित्र शामिल हैं। एक सीएसएस पृष्ठभूमि है, दूसरी HTML छवि है।

चूंकि पहला वाक्य एक टैग में लिपटा होता है<span>, इसलिए इसके बीच और इसके समान स्तर के तत्वों के बीच विभाजक होना चाहिए। डिजाइनरों ने वाक्यों को अलग करने के लिए दूसरे वाक्य की शुरुआत में एक नई पंक्ति जोड़ी।

दूसरा वाक्य

अलग-अलग मदों के लिए गणना मूल्यों का उपयोग करना

बैक बटन

ट्विटर पर खोज करते समय, या प्रोफाइल पेज खोलते समय, एक बटन देखा जा सकता है। इस बटन पर एक शैली लागू की गई हैmargin-left: -4px, जो एक नकारात्मक बाहरी बाएं इंडेंट को निर्दिष्ट करता है। मुझे इस मूल्य की गणना करने की प्रक्रिया में दिलचस्पी थी।

.back-button {
    margin-left: calc(5px + (-1 * (39px - 1.5em)) / 2);
}

उपरोक्त गणनाओं का परिणाम एक मूल्य है -4px। सिर्फ पूछते क्यों नहीं -4px? क्या इस मामले में एक फ़ंक्शन का उपयोग करना बेहतर है calc()?

नेविगेशन लिंक की चौड़ाई

नेविगेशन लिंक

पहले दिन से, जब मैं एक नेविगेशन लिंक पैनल पर आया, मैंने देखा कि जब आप उन पर मंडराते हैं, तो उनकी चौड़ाई उनकी सामग्री के बराबर हो जाती है। मैंने सोचा कि क्यों न आइकॉन और लेबल को नेविगेशन तत्व की पूरी चौड़ाई से कवर किया जाए।

यहां,flex-direction: columnनेविगेशन बार के प्रत्येक तत्व के लिएएक संपत्ति के उपयोग के लिए मेरा ध्यान आकर्षित किया गया था। क्यों? क्या यह उस स्थिति में आवश्यक है जहां केवल एक बच्चे का उपयोग किया जाता है?

केवल मामले में बाहरी इंडेंट जोड़ा गया

अवांछित पृष्ठ लेआउट व्यवहार को रोकने के लिए प्रश्न में इंडेंटेशन डिज़ाइन में मौजूद है। मैंने तत्वों में जोड़े गए इंडेंटेशन के उपयोग के दो उदाहरणों पर ध्यान आकर्षित किया, इसलिए बोलने के लिए, "बस के मामले में"। आइए उन पर नजर डालते हैं।

तत्वों को जोड़ा गया "केवल मामले में"। बाईं ओर तत्व की सामान्य सामग्री है। दाईं ओर वह सामग्री है जो सामान्य से अधिक लंबी है। इस बात

पर ध्यान दें कि क्या होता है जब तत्व की सामग्री सामान्य सामग्री की तुलना में अधिक लंबी होती है। अर्थात्, निम्नलिखित यहाँ होता है:

पाठ काट दिया गया है।
तत्वों के बीच एक इंडेंट है।

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

छोटे देखने के क्षेत्रों में मोडल खिड़कियां

मैंने मोडल प्रोफ़ाइल संपादन विंडो की जांच की। यह पता चला है कि देखने के क्षेत्र की एक निश्चित ऊंचाई पर, Saveऐसी खिड़की के लिए बटन उपलब्ध नहीं है। यहाँ है कि यह कैसा दिखता है।

दुर्गम सहेजें बटन

चूंकि मोडल विंडो स्क्रॉलिंग का समर्थन नहीं करता है, इसलिएSaveमैंबटन परनहीं जा सका। लेकिन तत्वों की उपस्थिति को नियंत्रित करने के लिए उपयोग की जाने वाली खिड़की गतिशील ऊंचाई परिवर्तन और स्क्रॉलिंग का समर्थन करती है।

एक खिड़की जो गतिशील ऊंचाई परिवर्तन का

समर्थन करती है एक खिड़की स्क्रॉलिंग का समर्थन क्यों करती है और दूसरी नहीं? यह जानना दिलचस्प है कि ट्विटर डिजाइनरों के अनुसार कौन सा अधिक महत्वपूर्ण है? जैसा कि मेरे लिए - यह ठीक उसी विंडो है जिसका उपयोग प्रोफ़ाइल को संपादित करने के लिए किया जाता है।

क्या आप ट्विटर डिज़ाइन से कोई विचार अपनाने की योजना बना रहे हैं?

ट्विटर डिजाइन में दिलचस्प सीएसएस ढूँढता है