هنالك ميزات كثيرة في css بتم مناقشتها من قبل منظمة w3 ومن ثم تبدا المتصفحات في دعمها تدريجيا في الاصدارات القادمة في المقال ده هتكلم عن خمسة ميزات اخصها بالذكر لفائدتها الكبيرة

• -- CSS subgrid
• -- Flexbox gaps
• -- The content-visibility property
• -- The contain-intrinsic-size property
• -- The :is and :where pseudo-classes

الخواص ده لسه المتصفحات ما بدعمها بشكلها الكامل استخدم موقع caniuse لاختبار دعم الخاصية علي المتصفحات

1. --

   CSS subgrid #

معلوم ان css grid منذ ظهورها في عام 2017 سهلت للمطورين كثير في جانب التصميم وكان اول مستوي ليها .

اتت خاصية css subgrid في المستوي التاني لخاصية ال css grid

من اسم الخاصية تدل علي الشبكة الداخلية كان المصممين يواجهون اشكالية في محاذاة الشبكة الداخلية للشبكة الخارجية الاب بمعني اذا لديك قائمة وتم اعطائها خواص css grid وفي داخل تلك القائمة هنالك عنصر يحتوي علي قائمة داخلية لكي تتحكم في تلك القائمة الداخلية في محاذاتها استخدم subgrid

مثال عملي

https://codepen.io/trekinbami/pen/dBOeXd

الخاصية سوف تريح المطورين من حسابات كتيرة كانو يجرونها للوصول لشكل جميل لكي تعرف حجم تلك المعاناة القي نظرة علي هذا المقال

نجد ان متي ما تم ذكر css grid ذكرت معه بعض الدوال والوحدات التي لا تذكر الا معه علي سبيل المثال وحدة القياس fr ==> fraction هي وحدة مرنة جد تستخدم في css grid وتكمن قوتها في مرونة حسابها اترككم مع مقال يشرحها من هنا

ولتصفح باقي وحدات الcss الاخري للقياس يمكنكم القي نظرة من هنا

2. --

   Flexbox gaps #

من منا اليوم لا يعرف خاصية flex والسحر الذي اضافته للتصميم فقد كانت طفرة للمطورين في التصميم اليوم تلحق بها ما كان مفقود عندها وكان متوفرة في css grid .

خاصية gap الفجوة كانت متوفرة في css grid ولكن لم تكن متوفرة لدي flex-box وكان المطورين يعالجون تلك المشكلة باضافة الهوامش ولكن تكمن المشكلة ان الهوامش تكون في البداية والنهاية لكل عنصر والمطورين يعالجون ذلك ايضا باخفاء الهوامش من اخر نهاية كل عنصر

خاصية flex-gap مثل خاصية grid-gap تمام

مثال

.flex-container {
  display:flex;
  row-gap: 10px;
  column-gap: 15px;
}

حيث تمثل row-gap الهوامش الافقية وcolumn-gap الهوامش الراسية

ويمكن اختصارهما معا في خاصية واحدة

مثال

.flex-container {
  gap: 10px 15px;
}

3. --

   The content-visibility property #

خاصية جديدة ومصدر قوة في التحكم في عرض المحتوي علي الشاشة بتاخد ثلاثة قيم :

• -- visible مرئي وده الوضع الافتراضي للخاصية
• -- hidden مخفي وذلك عندما يتخطي العنصر عرضه داخل الشاشة ام لم يتخطي عرضه
• -- auto تلقائي عندما يتخطي عرضه الشاشة يتم تخطيه وتخطي عرضه

كيف يتم اضافاتها

مثال

article {
  content-visibility: auto;
} 

قد تظن للوهلة انها تقوم بعمل خاصية over-flow ولكن الامر ليس كذلك فمن الاسماء تستطيع ان تبين الفرق فهذه الخاصية للمحتوي وليست للعنصر كما في خاصية over-flow يمكنك ان تري الفرق بمشاهدة هذا المقال

4. --

   The contain-intrinsic-size property #

خاصية حجم العناصر المضمنة العرض والارتفاع هنا انت بتحدد للعنصر ياخذ ارتفاع وعرض محدد

مثال

article {
  content-visibility: auto;
  contain-intrinsic-size: 700px 1000px;
}

5. --

   The :is() and :where() pseudo-classes #

من المحددات الجميلة جدا الهتكون اضافة قوية للcss بحيث تعطيكي قوة قريبة للجافا اسكربت في التحكم في العناصر علي dom

محدد :is() و محدد :where() قريبان من بعض حيث معناهما (حيث) , ولكن يكمن الفرق حيث ان محدد :is() يتمتع بخصوصية اكثر من محدد :where()

وان لاحظتم من عنوانهما انهما من pseudo-classes وليس من pseudo-element حيث هنالك محدادت للعناصر ومحدادت للكلاسات طريقة استخدامها

.my-class p em,
.my-class li em,
.my-class section em {
    // CSS rules
}

بدل تكتب كل هذا يمكنك تقصير الكود هذا باستخدام محدد :is() مع خصوصية اكثر

.my-class :is(p, li, section) em {
  // CSS rules
}

او استخدم محدد :where()

.my-class :where(p, li, section) em {
  // CSS rules
}

كل هذه الخواص وغيرها لم تدعم بالشكل الكامل في المتصفحات لذلك تعذر علي ضرب امثلة عملية فيها ولكن وجب الاشارة اليها لانها مستقبليا ان دعمت بالشكل الكامل سوف تحدث تطور وتسهيل كبير في مجال تصميم وتطوير واجهة المستخدم

ارجو عدم استخدام تلك الخواص في مشاريع حقيقية و الرجوع دائما الي معرفة دعم تلك الخواص للمتصفحات ومن ثم التاكد واستخدمها يمكنكم الاستعانة بموقع caniuse

المصادر

logrocket

dev to

medium

smashingmagazine

developer mozilla

w3