GitHub Actions يضيف خطوات متوازية: وقت أقل داخل الوظيفة نفسها
شرح عربي سريع لميزة تشغيل خطوات GitHub Actions بالتوازي عبر background وparallel: متى تفيد، أين تنتبه، ولماذا لا تلغي الحاجة إلى jobs منفصلة.
أحيانا لا تكون الميزة المهمة في المتصفح زرّا يراه كل المستخدمين، بل دقيقة واحدة يوفرها المطور في كل مرة يطارد فيها كسرا صغيرا في واجهة متجاوبة. هذا هو الجزء اللطيف في Chrome DevTools 150: أدوات CSS صارت أقرب إلى طريقة العمل الفعلية على المكونات، لا إلى قراءة ملف طويل ثم التخمين.
أعلنت Chrome for Developers في 30 يونيو 2026 أن تبويب Styles داخل DevTools حصل على تحرير مباشر لقواعد @container، ودعم كامل لتحرير قواعد @function، وتحسينات لقواعد مثل @counter-style. التغيير ليس استعراضيا؛ هو يجعل تجربة القواعد الحديثة داخل المتصفح أقل اعتمادا على الرجوع المتكرر إلى المحرر ثم إعادة التحميل.
لماذا يهم @container؟
الاستعلامات الحاوية تجعل المكون يتغير حسب حجم الحاوية التي يعيش داخلها، لا حسب عرض نافذة المتصفح فقط. هذا مفيد لبطاقة خبر تظهر مرة في عمود جانبي ضيق ومرة في شبكة عريضة: نفس المكون، لكن سلوك بصري مختلف حسب مكانه.
في السابق كان تعديل شرط مثل width > 700px داخل DevTools تجربة ناقصة نسبيا. الآن تستطيع تعديل اسم الحاوية وشروط الاستعلام مباشرة، فتختبر: هل المشكلة في الشرط؟ في اسم الحاوية؟ أم في قاعدة أخرى تطغى عليها؟
وماذا عن @function؟
قواعد @function في CSS ما زالت تقنية تجريبية وليست مناسبة للاعتماد الواسع بلا فحص دعم المتصفحات. لكنها مهمة لأنها تدفع CSS نحو منطق قابل لإعادة الاستخدام، مثل توليد لون شفاف أو قيمة محسوبة من مدخلات واضحة. وجود تحرير أفضل لها داخل DevTools يعني أن التجريب سيصبح أسرع قبل نقل الفكرة إلى الكود النهائي.
الخلاصة العملية
إذا كنت تبني واجهات حديثة، جرّب DevTools 150 كأداة تفكير لا كأداة فحص فقط. افتح المكون، عدّل شرط @container من تبويب Styles، راقب القواعد غير المؤثرة، ثم انقل النتيجة النظيفة إلى مشروعك. الميزة ليست أنها تكتب CSS بدلا عنك؛ قيمتها أنها تقلل التخمين عندما يصبح CSS نفسه أكثر ذكاء.
المصادر: Chrome for Developers، MDN عن Container Queries، MDN عن @function.
