ميزات CSS الجديدة تنقل تصميم الويب إلى ما بعد المستطيلات

بدأ الاعتماد المستمر منذ 30 عامًا على التخطيط المستطيل في الويب يتصدع. ثلاث ميزات CSS جديدة نسبيًا، وهي الدالة shape() والخاصيتان border-shape وcorner-shape، تمنح المصممين لوحة أوسع لبناء صفحات لم تعد تتكوّن من صناديق متراكمة فوق بعضها.

من SVG إلى shape()

عندما نشر اتحاد شبكة الويب العالمية (World Wide Web Consortium) أول معيار للتخطيط عام 1996، كانت الصفحات تحاكي التصميم المبني على الشبكة في الصحف والمجلات الأكاديمية. كانت محركات المتصفحات فتية، وعتاد الرسومات بدائيًا، وكان إمرار النص داخل مستطيل الخيار الآمن.

كان SVG أول خروج حقيقي عن الصندوقية: إحداثيات رقمية أتاحت رسم منحنيات وخطوط متعرجة وأشكال حرة، لكنه ظل حبيس canvas موضوع داخل الصفحة بينما كان CSS يتحكم في التخطيط. جسرت الدالة path() بين العالمين بتضمين SVG مباشرة داخل CSS، لكنها لم تكن تستجيب لتغيّر حجم الصفحة ولم تفهم المتغيرات أو وحدات القياس في CSS: كان لا بد من كتابة كل إحداثي بالبكسل.

ما الذي تغيّره shape() وborder-shape

shape() مجموعة من الإحداثيات الهندسية التي تصف شكلًا أو مسارًا مطلوبًا، وهي مبنية على صياغة CSS المتجاوبة لا على SVG. وبالاقتران بالخاصية الموجودة clip-path استُخدمت لإنشاء أذيال التذاكر وفقاعات الدردشة وعناصر أخرى غير مستطيلة.

وتطبّق الخاصية border-shape إحداثيات أصلية في CSS محددة داخل shape() على حدود الصفحة نفسها. عرّف الإحداثيات مرة واحدة، فتُرسم الحدود على الصفحة في مرحلة مبكرة من العرض بدل أن تُقص في نهايته. وكتب مطوّر CSS المسمّى Temani Afif، الذي يصف نفسه بأنه هاكر CSS، في درس نُشر على CSS-Tricks: «سيتحول وضع الحدود على أشكال CSS إلى لعبة أطفال».

ولا تقف عروض Afif عند محيط واحد: يمكن للمصممين تقطيع الصفحة بأي شكل، ووضع حدود داخل حدود، وملء المساحة بين الشكل الخارجي والداخلي لصنع قواطع، مثل قلب مفتوح داخل صندوق مربع باستخدام CSS وحده.

corner-shape ودعم المتصفحات

ولمن لا يرغب في كتابة الإحداثيات يدويًا، تقدّم الخاصية المرافقة corner-shape أنماطًا معدّة مسبقًا، معظمها تنويعات على الصندوق المعتاد: حواف مستديرة، وحواف مشطوفة، وفجوات، وتجويفات، وشكل يُعرف باسم «squircle».

وبحسب موقع caniuse.com، تدعم جميع المتصفحات الرئيسية shape() الآن. أما border-shape وcorner-shape فلا يزالان قيد التنفيذ ويُعدّان تجريبيين، مع أن الإصدارات الحالية من Chrome وEdge وOpera تدعم المعيار. ويبقى العمل المتبقي، كما يخلص التقرير، على عاتق المطورين.