ثمانية نصائح CSS للتخطيطات والتأثيرات المتقدمة

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

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

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

1. تكبير CSS Sibling Selectors

المشكلة: إنك تفقد فرص التحسين بسبب عدم استخدام محددات الأشقاء.

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

على سبيل المثال ، عند إنشاء رمز قائمة همبرغر في CSS فقط:

شاهد Pen Maximizing CSS Sibling Selectors 1 بواسطة Rico Mossesgeld (ricotheque) على CodePen.

هذا منطقي: يحتوي كل شريط على هامش سفلي ، باستثناء الأخير.

ومع ذلك ، فإن نفس التأثير ممكن أيضًا من خلال محدد الأخوة المجاور (+):

شاهد Pen Maximizing CSS Sibling Selectors 2 بواسطة Rico Mossesgeld (ricotheque) على CodePen.

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

ضع في اعتبارك قائمة البطاقات هذه:

شاهد Pen Maximizing CSS Sibling Selectors 3 بواسطة Rico Mossesgeld (ricotheque) على CodePen.

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

شاهد Pen Maximizing CSS Sibling Selectors 4 بواسطة Rico Mossesgeld (ricotheque) على CodePen.

مع القليل من JavaScript ، يمكن أن يكون هذا تفاعليًا أيضًا.

ومع ذلك ، فإن الاعتماد على JavaScript وحده لكل ذلك سيؤدي إلى نص مثل هذا:

انظر Pen Maximizing CSS Sibling Selectors 5 بواسطة Rico Mossesgeld (ricotheque) على CodePen.

حيث يتيح لك تضمين jQuery كعنصر تبعية الحصول على رمز قصير إلى حد ما.

2. تحجيم عنصر HTML متسق

المشكلة: عناصر HTML لها أحجام غير متسقة عبر المتصفحات المختلفة.

الحل: اضبط box-sizing لجميع العناصر على border-box . لعنة طويلة الأمد لمطوري الويب ، فعل Internet Explorer شيئًا واحدًا صحيحًا: لقد حجم الصناديق بشكل صحيح.

تنظر المتصفحات الأخرى إلى المحتوى فقط عند حساب عرض عنصر HTML ، مع معاملة كل شيء آخر على أنه فائض. width: 200px بكسل div ، مع 20px 20 بكسل 2px بكسل ، يتم عرضها بمقدار 242 بكسل.

يعتبر Internet Explorer الحشو والحدود جزءًا من العرض. هنا ، سيكون عرض div من أعلى 200 بكسل.

شاهد العرض التوضيحي 1 من Pen CSS Box Model بواسطة Rico Mossesgeld (ricotheque) على CodePen.

بمجرد أن تتعود على الأمر ، ستجد أن النهج الأخير أكثر منطقية ، حتى لو لم يتبع المعايير.

إذا قلت أن العرض هو 200 بكسل ، يا إلهي ، فسيكون مربعًا بعرض 200 بكسل حتى لو كان لدي 20 بكسل من المساحة المتروكة.

على أي حال ، تحافظ CSS التالية على اتساق أحجام العناصر (وبالتالي التخطيطات) عبر جميع المتصفحات:

شاهد عرض Pen CSS Box Model Demo 2 بواسطة Rico Mossesgeld (ricotheque) على CodePen.

تحمي المجموعة الثانية من محددات CSS عناصر HTML المصممة بدون وضع مربع الحدود في الاعتبار من اضطراب التخطيط.

box-sizing: border-box مفيدًا جدًا لدرجة أنه جزء من إطار عمل CSS شائع نسبيًا يسمى sanitize.css.

3. عناصر الارتفاع الديناميكي

المشكلة: الحفاظ على ارتفاع عنصر HTML متناسبًا مع عرضه.

الحل: استخدم الحشو الرأسي كبديل للارتفاع.

لنفترض أنك تريد أن يتطابق ارتفاع عنصر HTML دائمًا مع عرض CSS الخاص به. height: 100% لا يغير السلوك الافتراضي للعناصر المطابقة لارتفاع محتواها.

شاهد عناصر الارتفاع الديناميكي للقلم 1 بواسطة Rico Mossesgeld (ricotheque) على CodePen.

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

شاهد عناصر الارتفاع الديناميكي للقلم 2 من ريكو موسيسجيلد (ricotheque) على CodePen.

الآن .container مربعًا بغض النظر عن اتساعها. overflow: hidden يمنع المحتوى الطويل من كسر هذه النسبة.

تعتبر هذه التقنية ، مع بعض التعديلات ، رائعة لإنشاء مقاطع فيديو مضمنة تحتفظ بنسبة العرض إلى الارتفاع بأي حجم. ما عليك سوى محاذاة التضمين مع الموضع العلوي .container واليسار من خلال position: absolute ، اضبط كلا بعدي التضمين على 100٪ بحيث "تملأ padding-bottom .container .container نسبة.

شاهد عناصر الارتفاع الديناميكي للقلم 3 بواسطة Rico Mossesgeld (ricotheque) على CodePen.

position: relative iframe .container padding-bottom الجديدة هي فقط ارتفاع نسبة العرض إلى الارتفاع مقسومًا على عرضها ، مضروبًا في 100. على سبيل المثال ، إذا كانت نسبة العرض إلى الارتفاع لتضمين الفيديو هي 16: 9 ، فيجب أن تكون نسبة المساحة المتروكة 9 مقسومة على 16 (.5625) ومضروبة في 100 (56.25).

4. عناصر العرض الديناميكي

المشكلة: الحفاظ على عرض عنصر HTML متناسبًا مع ارتفاعه.

الحل: استخدم حجم الخط كأساس لأبعاد العنصر.

الآن ، ماذا عن العكس ، أو الحاويات التي يتغير عرضها حسب ارتفاعها؟ هذه المرة ، font-size للإنقاذ. تذكر أن العرض والارتفاع يمكن أن يكونا em s ، مما يعني أنهما يمكن أن يكونا نسبة font-size العنصر.

سيكون العنصر font-size 40 بكسل وعرضه 2em وارتفاعه 1em 80 بكسل (40 × 2) عرضًا و 40 بكسل (40 × 1) ارتفاعًا.

شاهد عناصر العرض الديناميكي للقلم بقلم ريكو موسيسجيلد (ricotheque) على CodePen.

هل تريد تغيير ارتفاع .container ؟ تغيير حجم الخط.

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

 var container = document.querySelector( '.container' ); container.style.height = yourDesiredHeight + 'px'; container.style.width = yourDesiredHeight * yourDesiredRatio + 'px';

ل:

 document.querySelector( '.container' ).style.fontSize = yourDesiredHeight + 'px';

5. التوسيط العمودي للمحتوى الديناميكي

المشكلة: الاحتفاظ بعنصر HTML (بارتفاع غير معروف) في الوسط عموديًا داخل عنصر آخر.

الحل: اضبط العنصر الخارجي المراد display: table ، ثم حوّل العنصر الداخلي إلى table-cell CSS. أو فقط استخدم CSS Flexbox.

من الممكن توسيط سطر واحد عموديًا line-height :

شاهد التمركز الرأسي للقلم للمحتوى الديناميكي 1 بواسطة Rico Mossesgeld (ricotheque) على CodePen.

بالنسبة إلى سطور متعددة من النص أو المحتوى غير النصي ، فإن جداول CSS هي الإجابة. عيّن عرض .container على table ، ثم استخدم display: table-cell vertical-align: middle .text

شاهد التمركز الرأسي للقلم للمحتوى الديناميكي 2 بواسطة Rico Mossesgeld (ricotheque) على CodePen.

فكر في خدعة CSS هذه على أنها المكافئ الرأسي margin: 0 auto . يعد Flexbox الخاص بـ CSS3 بديلاً رائعًا لهذه التقنية إذا كان دعم عربات الأطفال في Internet Explorer مقبولاً:

شاهد التمركز الرأسي للقلم للمحتوى الديناميكي 3 بواسطة Rico Mossesgeld (ricotheque) على CodePen.

6. أعمدة من نفس الارتفاع

المشكلة: إبقاء الأعمدة بنفس الارتفاع.

الحل: لكل عمود ، استخدم قيمة كبيرة margin-bottom ، وقم بإلغاء ذلك باستخدام مساحة padding-bottom متساوية. تعمل جداول CSS و Flexbox أيضًا.

باستخدام float أو display: inline-block ، من الممكن إنشاء أعمدة جنبًا إلى جنب من خلال CSS.

شاهد أعمدة القلم ذات الارتفاع نفسه 1 بواسطة Rico Mossesgeld (ricotheque) على CodePen.

لاحظ استخدام box-sizing: border-box لحجم .cols بشكل صحيح. راجع تحجيم عنصر HTML المتسق أعلاه.

لا تنخفض حدود العمود الأول والأخير ؛ لا تتطابق مع ارتفاع العمود الثاني الأطول. لإصلاح ذلك ، ما عليك سوى إضافة overflow: hidden إلى .row . ثم قم بتعيين margin-bottom لكل من .col على 99999 بكسل وحافة padding-bottom إلى 100009 بكسل (99999 بكسل + المساحة المتروكة 10 بكسل المطبقة على الجوانب الأخرى لـ .col ).

شاهد أعمدة القلم ذات الارتفاع نفسه 2 بواسطة Rico Mossesgeld (ricotheque) على CodePen.

البديل الأكثر مباشرة هو Flexbox. مرة أخرى ، استخدم هذا فقط إذا لم يكن دعم Internet Explorer ضروريًا.

شاهد أعمدة القلم ذات الارتفاع نفسه 3 بواسطة Rico Mossesgeld (ricotheque) على CodePen.

بديل آخر مع دعم أفضل للمتصفح: جداول CSS (بدون vertical-align: middle ).

شاهد أعمدة القلم ذات الارتفاع نفسه 4 بواسطة Rico Mossesgeld (ricotheque) على CodePen.

7. تجاوز منطقة الجزاء

المشكلة: المربعات والخطوط المستقيمة مبتذلة للغاية.

الحل: استخدم transform: rotate(x) ، أو border-radius .

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

شاهد القلم Going Beyond the Box 1 بواسطة Rico Mossesgeld (ricotheque) على CodePen.

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

شاهد القلم Going Beyond the Box 2 بواسطة Rico Mossesgeld (ricotheque) على CodePen.

هناك الكثير مما يحدث هنا:

يتم التحكم في ارتفاع كل جزء بواسطة. جزء-حاوية. يتأكد الهامش السفلي السالب من تكدس الأجزاء بشكل مريح.

• .pane-background و .mask-box الخاص به .image حفيده على position: absolute . كل عنصر له قيم مختلفة ، top ، left ، bottom ، right . يؤدي هذا إلى التخلص من أي مسافات تم إنشاؤها بواسطة التدويرات المفصلة أدناه.
• .mask-box استدارة 2 درجة (عكس اتجاه عقارب الساعة).
• . الصورة استدارة -2 درجة لمواجهة دوران .image .mask-box 's.
• يتم إخفاء تجاوز .mask-box بحيث يقوم الجانبان العلوي والسفلي المستديران بقص عنصر .image .

في ملاحظة ذات صلة ، يعد تحويل الصورة إلى دائرة أو بيضاوي أمرًا بسيطًا للغاية. ما عليك سوى تطبيق border-radius: 100% على عنصر img .

شاهد القلم Going Beyond the Box 3 بواسطة Rico Mossesgeld (ricotheque) على CodePen.

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

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

8. الوضع الليلي

المشكلة: تنفيذ الوضع الليلي دون إنشاء ورقة أنماط جديدة.

الحل: استخدم مرشحات CSS.

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

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

شاهد وضع القلم الليلي 1 بواسطة ريكو موسيسجيلد (ricotheque) على CodePen.

يؤدي استخدام هذا المرشح على نص أسود وخلفية بيضاء إلى محاكاة الوضع الليلي. !important يضمن أن هذه الألوان الجديدة تتجاوز أي أنماط موجودة.

شاهد القلم الليلي 2 من ريكو موسيسجيلد (ricotheque) على CodePen.

لسوء الحظ ، تبدو الصورة غريبة ، لأن ألوانها كانت مقلوبة مع كل شيء آخر. والخبر السار هو أنه يمكن تطبيق عدة مرشحات في نفس الوقت. تؤدي إضافة مرشح hue-rotate إلى تبديل الصور والمحتويات المرئية الأخرى إلى وضعها الطبيعي:

شاهد Pen Night Mode 3 بواسطة Rico Mossesgeld (ricotheque) على CodePen.

لماذا هذا العمل؟ يخلق hue-rotate(180deg) نفس التأثير كما فعل invert(1) . إليك عرض توضيحي لكيفية عمل CSS في الوضع الليلي عند التبديل من خلال زر يعمل بنظام JavaScript.

حقق أقصى استفادة من CSS

ما لم يتغير المتصفح أو كيفية إنشاء مواقع الويب بشكل كبير في المستقبل ، ستظل المعرفة الجيدة بـ CSS مهارة أساسية في مجال تطوير الويب.

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

أخبرنا إذا كان لديك أي خدعة CSS تجدها ممتعة ومفيدة في قسم التعليقات أدناه.