🎌 ⏳ 🗨️ يجد CSS مثيرة للاهتمام في تصميم Facebook الجديد 🌑 🏷️ 🦒

انا فضولي. من المثير للاهتمام دائمًا أن أفتح أدوات مطور المتصفح وأن أفهم كيف يتم إنشاء أي موقع ويب نظرت إليه. هذه المادة هي قصتي الأولى حول مثل هذا البحث. الحقيقة هي أنني وجدت بعض الأمثلة المثيرة للاهتمام لاستخدام CSS (على الأقل بدت مثيرة للاهتمام بالنسبة لي) التي أردت التحدث عنها. نحن نتحدث عن اكتشافات CSS في تصميم Facebook الجديد. ظهر هذا التصميم مؤخرا نسبيا. رأيته قبل أسبوعين. في البداية ، بدت لي جميع عناصر الواجهة كبيرة بشكل غير عادي ، لكنني اعتدت عليها في غضون أيام قليلة. هنا سوف أتحدث عن كل ذلك المثير للاهتمام الذي وجدته في تصميم Facebook.

استخدام رسومات SVG في الصور الرمزية

يتم استخدام رسومات Avatars SVG للصور الرمزية ، مثل صور الملف الشخصي والصور على صفحات المستخدم أو في مجموعات.

إليك كود 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٪). هذا لجعل الصور الرمزية الخفيفة تبدو كصور مستديرة. علاوة على ذلك ، حتى لو كانت هذه صور بيضاء بالكامل.
لا <img>يمكنك إضافة ظل داخلي ( box-shadow) إلى عنصر HTML باستخدام كلمة أساسية inset. يستخدم SVG لحل هذه المشكلة.
من أجل أن يكون للصورة شكل دائري ، <mask>يتم استخدام عناصر SVG <image>.

كما قلت ، الإطارات داخل الصورة الرمزية مفيدة جدًا للصور الساطعة. هنا تخطيط يوضح هذه الفكرة.

الصور الرمزية

تم تكوين الإطار الداخلي باستخدام CSS التالي:

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%;
}

منذ يستخدم SVG في الآلهة فقط في بعض الأماكن، وأستطيع أن نفترض أن سبب استخدام <img>و <div>يرتبط حجم الصفحة. إذا تم استخدام رسومات SVG في الصور الرمزية من الشريط ، فقد يؤدي ذلك إلى زيادة كمية البيانات التي يتم تحميلها عند التمرير عبر الشريط.

استخدم كفواصل لعناصر <div> ، وليس الهوامش الخارجية

لم أجد تلك الأوقات التي تم فيها استخدام صور GIF كفواصل لعناصر صفحة الويب. ولكن بعد ذلك رأيت شيئًا يشبه هذه التقنية. أعتقد ذلك ، ما أتحدث عنه يمكن أن يسمى فواصل div.

<div> العناصر المستخدمة كفواصل

دعوني أوضح الشكل أعلاه قليلاً. هذا جزء من القسم الذي يحتوي على طلبات صداقة تظهر على الصفحة الرئيسية. أمامنا شبكة معينة بمعلومات عن الناس. يجب أن تحتوي هذه الشبكة على مسافة بادئة خارجية يسرى. وعادة ما تضاف إلى عناصر مثل الحدود:margin-left: 16px. لكن Facebook فعل الشيء نفسه باستخدام العنصر<div>الذي يفصل الشبكة عن حافة عنصر الحاوية.

لماذا فعل المصممون ذلك؟ لدي بعض التخمينات:

ربما لا يمكن إضافة مسافة بادئة لعناصر الحاوية إلى نظام التصميم الذي أنشأوه؟
ربما يكون هذا مكون رد فعل يمكن استخدامه في أي مكان عن طريق تحديد عرضه؟

لماذا لا يتم استخدام المسافة البادئة هنا؟ أما بالنسبة لي ، فإن موقع CSS (حوالي 100 ألف سطر) ، المليء بالفئات المساعدة ، قادر على استيعاب فئة أخرى تسمح لك بتعديل المسافة البادئة للعنصر المطلوب.

استخدام فلاتر CSS

أيقونات تم إنشاؤها باستخدام عنصري <img> و <svg>

ألق نظرة على هذه الرموز الأربعة. يتم إنشاء رمز بعلامة الجمع ورمز سهم باستخدام عنصر<img>. ورموز وإشعارات المراسلة - باستخدام عناصر SVG. أسباب هذا المزيج من التقنيات غير معروفة بالنسبة لي.

إذا قمت بالنقر فوق الرمز الأخير ، فسيتم إعادة رسم السهم باللون الأزرق. سألت نفسي: "كيف يتغير اللون هنا ، لأن السهم صورة عادية؟" ربما عند التمرير فوق الرمز ، تتغير صورة واحدة إلى أخرى ببساطة؟ لا ، ليس كذلك. اكتشفت أنه يتم استخدام فلتر 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>SVG وتغيير اللون المحدد بواسطة السمة fill؟

يتم استخدام الشيء نفسه عند إنشاء رمز للحسابات التي تم التحقق منها.

رمز حساب تم التحقق منه

شيء مشابه ينطبق على الروابط من ملف تعريف المستخدم:

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

هكذا تبدو

الروابط في ملف تعريف المستخدم

إذا كنت مهتمًا بمعرفة كيفية استخدام مرشح CSS لتلوين صورة باللون الأسود بأي لون ، ألق نظرة على هذه الإجابة على Stack Overflow. هناك يمكنك العثور على أداة لإنشاء فلاتر CSS. أيضا ، ألق نظرة على هذه التغريدة.

استخدام الصور لإنشاء الظلال

ظل تم إنشاؤه باستخدام background-image

يحتوي عنوان النافذة الرئيسية على ظل. يمكن افتراض أنه تم إنشاؤه باستخدام خاصية CSSbox-shadow. ولكن في الواقع ليس كذلك. استخدمنا هنا عنصرًا<div>مع صورة خلفية تتكرر على طول المحورx.

لقد قمت بتحميل الصورة المستخدمة هنا ، مما يسمح لي بإلقاء نظرة فاحصة.

الصورة المستخدمة لإنشاء الظل

هذه هي صورة 2x14 بكسل يتم تكرارها عدة مرات لإنشاء تأثير الظل. ليس فقط الصورة ، ولكن أيضًا عنصر خاص يشارك في تكوين تأثير الظل<div>. لماذا تم إنشاء الظل بهذه الطريقة؟

A الفيسبوك الموظف وقال أن الصورة هنا كانت تستخدم لأسباب تتعلق بالأداء. من المثير للاهتمام أن مثل هذا الظل الصغير يمكن أن يؤدي إلى مشاكل في سرعة الموقع.

عندما سئل عن كيفية تحديد هذه المشكلة ، قال إن الظل تسبب في انخفاض خطير في الأداء وتأثيرات بصرية غير سارة. لذلك ، عند التمرير عبر صفحة تحتوي على العديد من مقاطع الفيديو ، ظهرت بعض أجزاء الصفحة واختفت.

حسنًا ، إذا تسبب الظل في مثل هذه المشاكل - فلا أرى أي خطأ في استبدالها بالصورة المقابلة.

استخدام متغيرات CSS على نطاق واسع

أحب حقيقة أن مصممي Facebook يستخدمون متغيرات CSS. بناءً على ما رأيته ، :rootتمت إضافة أكثر من 320 متغيرًا إلى العنصر . يتم استخدام هذه المتغيرات في كل من المظاهر الفاتحة والداكنة للموقع.

عندما يتم تمكين سمة داكنة ، تتم إضافة فئة إلى عنصر 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;
}

إليك مقطع فيديو يوضح ما يحدث بعد التحول إلى موضوع مظلم. أنصحك بمشاهدته في وضع ملء الشاشة.

استخدام خاصية CSS-clamp لقص النص متعدد الخطوط

تستخدم التوقيعات قص نص متعدد الخطوط.

يحتوي الشريط الجانبي على قائمة بالارتباطات - مثل تلك التي تؤدي إلى ملف تعريف المستخدم ، إلى أحدث المواد ، إلى قسم الذكريات. لقد لاحظت أنه يتم هنا تشذيب النص متعدد الخطوط:

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

هذه أنماط مضمنة ، والتي تختلف أيضًا باختلاف المتصفح.

رمز تشذيب النص في Chrome و Firefox

تتمتع ميزة CSS بدعم متصفح جيد جدًا. تشير CanIUse إلى أن جميع المتصفحات الرائدة تدعم هذه الخاصية (وإن كانت ببادئة). يمكن العثور على تفاصيل هذا العقار هنا .

استخدام div لإنشاء عناصر تستجيب لتمرير الماوس

عادة ، يتم إنشاء التأثيرات المصاحبة للماوس فوق عنصر باستخدام CSS. على سبيل المثال ، إذا كان هناك زر معين يحتاج إلى طلاء بلون خاص من الرمادي عند التمرير فوقه ، فقم فقط بما يلي:

.element:hover {
    background: #ccc;
}

ومع ذلك ، يبدو أن هذا النهج غير عملي على المواقع الكبيرة مثل Facebook. في عملية استكشاف الموقع ، لفتت الانتباه إلى عنصر يتم عرضه فقط عند تحريك الماوس فوقه (دعنا نطلق عليه "عنصر التمرير"). هذه هي مهمتها الرئيسية. هنا هو أسلوبه:

.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يتم تغيير قيمة خاصية هذا العنصر بواسطة JavaScript من 0إلى 1. لقد جربته ووجدت أنه يستخدم للعديد من المكونات. فيما يلي مجموعة من لقطات الشاشة التي توضح استخدام هذا العنصر.

باستخدام عنصر تحويم

أحب التوحيد والبساطة المقدمة باستخدام نفس التأثير لعناصر متعددة. إذا كان هذا يعني شيئًا ، فهذا يعني أن لغة التصميم المستخدمة في الموقع موحدة ، وأن النظام مصمم بعناية. عمل جيد ، الفيسبوك!

باستخدام خاصية أقحم

نحن نتحدث عن سجل مختصر لقيم الممتلكات ، مما يعني ضمناً التأثير على الأجزاء العلوية واليمنى والسفلى واليسرى من العنصر. يمكنك استخدام الخاصية على insetالنحو التالي:

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

تم insetتكوين الخاصية لعناصر التمرير أعلاه المرتبطة ببعض العناصر الأخرى. النمط مضمن في HTML. لقد لاحظت تطبيقه على المكون الموضح أدناه.

يتم تمييز المناطق المتأثرة بخاصية الإدراج باللون الأزرق.

عند كتابة هذه المادة ،inset تدعم الخاصيةFirefox 66+ فقط.

Dir = السمة "auto" والخصائص المنطقية لـ CSS

على المواقع متعددة اللغات مثل Facebook ، يكون من الصعب أحيانًا التنبؤ بالضبط بالمحتوى. على سبيل المثال ، يحتوي اسم المستخدم في أحد المكونات على سمة dir=«auto». هذا يعني أن اتجاه النص سيعتمد على اللغة. لنفترض ، عند استخدام اللغة الإنجليزية ، سيتم عرض النص من اليسار إلى اليمين ، وعند استخدام اللغة العربية - من اليمين إلى اليسار.

علاوة على ذلك ، تجدر الإشارة إلى أن هناك نمطًا مدمجًا يغير اتجاه النص (هناك شعور بأن السمة dir=«auto»ليست كافية). إليك ما يبدو عليه:

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

لاحظ أنه تمت إضافة نمط إلى العنصر text-align: start. يستخدم هذا خاصية CSS المنطقية. سيبدو النمط الخاص بمخططات LTR text-align: right.

إذا كنت مهتمًا بميزات نمط RTL - ألق نظرة على هذه المواد الخاصة بي.

خلفية ديناميكية حسب الصورة الرئيسية

الخلفية اعتمادًا على الصورة الرئيسية

هل لاحظت أنه يتم استخدام التدرج واللون المشابه للون الصورة الرئيسية لتصميم الخلفية؟ يتم تشكيل هذه الخلفية ديناميكيًا ، وتستند إلى لون الصورة. كيف يتم ذلك؟

▍1. الحصول على اللون السائد

تحتاج أولاً إلى الحصول على اللون المهيمن (المستخدم أكثر من غيره) للصورة الرئيسية. بعد العثور على هذا اللون ، يتم إنشاء نسخة مصغرة من الصورة الرئيسية ، مطلية فوق هذا اللون فقط.

إيجاد لون مهيمن

▍2. إضافة خلفية ملونة مهيمنة

تم العثور على خلفية باستخدام اللون السائد

تم العثور على خلفية تستخدم اللون السائد الذي تم العثور عليه سابقًا. أنا ، لجعلها أكثر وضوحا ، أبرزت الصورة المعروضة على الصفحة كصورة رئيسية بإطار أبيض.

▍3. إضافة تدرج على الخلفية

لإضافة تدرج لوني على الخلفية ، استخدم كود CSS التالي:

.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));
}

إضافة تدرج (يتم استخدام الألوان الداكنة في التصميم)

يمكنك استخدام هذه الأداةللعثور على اللون السائد للصورة.

ظلال متعددة

الظلال

أحببت النهج الذي استخدمه مطورو Facebook لإنشاء ظلال للعناصر المختلفة مثل القوائم المنسدلة. مثل هذا الظل يخلق وهم الحجم ، وهو أكثر واقعية بكثير من الوهم الذي يمكن تحقيقه بظل منتظم.

القوائم المنسدلة

إليك CSS:

.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

لقد لاحظت أن جميع تخطيطات الشبكة على الموقع تستند إلى flexbox. هنا مثال واحد لمثل هذا التخطيط الذي وجدته في قسم صور المستخدم.

العناصر الفارغة في تخطيط الشبكة

إليك CSS:

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

.item {
    width: 205px;
}

يبدو كل شيء مثير للاهتمام ، أليس كذلك؟ استخدام قيمة space-betweenلضبط موضع العناصر أمر محفوف بالمخاطر. لن يبدو التصميم صحيحًا ، على سبيل المثال ، إذا كانت هناك ثلاث صور فقط. يتم عرض مثال لمثل هذا التخطيط أدناه.

خطر استخدام المسافة بين

كيف تعامل فريق Facebook مع هذه المشكلة؟ بسيط جدًا: هناك أربعة عناصر فارغة<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>تلعب هذه العناصر الفارغة دور العناصر الاصطناعية. تساعد في الحفاظ على نفس المسافة بين العناصر.

استخدام استعلامات الوسائط العمودية

نادرًا ما أرى استفسارات عن الوسائط الرأسية ، إذا جاز التعبير ، في البرية. أحب حقيقة أن مطوري Facebook استخدموا هذا الاستعلام لتقليل عرض موجز الأخبار على الصفحة الرئيسية:

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

ملخص

هذا كل شئ. كنت مهتمًا جدًا بالعمل على هذه المقالة. أثناء استكشاف تصميم موقع Facebook ، تعلمت الكثير. آمل أن تكون قد وجدت أيضًا في قصتي شيئًا جديدًا ومثيرًا للاهتمام بالنسبة لك.

القراء الأعزاء! هل وجدت أي شيء مثير للاهتمام من خلال تحليل رمز المواقع التي تزورها؟

يجد CSS مثيرة للاهتمام في تصميم Facebook الجديد