🏟️ 🏴󠁧󠁢󠁳󠁣󠁴󠁿 👠 يجد CSS للاهتمام في تصميم تويتر 🔗 🐗 👩🏿‍🚀

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

نسبة أبعاد الصورة الرمزية للمستخدم

لقد لاحظت تنفيذ مثير للاهتمام لصورة المستخدم على صفحة الملف الشخصي. يستخدم هذا التطبيق تقنية 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. هذا يعني أن لدينا مربع مثالي. استخدم فريق Twitter نفس التقنية ، ولكن تم تطبيقه على <img>عنصر تم وضعه بشكل مطلق فيما يتعلق بالعنصر الأصلي. لماذا ا؟ هنا هو السبب.

هناك خطأ ما في الصورة الرمزية.

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

الآن بعد أن اكتشفنا الفكرة الكامنة وراء هذا الحل ، دعنا نعود إلى كيفية تنفيذ هذه الفكرة على Twitter.

تعتمد الخاصيةwidth: 25%على عرض عنصر الغلاف. على شاشتي -600px. تساءلت لماذا تم اختيار مثل هذه التقنية. بعد أن تعرفت على المزيد حول رمز CSS ، لاحظت أن نفس المكون يستخدم في إطار تحرير ملف تعريف الوسائط. صحيح أن العنصر هنا أصغر بسبب استخدام النمط التالي:

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

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

التحكم بعرض الصورة

هنا يمكنك العثور على مشروع تجريبي لهذا القسم.

النسبة المئوية للمسافة البادئة العليا

لكي يتداخل الصورة الرمزية للمستخدم مع الصورة الموجودة أعلى صفحة الملف الشخصي ، يتم استخدام مسافة بادئة خارجية سلبية محددة في النسبة المئوية:

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

صحيح ، في إطار تحرير ملف تعريف مشروط ، يتم استخدام التصميم بالفعل لضبط المسافة البادئة العليا margin-top: -3rem. لاحظ أنه يتم تعيين المسافة البادئة في النافذة المشروطة باستخدام الوحدات rem. يتم استخدام نفس الوحدات لتعيين الممتلكات max-width.

استخدام غريب للدالة calc () CSS

لقد لاحظت أن CSS التالي يستخدم لتصميم بعض الأزرار:

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

لماذا يعمل تمرير calc()قيمة واحدة؟ لا أرى النقطة. ربما أرادوا تقريب الرقم 45.08؟ ولكن مع هذا النهج ، لا يتم تقريبه إلى 45. عرض الزر صغير جدًا. سيكون الزر عند ترجمة التطبيق إلى لغة RTL ، مثل العربية ، صغيرًا جدًا.

زر صغير للغاية تظهر

الوظيفةcalc()في CSS المضمنة. لذلك ، أعتقد أن هذا هو نتيجة التصميم الديناميكي للزر باستخدام React.

امزج خلفيات CSS وصور HTML

في العديد من الأماكن على الموقع ، وجدت مزيجًا من صور الخلفية المحددة بواسطة صور CSS و HTML. نلقي نظرة على المثال التالي:

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

رأيت هذا في ملف تعريف المستخدم ، وفي المكون المستخدم في تشكيل تخطيط الشبكة. من المثير للاهتمام ، تم تعيين خاصية opacityالعنصر <img>إلى 0. مصدر الصورة النشطة خاصية background-image. بالإضافة إلى ذلك ، يتم استخدام خاصية هنا background-size: coverتتجنب تشويه الصورة.

لقد حاولت القيام بالعكس ، أي لعرض العنصر <img>وإخفاء خلفية CSS ، ومقارنة تخطيطات الشبكة. نتائج هذه المقارنة موضحة أدناه.

يوجد على اليسار الخيار الذي تُستخدم فيه صورة الخلفية ، وعلى اليمين هو الخيار الذي تُستخدم فيه صورة HTML. من

الواضح أن الصورة الموجودة على اليمين مشوهة! لا أعرف لماذا لم يستخدم فريق التطوير خاصية CSSobject-fit: coverلمنع التشويه. وأود أن أعرف لماذا يتم استخدام صورتين هنا.

إعادة تعيين الأنماط

لقد لاحظت نمطًا واحدًا ، وهو الاستخدام المستمر لفئة CSS التي تتم إضافتها إلى العناصر <div>. إليك CSS ذات الصلة:

.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>في الصفحة. لماذا ا؟ ألا تعد إعادة تعيين أنماط CSS كافية هنا؟

بعض الأنماط الموضحة أعلاه مفهومة تمامًا بالنسبة لي ، نوعًا ما min-width: 0، نظرًا لوجود بعض الاتصال مع Flexbox. ولكن ماذا عن المسافة البادئة ، والمسافات ، والحدود؟ لماذا <div>يحتاج عنصر واحد إلى إعادة تعيين الأنماط ، بالنظر إلى حقيقة أن هذا العنصر لا يحتوي على الخصائص المناسبة؟

Flexbox وعرض الحد الأدنى: 0

القيمة الافتراضية للممتلكات min-widthهي auto، والتي يتبين أنها صفر. عندما يتم عرض شيء ما كعنصر مرن ، فإن قيمة خصائصه min-widthتساوي حجم محتوياته. قد يؤدي السماح بهذا السلوك إلى انتهاك التصميم إذا كان محتوى العنصر أكبر مما هو عليه.

لتجنب هذه المشكلة ، تحتاج إلى إعادة تعيين الخاصية min-widthلأحفاد العناصر المرنة.

العنصر المرن والمغلف Flexbox

يوضح التخطيط الموضح أعلاه ما يمكن أن يحدث إذا كان محتوى العنصر المرن طويلًا جدًا. لاحظ أن النص يتجاوز حدود عنصر الغلاف. ولكن ماذا يحدث عند استخدام العقارmin-width: 0.

المحتوى لا يتجاوز العنصر المرن

باستخدام الموقف: خاصية لزجة

لقد لاحظت استخدام الخاصية position: stickyفي الشريط الجانبي الأيمن من Twitter (حيث يتم عرض اتجاهات الوسائط والتوصيات المتعلقة بالمستخدمين لمتابعة). وبدا اهتمام لي كيف تم تنظيم عمل مع قيم العقارات bottomو topعند التمرير. القيم الافتراضية هي كما يلي:

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

عند تمرير الصفحة لأسفل ، bottomيتم استبدال الخاصية بالخاصية top: -480.5px. أعتقد أن المصممين قاموا بذلك من أجل السماح للمستخدم بالوصول إلى نهاية الشريط الجانبي أولاً. الملكية topتضاف بعد ذلك.

عناصر الفاصل

تمامًا كما هو الحال في تصميم Facebook الذي حللته سابقًا ، في تصميم Twitter ، في العديد من الأماكن ، يتم استخدام عناصر الفاصل. كل هذه عناصر مرنة يتم تعيين عرضها باستخدام الخاصية flex-basis.

عناصر

الفاصل يستخدم العنصر الأول الموضح في الصورة السابقة الخاصية عند تعيين عنصر الفاصلflex-grow: 1. يستخدم الثاني عرض ثابت محدد بالبكسل.

جعل محتوى التغريد

سقسقة

يتم إنشاؤه فوق لي من قبل سقسقة. للوهلة الأولى ، قد يبدو أن أمامنا عنصرًا،<p>أو<span>تمت إضافة نص إليه. ولكن ، كما اتضح ، يتم تمثيل كل وجه مبتسم بعلامة منفصلة<span>، وإذا كان النص بين عنصرين من هذا القبيل ، فإنه يتم إجراؤه أيضًا كعلامة<span>.

تصميم نص تغريدة

Emoticon - هذا<span>، حيث يوجد عنصر<div>،<div>يحتوي على صورتين. الأول هو خلفية CSS ، والثاني هو صورة HTML.

نظرًا لأنه يتم لف الجملة الأولى في علامة<span>، يجب أن يكون هناك فواصل بينها وعناصر من نفس المستوى مثلها. أضاف المصممون سطرًا جديدًا في بداية الجملة الثانية لفصل الجمل.

الجملة الثانية

استخدام القيم المحسوبة لفصل العناصر

زر الرجوع

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

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

الحسابات أعلاه تؤدي إلى قيمة -4px. لماذا لا تسأل فقط -4px؟ هل هذا أفضل في هذه الحالة من استخدام دالة calc()؟

عرض روابط التنقل

روابط التنقل

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

هنا ، تم لفت انتباهي إلى استخدام خاصيةflex-direction: columnلكل عنصر من عناصر شريط التنقل. لماذا ا؟ هل هذا ضروري في حالة استخدام طفل واحد فقط هنا؟

تمت إضافة مسافة بادئة خارجية فقط في حالة

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

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

انتبه لما يحدث عندما يكون محتوى العنصر أطول بشكل ملحوظ من محتواه العادي. وبالتحديد ، يحدث ما يلي هنا:

تم اقتصاص النص.
هناك مسافة بادئة بين العناصر.

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

نوافذ مشروطة في مناطق العرض الصغيرة

لقد تفقدت نافذة تحرير ملف التعريف المشروط. اتضح أنه عند ارتفاع معين من منطقة العرض ، Saveلا يتوفر زر هذه النافذة. هنا هو كيف يبدو.

لا يمكن الوصول إلى الزر "حفظ"

نظرًا لأن النافذة المشروطة لا تدعم التمرير ،Saveلم أتمكن من الوصولإلى الزر. لكن النافذة المستخدمة للتحكم في مظهر العناصر تدعم التغيير الديناميكي للارتفاع والتمرير.

نافذة تدعم تغيرات الارتفاع الديناميكي

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

هل تخطط لتبني أي أفكار من تصميم تويتر؟

يجد CSS للاهتمام في تصميم تويتر