نعود إليكم بلمحة سريعة وشاملة لأهم ما فاتكم في عالم تطوير الويب، تحديداً في CSS و HTML. هذه التحديثات ستغير طريقة تفكيرنا في بناء المكونات وتصميم الواجهات الأمامية، وتعد بتقديم أدوات أقوى وأكثر مرونة للمطورين والمصممين على حد سواء.
ميزات CSS تعيد تعريف التصميم والتفاعل
عالم CSS لا يتوقف عن التطور، ومع كل تحديث نرى إمكانيات جديدة تفتح أبواباً للتصميمات الجريئة والوظائف المحسّنة. إليكم بعض أبرز الميزات التي أصبحت متاحة أو قيد التجربة:
رأينا كيف يمكن إنشاء تأثيرات انكسار صور الخلفية المذهلة باستخدام CSS فقط، دون الحاجة لـ JavaScript أو تكرار الصورة، مما يفتح المجال لتصميمات بصرية غنية. أصبح بإمكان المطورين بناء مكونات أكثر قابلية للتخصيص بفضل استعلامات أنماط الحاويات المتقدمة (container style queries) ودالة `attr()`، مما يتيح استجابة المكونات لتصميمها الخاص وليس فقط للحاوية الأبوية.
بات من السهل الآن التعامل مع حالات التمرير المختلفة باستخدام استعلامات `scroll-state()`، مثل `scrollable` و`scrolled` و`snapped` و`stuck`، مما يمكن من بناء واجهات تفاعلية تعتمد على حالة التمرير. لعل إحدى الميزات المثيرة هي القدرة على تحريك شبكات CSS باستخدام تحديد الموضع بالمرساة (anchor positioning). الفكرة هي تثبيت المحتوى بالخلية المقابلة له، وعندما تتغير الشبكة، يتحرك المحتوى معها بسلاسة، رغم وجود مشكلة في دعم Firefox لهذه الميزة.
كذلك، تم استعراض استخدام `@custom-media` مع استعلامات أنماط الحاويات كحل بديل، وكيفية اكتشاف العناصر المتداخلة بـ CSS. وحتى الحدود المخصصة (custom borders) أصبحت ممكنة باستخدام `border-shape` مع `background-clip: border-area` (وهي تتطلب Chrome حالياً). هناك أيضاً حيلة ذكية لتحريك لون خلفية النص المحدد (`::selection`) باستخدام `@property` لجعله قابلاً للتحريك. ولا ننسى الميزة المفيدة `touch-action: manipulation` التي توقف التكبير المزدوج غير المرغوب فيه عند النقر مرتين على الشاشات اللمسية، وهي ميزة قديمة لكنها قليلة الاستخدام.
إضافات وتحسينات HTML للمستقبل
لم يقتصر التطور على CSS، بل شهد HTML أيضاً مجموعة من الميزات الجديدة التي ربما لم تسمع بها من قبل. هذه الإضافات تهدف إلى تبسيط المهام اليومية للمطورين وتحسين تجربة المستخدم. من بين المقترحات المثيرة للاهتمام، سمة `previewsrc` لـ HTML، والتي تهدف إلى توفير صور معاينة للصور التي لم يتم تحميلها بعد، مما يحسن تجربة المستخدم البصرية أثناء التحميل.
مستجدات المتصفحات وتوحيد المعايير
تواصل متصفحات Chrome و Firefox و Safari إصدار تحديثاتها بوتيرة سريعة، وغالباً ما تتضمن هذه الإصدارات ميزات جديدة تصل إلى حالة «Baseline»، مما يعني دعمها عبر المتصفحات الرئيسية. فقد أصبح كل من `alpha()` و`progress()` و`advanced attr()` من ميزات Baseline بدعم من Firefox 155 و Safari 27. كما جلب Safari 27 أيضاً ميزات مثل `revert-rule`، وقيم صور `light-dark()`، و`sizes=auto`، و`3+ color values for color-mix()` (لا يدعمها Chrome حالياً)، و`ariaNotify`، و`stretch`، و`Customizable <select>`، و`:heading`.
قدم Chrome 153 `scroll-axis-lock` ووسمي `<camera>` و`<microphone>`، ولكن لا يوجد دعم من Safari أو Firefox حالياً لهذه الميزات. أيضاً، أضاف Chrome 154 `text-decoration-inset`، و`frame-sizing`، و`scroll-marker-group modes`. بينما أضاف Firefox 157 `at-rule()` و`overscroll-behavior: chain`.
ما الذي يعنيه كل هذا للمطورين والمصممين؟ هذه التحديثات توفر أدوات أقوى وأكثر مرونة لبناء واجهات ويب تفاعلية وجميلة. نرى أن تعلم هذه الميزات سيساعد في إنشاء تجارب مستخدم أفضل وأكثر جاذبية، مع كود أقل وأداء أعلى. الاستفادة من `container queries` واستغلال إمكانيات CSS الجديدة يعني تطوير مكونات قابلة لإعادة الاستخدام تتكيف بذكاء مع سياقها، مما يسرع عملية التطوير ويزيد من جودة المنتج النهائي.
المصدر: css-tricks.com