🤘🏿 🍖 🖕🏾 दिलचस्प सीएसएस नए फेसबुक डिजाइन में पाता है ☂️ 🤚🏻 🔪

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

अवतार में एसवीजी ग्राफिक्स का उपयोग करना

अवतार

एसवीजी ग्राफिक्स अवतार छवियों के लिए उपयोग किया जाता है, जैसे कि प्रोफाइल फोटो, उपयोगकर्ता पृष्ठों पर फोटो या समूहों में।

यहाँ HTML कोड है:

<svg role="none" style="height: 36px; width: 36px;">
  <mask id="avatar">
    <circle cx="18" cy="18" fill="white" r="18"></circle>
  </mask>
  <g mask="url(#avatar)">
    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
    <circle cx="18" cy="18" r="18"></circle>
  </g>
</svg>

जब मैंने यह देखा, तो मुझे आश्चर्य हुआ कि इस दृष्टिकोण का उपयोग क्यों किया गया था। मेरे पास इस प्रश्न के कई उत्तर हैं:

अवतार में एक आंतरिक फ्रेम होना चाहिए जिसमें पारभासी काला रंग (10%) हो। यह प्रकाश अवतारों को गोल चित्रों की तरह बनाना है। इसके अलावा, भले ही ये पूरी तरह से सफेद चित्र हों।
आप एक कीवर्ड का उपयोग करके HTML तत्व में <img>एक आंतरिक छाया ( box-shadow) नहीं जोड़ सकते हैं inset। इस समस्या को हल करने के लिए SVG का उपयोग किया जाता है।
छवि के लिए एक गोल आकार, एसवीजी तत्व <mask>और उपयोग किया जाता है <image>।

जैसा कि मैंने कहा, अवतार के अंदर के फ्रेम चमकदार छवियों के लिए बहुत उपयोगी हैं। यहाँ एक लेआउट है जो इस विचार को दिखाता है।

Avatars

निम्नलिखित सीएसएस का उपयोग करके आंतरिक फ़्रेम को कॉन्फ़िगर किया गया है:

circle,
rect {
  stroke-width: 2;
  stroke: rgba(0, 0, 0, 0.1);
  fill: none;
}

यदि छवि चौकोर है, तो चित्र का उपयोग किया जाता है rect:

<svg role="none" style="height: 36px; width: 36px;">
  <mask id="avatar">
    <rect cy="18" fill="white" height="36" rx="8" ry="8" width="36" x="0" y="0"></rect>
  </mask>
  <g mask="url(#avatar)">
    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
    <rect cy="18" fill="white" height="36" rx="8" ry="8" width="36" x="0" y="0"></rect>
  </g>
</svg>

दिलचस्प बात यह है कि फ़ीड के मुख्य पृष्ठ पर, टैग <img>और <div>आंतरिक पारभासी फ्रेम को कॉन्फ़िगर करने के लिए उपयोग किए जाने वाले तत्व का उपयोग करके अवतार बनाए जाते हैं :

<div class="avatar-wrapper>
    <img class="avatar" width="40" height="40" src="avatar.jpg" width="40" alt="">
    <div class="avatar-outline"></div>
</div>

यहाँ इस HTML के लिए शैलियों हैं:

.avatar-wrapper {
    position: relative;
}

.avatar {
    display: block;
    border-radius: 50%;
}

.avatar-outline {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
}

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

<Div> तत्वों के विभाजक के रूप में उपयोग करें, बाहरी मार्जिन नहीं

मुझे वे समय नहीं मिले जब GIF छवियों का उपयोग वेब पेज तत्वों के विभाजक के रूप में किया गया था। लेकिन तब मैंने इस तकनीक से मिलता जुलता कुछ देखा। मुझे लगता है कि, मैं जिस बारे में बात कर रहा हूं उसे विभाजक कहा जा सकता है।

विभाजकों के रूप में प्रयुक्त <div> तत्व

मुझे उपरोक्त आकृति को थोड़ा स्पष्ट करने दें। यह उस अनुभाग का एक टुकड़ा है जिसमें होम पेज पर दिखाई देने वाले मित्र अनुरोध शामिल हैं। इससे पहले कि हम लोगों के बारे में जानकारी के साथ एक निश्चित ग्रिड है। इस ग्रिड में एक बाहरी बाहरी इंडेंट होना चाहिए। मैं आमतौर पर सीमा जैसे तत्वों को जोड़ता हूंmargin-left: 16px:। लेकिन फेसबुक ने तत्व का उपयोग करने का एक ही काम किया<div>जो कंटेनर तत्व के किनारे से ग्रिड को अलग करता है।

डिजाइनरों ने ऐसा क्यों किया? मेरे पास कुछ अनुमान हैं:

शायद कंटेनर तत्वों के लिए इंडेंटेशन उनके द्वारा बनाई गई डिजाइन प्रणाली में नहीं जोड़ा जा सकता है?
हो सकता है कि यह एक रिएक्ट घटक है जो इसकी चौड़ाई निर्धारित करके कहीं भी उपयोग किया जा सकता है?

यहां इंडेंटेशन का इस्तेमाल क्यों नहीं किया जाता? मेरे लिए, एक सीएसएस साइट (लगभग 100 हजार लाइनें), जो सहायक कक्षाओं से भरी हुई है, एक अन्य वर्ग को समायोजित करने में सक्षम है जो आपको वांछित तत्व के इंडेंटेशन को समायोजित करने की अनुमति देती है।

CSS फ़िल्टर का उपयोग करना

<Img> और <svg> एलिमेंट्स का उपयोग करके बनाए

गए आइकन इन चार आइकनों पर एक नज़र डालें। एक तत्व के साथ एक प्लस चिह्न और एक तीर आइकन के साथ एक आइकन बनाया जाता है<img>। और दूत प्रतीक और सूचनाएं - एसवीजी तत्वों का उपयोग करना। प्रौद्योगिकियों के इस मिश्रण के कारण मेरे लिए अज्ञात हैं।

यदि आप अंतिम आइकन पर क्लिक करते हैं, तो तीर नीले रंग में पुन: अंकित हो जाएगा। "यहाँ रंग कैसे बदलता है, क्योंकि तीर एक साधारण छवि है?" मैंने खुद से पूछा। शायद जब आप आइकन पर हॉवर करते हैं, तो एक छवि बस दूसरे में बदल जाती है? नहीं ऐसी बात नहीं है। मुझे पता चला कि आइकन पर आइकन का रंग बदलने के लिए CSS फ़िल्टर का उपयोग किया जाता है:

.icon {
    filter: invert(39%) sepia(57%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(147.75%) hue-rotate(202deg) brightness(97%) contrast(96%)
}

और वैसे, facebook.com के लिए उत्पादन कोड है। यह कोड मुझे बहुत अजीब लगता है। क्या इस तत्व <img>को एसवीजी छवि के साथ बदलना मुश्किल है और केवल विशेषता द्वारा निर्दिष्ट रंग को बदलना है fill?

सत्यापित खातों के लिए आइकन बनाते समय उसी का उपयोग किया जाता है।

सत्यापित खाता आइकन

कुछ इसी तरह उपयोगकर्ता प्रोफ़ाइल से लिंक पर लागू होता है:

.icon {
    filter: invert(59%) sepia(11%) saturate(200%) saturate(135%) hue-rotate(176deg) brightness(96%) contrast(94%);
}

यह कैसा दिखता है

उपयोगकर्ता प्रोफ़ाइल में लिंक

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

छाया बनाने के लिए छवियों का उपयोग करना

पृष्ठभूमि-छवि

का उपयोग करके बनाई गई एक छाया मुख्य खिड़की का शीर्षक एक छाया है। यह माना जा सकता है कि यह सीएसएस संपत्ति का उपयोग करके बनाया गया थाbox-shadow। लेकिन वास्तव में ऐसा नहीं है। यहां हमने एक<div>ऐसी छवि काउपयोग किया है जिसकीपृष्ठभूमि छवि अक्ष के साथ दोहराती हैx।

मैंने यहां उपयोग की गई छवि अपलोड की है, जो मुझे एक करीब से देखने की अनुमति देती है।

छाया बनाने के लिए उपयोग की जाने वाली छवि

यह 2x14 पिक्सेल छवि है, जो छाया प्रभाव बनाने के लिए, कई बार दोहराई जाती है। न केवल छवि, बल्कि एक विशेष तत्व भी छाया प्रभाव के गठन में शामिल है<div>। इस तरह से छाया क्यों बनाया गया था?

फेसबुक के एक कर्मचारी ने कहा कि यहां की छवि प्रदर्शन के कारणों के लिए इस्तेमाल की गई थी। यह दिलचस्प है कि इस तरह की छोटी छाया साइट की गति के साथ समस्याएं पैदा कर सकती है।

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

ठीक है, अगर छाया इस तरह की समस्याओं का कारण बनती है - मैं इसे संबंधित छवि के साथ बदलने के साथ कुछ भी गलत नहीं देखता हूं।

सीएसएस चर का व्यापक उपयोग

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

जब एक डार्क थीम इनेबल होती है, तो HTML एलिमेंट में एक क्लास जोड़ा जाता है __fb-dark-mode। तब यह तत्व में घोषित सभी चर को ओवरराइड करता है :root:

:root {
    /*    */
    -fds-active-icon:  #3578E5;
    --fds-attachment-footer-background:  #F2F3F5;
    --fds-blue-05:  #ECF3FF;
    --fds-blue-30:  #AAC9FF;
    --fds-blue-40:  #77A7FF;
}

.__fb-dark-mode:root, .__fb-dark-mode {
    /*     */
    --fds-active-icon:  black;
    --fds-attachment-footer-background:  black;
    --fds-blue-05:  black;
    --fds-blue-30:  black;
    --fds-blue-40:  black;
}

यहां एक वीडियो है जो यह दर्शाता है कि अंधेरे विषय पर स्विच करने के बाद क्या होता है। मैं आपको इसे पूर्ण स्क्रीन मोड में देखने की सलाह देता हूं।

बहु-पाठ को ट्रिम करने के लिए लाइन-क्लैंप सीएसएस संपत्ति का उपयोग करना

हस्ताक्षर मल्टीलाइन टेक्स्ट ट्रिमिंग का उपयोग करते हैं।

साइडबार में लिंक की एक सूची होती है - जैसे कि वे जो उपयोगकर्ता प्रोफ़ाइल की ओर ले जाती हैं, नवीनतम सामग्री के लिए, स्मृति खंड में। मैंने देखा कि यहाँ बहुस्तरीय पाठ को ट्रिमिंग किया जाता है:

.element {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

ये अंतर्निहित शैली हैं, जो, इसके अलावा, ब्राउज़र के आधार पर भिन्न होती हैं।

क्रोम और फ़ायरफ़ॉक्स में पाठ ट्रिमिंग कोड

यह सीएसएस सुविधा बहुत अच्छा ब्राउज़र समर्थन प्राप्त है। CanIUse की रिपोर्ट है कि सभी प्रमुख ब्राउज़र इस संपत्ति का समर्थन करते हैं (यद्यपि उपसर्ग के साथ)। इस संपत्ति का विवरण यहां पाया जा सकता है ।

माउसओवर का जवाब देने वाले तत्वों को बनाने के लिए div का उपयोग करना

आमतौर पर, एक तत्व पर माउस के साथ होने वाले प्रभाव सीएसएस का उपयोग करके बनाए जाते हैं। उदाहरण के लिए, यदि एक निश्चित बटन को भूरे रंग की एक विशेष छाया के साथ चित्रित करने की आवश्यकता होती है, जब आप उस पर मंडराते हैं, तो बस निम्नलिखित करें:

.element:hover {
    background: #ccc;
}

हालांकि, ऐसा लगता है कि फेसबुक जैसी बड़ी साइटों पर, यह दृष्टिकोण अव्यवहारिक है। साइट की खोज की प्रक्रिया में, मैंने एक तत्व पर ध्यान आकर्षित किया जो केवल तब प्रदर्शित किया जाता है जब आप उस पर माउस से चलते हैं (इसे "होवर तत्व" कहते हैं)। यह इसका मुख्य कार्य है। यहाँ उसकी शैली है:

.hover-div {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: 6px;
    inset: 4px 0px;
    background-color: var(--hover-overlay);
    transition-property: opacity;
    transition-timing-function: var(--fds-animation-fade-out);
    cursor: pointer;
}

opacityइस तत्व का गुण मान जावास्क्रिप्ट से बदल दिया जाता 0है 1। मैंने इसके साथ प्रयोग किया और पाया कि इसका उपयोग कई घटकों के लिए किया जाता है। नीचे इस तत्व के उपयोग को दर्शाने वाले स्क्रीनशॉट का एक सेट है।

एक हॉवर तत्व का उपयोग करते हुए

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

इनसेट प्रॉपर्टी का उपयोग करना

हम एक तत्व के ऊपरी, दाएं, निचले और बाएं हिस्से पर प्रभाव को प्रभावित करते हुए, संपत्ति के मूल्यों के संक्षिप्त रिकॉर्ड के बारे में बात कर रहे हैं। आप संपत्ति का उपयोग इस insetप्रकार कर सकते हैं :

.element {
    inset: 4px 0;
    /*   : top: 4px, bottom: 4px, left: 0, right: 0 */
}

संपत्ति insetकुछ अन्य तत्वों से जुड़े उपरोक्त होवर तत्वों के लिए कॉन्फ़िगर की गई है । शैली HTML में सन्निहित है। मैंने इसके अनुप्रयोग को नीचे दिखाए गए घटक पर ध्यान दिया।

इनसेट संपत्ति से प्रभावित क्षेत्रों को नीले रंग में हाइलाइट किया गया है।

जब यह सामग्री लिखी जाती है, तो संपत्तिकेवल फ़ायरफ़ॉक्स 66+inset का समर्थन करती है ।

डिर = "ऑटो" विशेषता और सीएसएस बूलियन गुण

फेसबुक जैसी बहुभाषी साइटों पर, कभी-कभी यह अनुमान लगाना मुश्किल होता है कि सामग्री क्या होगी। उदाहरण के लिए, किसी घटक में उपयोगकर्ता नाम की एक विशेषता है dir=«auto»। इसका मतलब है कि पाठ की दिशा भाषा पर निर्भर करेगी। कहते हैं, अंग्रेजी का उपयोग करते समय, पाठ बाएं से दाएं और अरबी का उपयोग करते समय - दाएं से बाएं प्रदर्शित किया जाएगा।

इसके अलावा, यह ध्यान दिया जाना चाहिए कि एक अंतर्निहित शैली है जो पाठ की दिशा बदल देती है (एक भावना है कि विशेषता dir=«auto»पर्याप्त नहीं है)। यहाँ यह कैसा दिखता है:

<div dir="auto" style="text-align: start;">محتوى بالعربية</div>

ध्यान दें कि तत्व में एक शैली जोड़ी गई है text-align: start। यह तार्किक CSS संपत्ति का उपयोग करता है। एलटीआर लेआउट के लिए शैली, जैसे दिखाई देगी text-align: right।

यदि आप आरटीएल-शैलीकरण की विशेषताओं में रुचि रखते हैं - इस मेरी सामग्री पर एक नज़र डालें ।

मुख्य तस्वीर के आधार पर गतिशील पृष्ठभूमि

मुख्य तस्वीर के आधार पर पृष्ठभूमि

क्या आपने देखा है कि पृष्ठभूमि को डिजाइन करने के लिए मुख्य रंग के रंग के समान ढाल और रंग का उपयोग किया जाता है? यह पृष्ठभूमि गतिशील रूप से बनाई गई है, यह फोटो के रंग पर आधारित है। यह कैसे किया है?

▍1। प्रमुख रंग प्राप्त करना

पहले आपको मुख्य फोटो के प्रमुख (दूसरों की तुलना में अधिक बार इस्तेमाल किया जाने वाला) रंग प्राप्त करना होगा। इस रंग के पाए जाने के बाद, मुख्य तस्वीर का एक छोटा संस्करण बनाया जाता है, जिसे केवल इसी रंग के साथ चित्रित किया जाता है।

एक प्रमुख रंग ढूँढना

▍2। एक प्रमुख रंग पृष्ठभूमि जोड़ना

प्रमुख रंग

पाया पृष्ठभूमि का उपयोग पृष्ठभूमि पहले से पाया प्रमुख रंग का उपयोग करता है। मैंने, इसे स्पष्ट करने के लिए, मुख्य फ्रेम के रूप में पृष्ठ पर प्रदर्शित छवि को एक सफेद फ्रेम के साथ उजागर किया।

▍3। पृष्ठभूमि पर एक ढाल जोड़ना

पृष्ठभूमि पर एक ढाल जोड़ने के लिए, निम्नलिखित सीएसएस कोड का उपयोग करें:

.element {
    background-image: linear-gradient(to top, #FFFFFF, rgb(255, 255, 255), rgba(255,255,255,0.7), rgba(255,255,255,0.4), rgba(255,255,255,0));
}

ग्रेडिएंट जोड़ना (डिज़ाइन में हल्के रंगों का उपयोग किया जाता है)

इस घटना में कि गहरे रंगों का डिज़ाइन में उपयोग किया जाता है, रिवर्स ग्रेडिएंट का उपयोग किया जाता है:

.element {
    background-image: linear-gradient(to top, #000, rgb(0, 0, 0), rgba(0,0,0,0.7), rgba(0,0,0,0.4), rgba(0,0,0,0));
}

एक ढाल जोड़ना (डिजाइन में गहरे रंगों का उपयोग किया जाता है)

आप इस टूलका उपयोग छवि के प्रमुख रंग को खोजने के लिए कर सकते हैं।

एकाधिक छाया

छाया

मुझे पसंद आया जो फेसबुक डेवलपर्स ड्रॉप-डाउन मेनू जैसे विभिन्न तत्वों के लिए छाया बनाने के लिए उपयोग करते थे। ऐसी छाया मात्रा का भ्रम पैदा करती है, जो एक नियमित छाया के साथ प्राप्त होने वाले भ्रम की तुलना में बहुत अधिक यथार्थवादी है।

ड्रॉप-डाउन मेनू

यहां सीएसएस है:

.element {
    box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

यहां आपके मन में यह सवाल हो सकता है कि यहां 50% की पारदर्शिता के साथ सफेद रंग की एक इनसेट छाया क्यों बनाई गई है? तथ्य यह है कि यह अंधेरे शासन के लिए एक छाया है। नीचे इंटरफ़ेस का एक बड़ा टुकड़ा है जिसमें इस तरह की छाया का उपयोग किया जाता है।

इनसेट छाया के साथ इंटरफ़ेस का एक बड़ा टुकड़ा।

मुझे यह उचित समाधान पसंद है।

Flexbox ग्रिड के लिए खाली आइटम

मैंने देखा कि साइट पर सभी ग्रिड लेआउट फ्लेक्सबॉक्स पर आधारित हैं। यहां इस तरह के लेआउट का एक उदाहरण है जो मुझे उपयोगकर्ता के फोटो अनुभाग में मिला।

ग्रिड लेआउट में खाली तत्व

यहाँ CSS है:

.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-items: space-between;
}

.item {
    width: 205px;
}

यह सब दिलचस्प लगता है, है ना? space-betweenतत्वों की नियुक्ति को समायोजित करने के लिए एक मूल्य का उपयोग करना जोखिम भरा है। लेआउट सही नहीं लगेगा यदि, उदाहरण के लिए, केवल तीन तस्वीरें हैं। इस तरह के लेआउट का एक उदाहरण नीचे दिखाया गया है।

स्पेस-के बीच का उपयोग करने का खतरा

फेसबुक टीम ने इस समस्या से कैसे निपट लिया? बहुत सरल: चार खाली तत्व हैं<div>, जिनमें से चौड़ाई फोटो की चौड़ाई के बराबर है। यहाँ इस समाधान के लिए HTML है:

<div class="wrapper">
    <div class="item"><a href="#"><img src="photo.jpg"></a></div>
    <div class="item"><a href="#"><img src="photo.jpg"></a></div>
    <div class="item"><a href="#"><img src="photo.jpg"></a></div>
    <div class="item"><a href="#"><img src="photo.jpg"></a></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
</div>

इस दृष्टिकोण के साथ, ऐसे खाली तत्व <div>कृत्रिम तत्वों की भूमिका निभाते हैं। वे तत्वों के बीच समान दूरी बनाए रखने में मदद करते हैं।

ऊर्ध्वाधर मीडिया प्रश्नों का उपयोग करना

मैं शायद ही कभी ऊर्ध्वाधर मीडिया प्रश्नों को देखता हूं, इसलिए बोलने के लिए, जंगली में। मुझे यह पसंद है कि मुख पृष्ठ पर समाचार फीड की चौड़ाई कम करने के लिए फेसबुक डेवलपर्स ने इस क्वेरी का उपयोग किया:

@media (min-height: 700px) {
    .element {
        width: 584px;
    }
}

सारांश

बस इतना ही। मुझे इस लेख पर काम करने में बहुत दिलचस्पी थी। फेसबुक साइट के डिजाइन की खोज, मैंने बहुत कुछ सीखा। मुझे उम्मीद है कि आपको मेरी कहानी में भी कुछ ऐसा मिला जो आपको नया और रोचक लगा।

प्रिय पाठकों! क्या आपने कभी उन साइटों के कोड का विश्लेषण करके कुछ भी दिलचस्प पाया है जो आप आते हैं?

दिलचस्प सीएसएस नए फेसबुक डिजाइन में पाता है