ميزات CSS الجديدة للتطلع إليها في عام 2022

فيما يلي بعض تحديثات Cascading Style Sheets التي لن ترغب في تفويتها ، بدءًا من خصائص التمرير المفاجئة غير المعروفة إلى لوحات الألوان الجديدة المذهلة.

ظهرت CSS (Cascading Style Sheets) في عام 1996 وما زالت عنصرًا هامًا ومتطورًا في حزمة تطوير الويب. CSS ، مثل اللغات الحية الأخرى ، تضيف دائمًا ميزات جديدة استجابةً لممارسات العالم الحقيقي. بسبب التطور السريع ، حتى المطورين المتفانين قد يفقدون ميزات جديدة. تحقق من بعض الميزات الأكثر فائدة التي ستأتي إلى CSS في المستقبل القريب.

سوبجريد

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

يُشار إلى تخطيط الشبكة بواسطة العرض: إعلان الشبكة وهو مشابه لـ Flexbox من حيث أنه يسمح لك بتحديد تخطيطات مستطيلة بينما تتحكم أيضًا في شبكتك في بعدين.
وفقًا للبحث ، فإن معظم مطوري CSS على دراية بـ Grid Layout ، ويستخدمه الكثير منا. (لا تنس تجربة ذلك إذا لم تقم بذلك!)

Subgrid هي ميزة جديدة ومفيدة للغاية لوحدة تخطيط الشبكة. تتيح لك ميزة الشبكة الفرعية إنشاء شبكة فرعية ترث تخطيط شبكتها الأصلية.

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

يتوفر Subgrid حاليًا فقط في Firefox 71 والإصدارات الأحدث ، ولكن تم التخطيط له في Safari WebKit و Google Chrome و Microsoft Edge. ستكون الشبكة الفرعية ميزة تخطيط مفيدة للغاية في المستقبل.

لهجة اللون

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

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

القائمة 1: التحكم في ألوان CSS لأزرار الراديو

 <style> input[type="radio"] { accent-color: magenta; } </style> <form action="/foo.bar" > <p> Select your favorite outdoor adventure type </p> <input type="radio" name="type" value="mountain" > <label for="mountain" > Mountain </label><br> <input type="radio" name="type" value="ocean" > <label for="ocean" > Ocean </label><br> <input type="radio" name="type" value="desert" > <label for="desert" > Desert </label> </form>

التمرير المفاجئة

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

تجدر الإشارة إلى أن أكثر من ثلث مستخدمي CSS لا يزالون غير مدركين لالتقاط التمرير المفاجئ.

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

تُظهر القائمة 2 مثالاً بسيطًا عن كيفية التحكم في التمرير المفاجئ على div (انظر أيضًا هذا المثال المباشر).

القائمة 2 هي مثال على الخاطف التمرير البسيط.

 <style> .scroll-container, .scroll-area { max-width: 850px; height: 300px; font-size: 60px; } .scroll-container { overflow: auto ; scroll-snap-type: y mandatory; height: 500px; } .scroll-area { scroll-snap-align: start; } .scroll-container, .scroll-area { margin: 0 auto ; } .scroll-area { display: flex; align-items: center; justify-content: center; color: white; } .scroll-area:nth-of-type(1) { background: IndianRed ; } .scroll-area:nth-of-type(2) { background: Moccasin ; } .scroll-area:nth-of-type(3) { background: thistle; } .scroll-area:nth-of-type(4) { background: seagreen; } </style> <div class="scroll-container" > <div class="scroll-area" > 1 </div> <div class="scroll-area" > 2 </div> <div class="scroll-area" > 3 </div> <div class="scroll-area" > 4 </div> </div>

يتحرك موضع التمرير y في القائمة 3 تلقائيًا إلى العنصر الفرعي بغض النظر عن مكان تحرير حركة التمرير. ويرجع ذلك إلى تعيين خاصية scroll-snap-type الخاصة بحاوية التمرير على y والعناصر الفرعية التي تحتوي على scroll-snap-align: إعلان البدء.

يمكن أيضًا تغيير هذا السلوك. يمكنك ، على سبيل المثال ، تعيين خاصية Scroll-snap-type على التقارب y. يعمل ذلك كما هو متوقع ، ويتم الانجذاب فقط عندما يكون التمرير قريبًا من العنصر.

بالإضافة إلى ذلك ، تتحكم خاصية سلوك التمرير الزائد ذات الصلة في كيفية تصرف حاويات التمرير المتداخل.

خصائص CSS المنطقية

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

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

القائمة 3: الحشو الأيسر والأيمن مع منطق مضمّن

 div { border- inline : 10px dashed seagreen; }

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

يستخدم غالبية المطورين هذه الاختصارات للتعامل مع مشكلات اتجاه النص ووضع الكتابة. في هذه الحالات ، تسمح لك خاصية مثل padding-inline-end باستهداف الحشوة الزائدة بغض النظر عن اتجاه النص.

بشكل أساسي ، يسمح التجريد المضمن والكتل بإنشاء أنماط معممة يمكن تطبيقها على مجموعة متنوعة من المواقف. يمكن العثور على مزيد من المعلومات في CSS Logical Properties and Values.

عمليات البحث في الحاويات

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

لا يوجد تعريف واضح للنحو ، لكنه ربما يشبه القائمة 4.

قائمة الحاويات 4.

 @container (max-width: 650px){ … }

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

ثلاثة أنظمة ألوان جديدة

استخدم ممارسو CSS ألوان RGB و HEX والألوان المسماة لتجميل وإحياء شاشات الجهاز منذ زمن سحيق. تم تقديم إعلان اللون بنمط HSL مؤخرًا. تقدم مواصفات CSS الآن واصفات ألوان جديدة ، وهي hwb و lab و lch.

HWB هو اختصار للتلوين ، البياض ، والسواد. إنها لمسة لطيفة تتميز بسهولة قراءتها - تختار لونًا ثم تضيف الأبيض والأسود. إنه متوافق مع أحدث إصدارات Chrome و Firefox و Safari. (مرجع ميزة Microsoft Edge صامت بشكل غريب عن هذا الموضوع.) لمعرفة المزيد حول HWB ، راجع hwb () - تدوين لوني للبشر؟ إنه ، مثل RGB و HWL ، لديه قناة ألفا للشفافية.

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

أكثر مساحات الألوان نظريًا هي LAB ، وهي مشتقة من نظرية الألوان CIE LAB. يدعي واصف لون المختبر أنه يغطي النطاق الكامل للألوان التي يدركها الإنسان ، وهو ادعاء جريء. إنه ، مثل LCH ، مدعوم حاليًا بواسطة Safari فقط. يمكن العثور على مزيد من المعلومات حول LAB for CSS في وثائق Mozilla CSS.