ازاي تستخدم خواص CSS الحديثة من غير ما تقلق من مشاكل التوافقية (Compatibility)

يا مساء الفل على كل المبرمجين والمطورين. أكيد مريت بالموقف ده قبل كده: شوفت خاصية جديدة في الـ CSS زي الـ Grid أو الـ Subgrid أو حتى الـ Container Queries، واتحمست جداً وعاوز تستخدمها في مشروعك، بس فجأة افتكرت إن في مستخدمين لسه بيفتحوا الموقع من متصفحات قديمة، أو متصفحات مش بتدعم الخاصية دي، فبتبدأ "خناقة" مع نفسك: أستخدم التقنية الحديثة وأخاطر إن الموقع يبوظ عند ناس، ولا أستخدم القديم وأحرم نفسي من التطور؟

النهاردة هنتكلم عن الحل السحري اللي بيخليك تاكل "العنب" (الخواص الجديدة) ومن غير ما "بطنك توجعك" (مشاكل التوافقية)، وهو الـ CSS @supports.

يعني إيه أصلاً @supports؟

الـ @supports دي عبارة عن قاعدة في الـ CSS بتشتغل زي الـ if condition في لغات البرمجة. هي بتسأل المتصفح سؤال بسيط: "يا برنس، أنت بتفهم الخاصية الفلانية دي؟ لو أيوة طبق الكود اللي جوايا، ولو لأ، تجاهلني تماماً". ده بيسمحلك تعمل تراجع تدريجي (Graceful Degradation) أو تحسين تدريجي (Progressive Enhancement)، يعني موقعك يفضل شغال في كل الحالات، بس بيظهر بشكل أحلى وأسرع للناس اللي بتستخدم متصفحات حديثة.

إزاي نكتب كود CSS باستخدام @supports؟

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

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

في المثال ده، المتصفح لو بيدعم الـ Grid هيطبق الـ Layout ده، ولو مش بيدعمه، الكود ده كأنه مش موجود، وده بيخلينا نقدر نكتب كود بديل للمتصفحات القديمة بره القاعدة دي.

إزاي نتعامل مع المتصفحات اللي مش بتدعم الميزة (الـ Fallback)

السؤال المهم دلوقتي: طيب إيه اللي هيحصل للمتصفحات القديمة؟ هنا بنستخدم حاجة اسمها الـ Fallback. بنكتب الستايل الأساسي اللي أي متصفح يقدر يفهمه، وبعدين بنستخدم @supports عشان "نطور" التجربة للناس اللي متصفحها حديث:

/* كود للمتصفحات القديمة */
.box {
  display: block;
  width: 100%;
}

/* كود للمتصفحات الحديثة فقط */
@supports (display: flex) {
  .box {
    display: flex;
    justify-content: center;
  }
}

بالطريقة دي، كل الناس هتشوف المحتوى بشكل سليم، والناس اللي متصفحاتها قوية هتشوف الـ Layout المتطور.

استخدام معاملات الربط (Operators) في @supports

الموضوع مش بس خاصية واحدة، أنت ممكن تستخدم and، or، وحتى not عشان تتحكم في الشروط بشكل أعقد. يعني مثلاً:

• and: عشان تتأكد إن المتصفح بيدعم خاصيتين مع بعض.
• or: عشان تختار لو المتصفح بيدعم خاصية واحدة على الأقل.
• not: عشان تطبق كود معين فقط في حالة إن الخاصية دي "مش" مدعومة.

@supports (display: grid) and (gap: 20px) {
  .wrapper {
    display: grid;
    gap: 20px;
  }
}

نصيحة من أخ لمبرمج زيه

يا صديقي، المجال بيتحرك بسرعة البرق، ومستحيل تكون كل الخواص مدعومة في كل المتصفحات في نفس اللحظة. نصيحتي ليك: ما تخافش تجرب الحاجات الجديدة، استخدم Can I Use عشان تعرف نسبة دعم الخاصية، واستخدم @supports عشان تحمي مشروعك من أي "كراش" (Crash) أو سوء عرض. البرمجة مش بس إن الكود يشتغل، البرمجة إن الكود يشتغل صح لكل الناس.

استمر في التعلم، وجرب دايماً تكتب أكواد مرنة (Flexible Code)، لأن ده الفرق بين المبرمج الهاوي والمبرمج المحترف.