مشروع ⁨Interop 2027⁩: ميزات ⁨CSS⁩ يمكنك استخدامها اليوم

يجري التخطيط لمشروع ⁨Interop 2027⁩ هذه الأيام، ومعظم ميزات ⁨CSS⁩ في قائمة الأمنيات تعمل بالفعل في ⁨Chrome⁩ و⁨Edge⁩. بعضها آمن للنشر اليوم، بشرط أن تبقى الصفحة سليمة من دونه. نمر هنا على خمس ميزات من اختيارات ⁨Josh W. Comeau⁩ العشر، ونذكر وضع كل واحدة، ونقسمها إلى "استخدمها الآن" و"انتظر".

ما هو ⁨Interop⁩، بمثال واحد

⁨Interop⁩ مشروع سنوي تتفق فيه شركات المتصفحات الكبرى (⁨Google⁩ و⁨Apple⁩ و⁨Microsoft⁩ و⁨Mozilla⁩، ومعها ⁨Igalia⁩ و⁨Bocoup⁩) على مجالات تركيز وتعمل عليها معًا. المثال الذي يضربه ⁨Comeau⁩ هو ⁨Subgrid⁩: أطلقه ⁨Firefox⁩ عام 2019، ولم تتحرك بقية المتصفحات لسنوات، ثم أضيف إلى ⁨Interop 2023⁩، وبنهاية ذلك العام صار متاحًا في كل المتصفحات الحديثة. ولعام 2027 أعدّت ⁨Mozilla⁩ تصنيفًا يصوّت فيه المطورون على الميزات التي يريدونها، ويخطط الفريق لاختيار مجالات التركيز بناءً عليه.

سطر دعم واحد يغطي كل ما يلي مما له صفحة على ⁨caniuse⁩. أدوات الدعم في مقال ⁨Comeau⁩، حتى أكتوبر 2026، تقول الشيء نفسه: مدعومة في ⁨Chrome 155⁩ و⁨Edge 154⁩، وغير مدعومة في ⁨Firefox 157⁩ ولا ⁨Safari 27⁩. فالسؤال ليس "هل تعمل في كل مكان؟" بل "ماذا يحدث في المتصفحات التي لا تدعمها؟".

استخدمها اليوم: ⁨corner-shape⁩

تغيّر ⁨corner-shape⁩ طريقة وصل ⁨border-radius⁩ بين ضلعين. بدل ربع الدائرة يمكنك طلب ⁨squircle⁩ أو ⁨bevel⁩ أو ⁨notch⁩ أو ⁨scoop⁩. وعلى خلاف ⁨clip-path⁩، فهي تغيّر صندوق الحد نفسه، فتتبع الحدود والإطار الخارجي والظلال الزاوية الجديدة. يصفها ⁨Comeau⁩ بأنها تحسين تدريجي مثالي: ⁨Firefox⁩ و⁨Safari⁩ يحتفظان ببساطة بالزاوية المستديرة.

.card {
  border-radius: 16px;
  corner-shape: bevel;
}

إن أردت ضبط نصف القطر أولًا، فـمولّد استدارة الحواف يعطيك القيمة، ثم تضيف الشطف فوقها. أما الأشكال التي يجب أن تبدو متطابقة في كل المتصفحات اليوم، فما زالت أداتها أداة ⁨clip-path⁩، مع ما تفرضه على الظلال.

استخدمها اليوم خلف ⁨@supports⁩: ⁨interpolate-size⁩

تسمح ⁨interpolate-size: allow-keywords⁩ بانتقال يبدأ من ⁨height: 0⁩ وينتهي عند ⁨height: auto⁩، وهو الأكورديون الذي زيّفه الجميع بـ⁨JavaScript⁩. يذكر ⁨Comeau⁩ أنها موجودة في ⁨Chrome⁩ منذ 2024، ونصيحته محددة: ضع الانتقال داخل استعلام ⁨@supports⁩، وإلا أضيف تأخير قصير في المتصفحات التي لا تدعمها.

html {
  interpolate-size: allow-keywords;
}

@supports (interpolate-size: allow-keywords) {
  details::details-content {
    height: 0;
    overflow: hidden;
    transition: height 300ms, content-visibility 300ms;
    transition-behavior: allow-discrete;
  }
  details:open::details-content {
    height: auto;
  }
}

استخدمها بحذر: ⁨reading-flow⁩ واستعلامات حالة التمرير

تحل ⁨reading-flow⁩ مشكلة وصول حقيقية. ترتيب التنقل بمفتاح ⁨Tab⁩ يتبع ترتيب ⁨DOM⁩، فالشبكة التي يتغير ترتيبها على الجوال تأخذ مستخدم لوحة المفاتيح عبر العناصر بترتيب لا يطابق الشاشة. القيمة ⁨reading-flow: grid-rows⁩ تجعل التركيز يتبع الصفوف المرئية، و⁨reading-order⁩ يعطي تحكمًا أدق. انشرها، لكن لا تعتمد عليها بعد: في ⁨Firefox⁩ و⁨Safari⁩ ما زال الترتيب هو ترتيب ⁨DOM⁩، فيجب أن يبقى ذلك الترتيب منطقيًا.

استعلامات الحاوية لحالة التمرير تخبر ⁨CSS⁩ متى يلتصق رأس الصفحة ذو ⁨position: sticky⁩، أو هل ما زالت الحاوية قابلة للتمرير لأعلى أو لأسفل. البديل في المتصفحات الأخرى رأس لا يتغير شكله أبدًا، وهذا مقبول غالبًا.

header {
  position: sticky;
  top: 0;
  container-type: scroll-state;
}
@container scroll-state(stuck: top) {
  .header-content { border-bottom: 1px solid; }
}

انتظر: دوال ⁨CSS⁩

تتيح ⁨@function⁩ تعريف دالة ⁨CSS⁩ خاصة بك لها معاملات وقيمة ⁨result⁩، ثم استدعاءها مثل ⁨--gradient-to-transparent(red)⁩. إنها أكثر ما في القائمة إثارة، وأسوأ ما يمكن نشره كتحسين تدريجي، لأن الدالة تنتج غالبًا قيمة يعتمد عليها التصميم. وحيث لا تكون مدعومة، يُهمل التصريح وتعود الخاصية إلى ما قبله. تعلّمها الآن، وأبقها خارج ⁨CSS⁩ الإنتاج حتى تصل إلى أكثر من محرك.

في قائمة ⁨Comeau⁩ خمسة اختيارات أخرى، منها ⁨border-shape⁩، وزخارف الفجوات بالخاصية ⁨rule⁩، والحركات المُطلقة بالتمرير، ودالة ⁨inherit()⁩ المقترحة التي يقول إنها غير منفّذة في أي متصفح بعد.

الخطوة التالية: اختر بطاقة أو أكورديونًا واحدًا في موقعك، وأضف ⁨corner-shape⁩ أو كتلة ⁨interpolate-size⁩، ثم افتحه في ⁨Firefox⁩ أو ⁨Safari⁩ لتتأكد أن شيئًا لم ينكسر. بعدها أضف أصواتك إلى تصنيف ⁨Interop 2027⁩. المصدر: مقال ⁨Josh W. Comeau⁩ عن اختياراته العشر لـ⁨Interop 2027⁩.