إذا قمت بتقسيم تطورات CSS إلى فئات، فقد انتقلنا إلى ما هو أبعد من الأيام التي طلبنا فيها ببساطة نصف القطر الحدودي لنشعر وكأننا نعيش في المستقبل. نحن نعيش حاليًا في لحظة حيث تقدم لنا المنصة الأدوات التي لا تقوم بتعديل الطبقة المرئية فحسب، بل تعيد تعريف كيفية تصميم الواجهات بشكل أساسي. اعتقدت أن عدد الميزات المعلن عنها في عام 2024 لا يمكن تجاوزه. لم أكن مخطئًا بهذه السعادة أبدًا.
إن "CSS Wrapped 2025" الخاص بفريق Chrome ليس مجرد قائمة من الميزات؛ إنه بيان لشبكة ويب ديناميكية أصلية. باعتباري شخصًا أمضى عامين في توثيق هذه التطورات - بدءًا من تعريف عصور "CSS5" إلى تعقيدات أدوات التخطيط الحديثة - أجد نفسي أنظر إلى ختام هذا العام بشعور كبير من الإثارة. نحن نشهد تحولًا نحو "بيئة العمل المُحسّنة" و"تفاعلات الجيل التالي" التي تسمح لنا بالتوقف عن محاربة التعليمات البرمجية والبدء في نحت الواجهات في حالتها الطبيعية.
في هذه المقالة، يمكنك العثور على نظرة شاملة على الميزات البارزة من تقرير Chrome، والتي يتم عرضها من خلال عدسة تجاربي الأخيرة وآمالي لمستقبل النظام الأساسي.
ثورة المكونات: أخيرًا، اختيار أصلي قابل للتخصيص
لسنوات، اعتمدنا على مكتبات جافا سكريبت الثقيلة لتصميم القوائم المنسدلة، وهي "مشكلة عمرها عقود" تمكنت المنصة أخيرًا من حلها. كما شرحت بالتفصيل في تعمقي في تاريخ التحديد القابل للتخصيص (والمقالات ذات الصلة)، كان هذا طريقًا طويلًا يشتمل على واجهة مستخدم مفتوحة، وأسماء متناثرة مثل
تعد الإضافة الرائعة للسماح بمحتوى غني داخل الخيارات، مثل الصور أو الأعلام، أمرًا ممتعًا للغاية. يمكننا إنشاء جميع أنواع التحديدات في الوقت الحاضر:
العرض التوضيحي: لقد قمت بإنشاء عرض توضيحي لـ Poké-adventure يوضح كيف يمكن لعنصر
شاهد القلم A القابل للتخصيص مع الصور الموجودة داخل الخيارات والمحتوى المحدد [متشعب] بواسطة الأداة المساعدة.
العرض التوضيحي: نظرة شاملة على تصميم التحديد باستخدام العناصر الزائفة فقط.
راجع القلم تحديد قابل للتخصيص باستخدام العناصر الزائفة فقط [متفرعة] بواسطة الأداة المساعدة.
العرض التوضيحي: أو يمكنك رفع مستوى الأداء باستخدام العرض التوضيحي لاختيار القائمة باستخدام مجموعات الاختيار.
انظر القلم، قائمة تحديد فعلية مع مجموعات optgroup [متشعبة] بواسطة الأداة المساعدة. تشير هذه الميزة وحدها إلى تحول هائل في كيفية بناء النماذج، مما يقلل من التبعيات والديون الفنية. علامات التمرير وموت دائري جافا سكريبت لقد كان إنشاء دوارات تاريخيًا بمثابة نقطة احتكاك بين المطورين والعملاء. يحبها العملاء، ويخشى المطورون استخدام JavaScript المطلوب لجعلها سهلة الوصول وفعالة. يؤدي وصول العناصر الزائفة ::scroll-marker و ::scroll-button() إلى تغيير هذه الديناميكية بالكامل. تسمح لنا هذه الميزات بإنشاء نقاط تنقل وأزرار تمرير باستخدام CSS فقط، مرتبطة أصلاً بحاوية التمرير. كما كتبت على مدونتي، كان هذا هو الحب من الشريحة الأولى. إن القدرة على إنشاء شريط تمرير كامل الوظائف ويمكن الوصول إليه بدون سطر واحد من JavaScript ليست مريحة فحسب؛ إنه انتصار للأداء. هناك بعض المخاوف المتعلقة بإمكانية الوصول حول هذه الميزة، وعلى الرغم من صحتها، فقد تكون هناك طريقة لنا كمطورين لجعلها تعمل. الشيء الجيد هو أن كل هذه التغييرات في واجهة المستخدم تجعل الأمر أسهل كثيرًا من معالجة DOM المخصصة والسحب حول علامات الأغنية، لكنني أستطرد… يمكننا الآن تجميع العلامات تلقائيًا باستخدام مجموعة علامات التمرير وتصميم الأزرار باستخدام موضع الربط لوضعها في المكان الذي نريده بالضبط.
دائري { تجاوز السعة-x: تلقائي؛ مجموعة علامة التمرير: بعد؛ /* إنشاء حاوية للنقاط */
/* إنشاء الأزرار */ &::زر التمرير (النهاية المضمنة)،&::زر التمرير (البداية المضمنة) { المحتوى: " "؛ الموقف: مطلق؛ /* استخدم موضع الارتساء لتوسيطها */ مرساة الموضع: --carousel; أعلى: مرساة (مركز)؛ }
/* إنشاء العلامات على الأطفال */ شعبة { &::علامة التمرير { المحتوى: " "؛ العرض: 24 بكسل؛ نصف قطر الحدود: 50%؛ المؤشر: المؤشر؛ } /* تمييز العلامة النشطة */ &::علامة التمرير:الهدف الحالي { الخلفية: أبيض؛ } } }
العرض التوضيحي: تجربتي في إنشاء دائري من HTML وCSS تمامًا، باستخدام موضع الارتساء لوضع الأزرار.
راجع Pen Carousel Pure HTML وCSS [متشعب] بواسطة الأداة المساعدة.
العرض التوضيحي: إعادة إنشاء شريط تمرير Webshop باستخدام attr() لسحب صور الخلفية ديناميكيًا إلى العلامات.
شاهد النسخة الجديدة من شريط تمرير Pen Webshop في CSS [متشعب] بواسطة الأداة المساعدة. استعلامات الحالة: الشيء اللزج عالق؟ شيء لاذع قطعت؟ لفترة طويلة، افتقرنا إلى القدرة على معرفة ما إذا كان "الشيء اللاصق عالقًا" أو ما إذا كان "العنصر السريع قد تم قطعه" دون الاعتماد على اختراقات IntersectionObserver. قدم Chrome 133 استعلامات حالة التمرير، مما يسمح لنا بالاستعلام عن هذه الحالات بشكل تعريفي. من خلال تعيين نوع الحاوية: حالة التمرير، يمكننا الآن تصميم الأطفال بناءً على ما إذا كانوا عالقين أو منقطعين أو مكتظين. يعد هذا تحسينًا هائلاً في "نوعية الحياة" كنت أنتظره بفارغ الصبر منذ يوم CSS 2023. لقد تطور كثيرًا منذ أن أصبح بإمكاننا أيضًا رؤية اتجاه التمرير، يا جميل! للحصول على مثال بسيط: يمكننا أخيرًا تطبيق الظل على الرأس فقط عندما يكون ملتصقًا فعليًا بالجزء العلوي من إطار العرض: .حاوية رأس { نوع الحاوية: حالة التمرير؛ الموقف: لزجة. أعلى: 0؛
رأس { الانتقال: سهولة الخروج من صندوق الظل بمقدار 0.5 ثانية؛ /* يتحقق الاستعلام من حالة الحاوية */ @container حالة التمرير (عالقة: أعلى) { ظل الصندوق: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
العرض التوضيحي: رأس ثابت لا يطبق ظلًا إلا عندما يكون عالقًا بالفعل.
راجع رؤوس Pen Sticky مع استعلام حالة التمرير، وتحقق مما إذا كان العنصر اللاصق عالقًا [متشعبًا] بواسطة الأداة المساعدة.
العرض التوضيحي: قائمة ذات طابع Pokémon تستخدم استعلامات حالة التمرير جنبًا إلى جنب مع موضع الارتساء لتحريك إطار فوق الشخصية المقطوعة حاليًا.
راجع استعلام حالة تمرير القلم للتحقق من العنصر الذي تم التقاطه باستخدام CSS، إصدار Pokemon [متشعب] بواسطة الأداة المساعدة. بيئة العمل المحسنة: المنطق في CSS يسلط قسم "بيئة العمل المحسنة" في CSS Wrapped الضوء على الميزات التي تجعل سير العمل لدينا أكثر سهولة. هناك ثلاث ميزات تبرز كتحويل لكيفية كتابة المنطق:
عبارات if() لقد حصلنا أخيرًا على الشروط الشرطية في CSS. تعمل الدالة if() كمشغل ثلاثي لأوراق الأنماط، مما يسمح لنا بتطبيق القيم بناءً على استعلامات الوسائط أو الدعم أو الأنماط المضمّنة. وهذا يقلل من الحاجة إلى كتل @media مطولة لتغييرات خاصية واحدة. @وظيفة الوظائف يمكننا أخيرًا نقل بعض المنطق إلى مكان مختلف، مما ينتج عنه بعض الملفات النظيفة، وهي ميزة حقيقية لجودة الحياة. sibling-index() و sibling-count() تعمل وظائف عد الأشجار هذه على حل مشكلة الرسوم المتحركة المذهلة أو عناصر التصميم بناءً على حجم القائمة. كما اكتشفت في تصميم الأشقاء باستخدام CSS، لم يكن الأمر أسهل من أي وقت مضى، وهذا يلغي الحاجة إلى ترميز الخصائص المخصصة (مثل --index: 1) في HTML الخاص بنا.
مثال: حساب التخطيطات يمكننا الآن كتابة صيغ رياضية موجزة. على سبيل المثال، يصبح ترتيب الرسوم المتحركة للبطاقات التي تدخل الشاشة أمرًا تافهًا: حاوية البطاقة > * { الرسوم المتحركة: كشف مسافة 0.6 ثانية للأمام بسهولة؛ /* لا مزيد من المتغيرات اليدوية --index! */ تأخير الرسوم المتحركة: calc(sibling-index() * 0.1s); }
حتى أنني جربت استخدام هذه الوظائف جنبًا إلى جنب مع علم المثلثات لوضع العناصر في دائرة مثالية دون أي جافا سكريبت.
العرض التوضيحي: رسوم متحركة مذهلة للبطاقة بشكل ديناميكي.
شاهد بطاقات Pen Stagger باستخدام sibling-index() [متشعب] بواسطة الأداة المساعدة.
العرض التوضيحي: وضع العناصر في دائرة مثالية باستخدام فهرس الأخوة وعدد الأخوة وميزة وظيفة CSS الجديدة.
انظر القلم الدائرة التي تستخدم فهرس الأخوة وعدد الأخوة والوظائف [متشعبة] بواسطة الأداة المساعدة. قائمة مهام CSS الخاصة بي: ميزات لا أستطيع الانتظار لتجربتها بينما كنت مشغولاً بنحت التحديدات والانتقالات، فإن تقرير "CSS Wrapped 2025" مليء بأشياء جيدة أخرى لم تتح لي الفرصة لإطلاقها في CodePen بعد. هذه هي أعلى قائمتي لتجاربي القادمة: استعلامات الحاويات الراسية لقد استخدمت CSS Anchor Positioning للأزرار الموجودة في العرض التوضيحي الدائري، ولكن "CSS Wrapped" يسلط الضوء علىتطور هذا: استعلامات الحاوية الراسية. يؤدي هذا إلى حل مشكلة نواجهها جميعًا مع تلميحات الأدوات: إذا قام المتصفح بقلب تلميح الأداة من أعلى إلى أسفل بسبب قيود المساحة، فغالبًا ما يظل "السهم" يشير إلى الاتجاه الخاطئ. باستخدام استعلامات الحاوية المرتبطة (@container مرساة(fallback: flip-block))، يمكننا تصميم العنصر بناءً على الموضع الاحتياطي الذي اختاره المتصفح بالفعل. مجموعات انتقال العرض المتداخلة لقد كانت عرض التحولات بمثابة ثورة، ولكنها جاءت مع مقايضة محددة: فقد قامت بتسوية شجرة العناصر، والتي غالبًا ما تكسر التحويلات ثلاثية الأبعاد أو التجاوز: المقطع. كان لدي دائمًا شعور بأنه يفتقد شيئًا ما، وقد يكون هذا هو الحل. باستخدام مجموعة الانتقال العرضي: الأقرب، يمكننا أخيرًا دمج المجموعات الانتقالية داخل بعضها البعض. يتيح لنا ذلك الحفاظ على تأثيرات القطع أو التدوير ثلاثي الأبعاد أثناء الانتقال - وهو أمر كان مستحيلًا في السابق بسبب رفع العناصر إلى المستوى الأعلى. صورة البطاقة { اسم انتقال العرض: الصورة؛ عرض مجموعة الانتقال: الأقرب؛ /* اجعلها متداخلة! */ }
الطباعة والأشكال أخيرًا، إن خبير بيئة العمل بداخلي متلهف لتجربة Text Box Trim، والذي يعد بإزالة تلك المسافة البيضاء الإضافية المزعجة أعلى وأسفل محتوى النص (البادئة) لتحقيق محاذاة رأسية مثالية في النهاية. وبالنسبة للجانب الإبداعي، فإن شكل الزاوية والدالة Shape() يفتحان تخطيطات غير مستطيلة، مما يسمح بـ "المربعات" والمسارات المعقدة التي تستجيب لمتغيرات CSS. ومع ذلك، لا أستطيع الانتظار حتى أحصل على تصميم مليء بالسنجابيات! مستقبل مفعم بالأمل نحن نشهد عالمًا أصبحت فيه CSS قادرة على التعامل مع التفاعلات المنطقية والحالة والمعقدة التي كانت تنتمي سابقًا إلى JavaScript. تعمل ميزات مثل moveBefore (الحفاظ على حالة DOM لإطارات iframe/مقاطع الفيديو) وattr() (باستخدام أنواع تتجاوز السلاسل للألوان والشبكات) على تعزيز هذا الواقع. في حين أن بعض هذه الميزات تجريبية حاليًا أو خاصة بمتصفح Chrome، إلا أن الزخم لا يمكن إنكاره. يجب أن نأمل في استمرار الدعم عبر جميع المتصفحات من خلال مبادرات مثل Interop لضمان أن تصبح هذه القدرات هي الأساس. ومع ذلك، فإن امتلاك محركات المتصفح لا يقل أهمية عن وجود كل هذه الميزات الرائعة في "Chrome أولاً". يجب مناقشة هذه الميزات الجديدة وتعديلها واختبارها قبل الوصول إلى المتصفحات. إنها لحظة رائعة للدخول في CSS. لم نعد مجرد تصميم للمستندات؛ نحن نقوم بصياغة تطبيقات ديناميكية ومريحة وقوية باستخدام مجموعة أدوات أصلية أقوى من أي وقت مضى. دعونا نمضي قدمًا في هذا العصر الجديد وننشر الكلمة. هذا ملفوف بـ CSS!
