التفاف المحتوى حول مسارات مخصّصة
لفترة طويلة، اضطر مصممو الويب إلى الإنشاء ضمن قيود المستطيل. لا يزال معظم المحتوى على الويب عالقًا في مربعات بسيطة لأن معظم المشاريع الإبداعية التي تعمل في تخطيط غير مستطيل تنتهي بالإحباط. نحن على وشك أن يتغيّر مع طرح أشكال CSS، المتاحة بدءًا من Chrome 37. تسمح أشكال CSS لمصممي الويب بالتفاف المحتوى حول المسارات المخصصة، مثل الدوائر والأشكال البيضاوية والمضلعات، مما يؤدي إلى الاستغناء عن قيود المستطيل.
يمكن تحديد الأشكال يدويًا أو يمكن استنتاجها من الصور.
لنلقِ نظرة على مثال بسيط للغاية.
ربما كنت بارعًا مثلي عندما تطفو لأول مرة صورة بأجزاء شفافة تتوقع أن يلتف المحتوى ويملأ الفجوات، فقط أن تشعر بخيبة أمل بسبب شكل الالتفاف المستطيل الذي يستمر حول العنصر. يمكن استخدام أشكال CSS لحل هذه المشكلة.
<img class="element" src="image.png" />
<p>Lorem ipsum…</p>
<style>
.element{
shape-outside: url(image.png);
shape-image-threshold: 0.5;
float: left;
}
</style>
يطلب بيان CSS shape-outside: url(image.png) من المتصفّح استخراج شكل من الصورة.
تحدد السمة shape-image-threshold الحد الأدنى لمستوى تعتيم وحدات البكسل التي سيتم استخدامها لإنشاء الشكل. ويجب أن تتراوح قيمتها بين 0.0 (شفاف بالكامل) و1.0 (غير شفاف تمامًا). لذلك، تعني shape-image-threshold: 0.5 أنه سيتم استخدام وحدات البكسل ذات التعتيم 50% أو أعلى فقط لإنشاء الشكل.
تُعدّ السمة float هي الأساس هنا. وبالرغم من أن السمة shape-outside تحدد شكل المنطقة التي يلتف حولها المحتوى، لن تظهر تأثيرات الشكل بدون العدد العشري.
تحتوي العناصر على مساحة عائمة على الجانب الآخر من قيمة float الخاصة بها. على سبيل المثال، إذا كان العنصر الذي يحمل صورة فنجان قهوة عائمًا إلى اليسار، سيتم إنشاء المساحة العائمة على يمين الكوب. على الرغم من أنه يمكنك هندسة صورة بها فجوات على كلا الجانبين، فلن يلتف المحتوى إلا حول الشكل على الجانب الآخر المحدد بواسطة خاصية العدد العشري، الأيسر أو الأيمن، وليس كليهما.
في المستقبل، يمكن استخدام shape-outside على العناصر غير المعدَّلة مع إضافة استبعادات CSS في المقدّمة.
إنشاء الأشكال يدويًا
بالإضافة إلى استخراج الأشكال من الصور، يمكنك أيضًا ترميزها يدويًا. يمكنك الاختيار من بين بعض القيم الوظيفية لإنشاء أشكال: circle() وellipse() وinset() وpolygon(). تقبل كل دالة شكل مجموعة من الإحداثيات ويتم إقرانها بمربع مرجعي يؤسس نظام الإحداثيات. مزيد من المعلومات حول مربعات المرجع في وقت قصير
الدالة الدائرة()
الرمز الكامل لقيمة شكل الدائرة هو circle(r at cx cy) حيث يكون r هو نصف قطر الدائرة، بينما cx وcy هما إحداثيات مركز الدائرة على المحور السيني والمحور Y. إحداثيات مركز الدائرة اختيارية. إذا قمت بحذفها، فسيتم استخدام مركز العنصر (تقاطع أقطاره) كإعداد افتراضي.
.element{
shape-outside: circle(50%);
width: 300px;
height: 300px;
float: left;
}
في المثال أعلاه، سيلتف المحتوى حول الجزء الخارجي من مسار دائري. وتحدد الوسيطة المفردة 50% نصف قطر الدائرة، والذي يبلغ في هذه الحالة نصف عرض العنصر أو ارتفاعه. سيؤثر تغيير أبعاد العنصر على نصف قطر شكل الدائرة. هذا مثال أساسي على كيفية استجابة أشكال CSS.
قبل المضي قدمًا، لِنأخذ جانبًا سريعًا: من المهم تذكر أن أشكال CSS تؤثر فقط على شكل المنطقة العائمة حول العنصر. إذا كان العنصر له خلفية، فلن يتم اقتصاصه حسب الشكل. ولتحقيق هذا التأثير، عليك استخدام الخصائص من CSS Masking (الإخفاء في CSS) إما clip-path أو mask-image. تُعد السمة clip-path سهلة الاستخدام لأنّها تتبع العلامة نفسها لأشكال CSS، وبالتالي يمكنك إعادة استخدام القيم.
تستخدم الصور التوضيحية في هذا المستند الاقتصاص لإبراز الشكل ومساعدتك في فهم التأثيرات.
عُد إلى شكل الدائرة.
عند استخدام النسب المئوية لنصف قطر الدائرة، يتم في الواقع احتساب القيمة باستخدام معادلة أكثر تعقيدًا بعض الشيء: sqrt(width^2 + height^2) / sqrt(2). من المفيد فهم ذلك لأنه سيساعدك على تخيل شكل الدائرة الناتج إذا لم تكن أبعاد العنصر متساوية.
يمكن استخدام جميع أنواع وحدات CSS في إحداثيات دوال الشكل - px، em، rem، vw، vh، وهكذا. يمكنك اختيار المنتج الذي يتميز بالمرونة أو الصرامة بما يكفي لاحتياجاتك.
يمكنك ضبط موضع الدائرة من خلال تعيين قيم صريحة لإحداثيات مركزها.
.element{
shape-outside: circle(50% at 0 0);
}
هذا يضع مركز الدائرة عند أصل النظام الإحداثي. ما النظام الإحداثي؟ وهنا نقدّم مربعات مرجعية.
المربعات المرجعية لأشكال CSS
المربع المرجعي هو مربع افتراضي حول العنصر، يؤسس نظام الإحداثيات المستخدم لرسم الشكل ووضعه. يقع أصل النظام الإحداثي في زاويته العلوية اليسرى مع توجيه المحور س إلى اليمين والمحور ص يشير إلى أسفل.
لا تنسَ أنّ shape-outside تغيّر شكل المنطقة العائمة التي سيلف حولها المحتوى. تمتد المساحة العائمة إلى الحواف الخارجية للمربّع التي تحدّدها السمة margin. يسمى هذا الخيار margin-box وهو المربع المرجعي التلقائي للشكل إذا لم يتم ذكر أي منهما صراحةً.
يحتوي تعريفا CSS التاليان على نتائج متطابقة:
.element{
shape-outside: circle(50% at 0 0);
/* identical to: */
shape-outside: circle(50% at 0 0) margin-box;
}
لم نقم بعد بتعيين هامش للعنصر. في هذه المرحلة، من الآمن افتراض أن أصل نظام الإحداثيات ومركز الدائرة يقعان في الزاوية العلوية اليسرى من منطقة محتوى العنصر. يتغير هذا عند تعيين هامش:
.element{
shape-outside: circle(50% at 0 0) margin-box;
margin: 100px;
}
يقع أصل نظام الإحداثيات الآن خارج مساحة محتوى العنصر (100 بكسل لأعلى و100 بكسل لليسار)، كما هو الحال في مركز الدائرة. تزيد أيضًا القيمة المحسوبة لنصف قطر الدائرة لاحتساب السطح المتزايد لنظام الإحداثيات الذي أنشأه المربع المرجعي margin-box.
لا يمكن استخدام أكثر من مربّع مرجعي واحد في كل مرة مع بيان shape-outside. سيؤثر كل مربع مرجعي على الشكل بطريقة مختلفة وأحيانًا خفية. هناك مقالة أخرى تتعمق أكثر وتساعدك في فهم المربعات المرجعية لأشكال CSS.
الدالة ellipse()
تبدو القطع الناقصة مثل الدوائر المضغوطة. يتم تعريفهما بالرمز ellipse(rx ry at cx cy)، حيث يمثّلان rx وry هما نصف قطر القطع الناقص على المحور السيني والمحور Y، بينما يمثِّل cx وcy إحداثيات مركز القطع الناقص.
.element{
shape-outside: ellipse(150px 300px at 50% 50%);
width: 300px;
height: 600px;
}
سيتم حساب قيم النسبة المئوية من أبعاد نظام الإحداثيات. ليست هناك حاجة إلى الرياضيات المضحكة هنا. يمكنك حذف إحداثيات مركز القطع الناقص، وسيتم استنتاجها من مركز النظام الإحداثي.
يمكن أيضًا تحديد نصف القطر على المحورين "س" و"ص" باستخدام الكلمات الرئيسية: ينتج عن farthest-side نصف قطر يساوي المسافة بين مركز القطع الناقص وجانب المربّع المرجعي في أقصى مسافة منه، في حين تشير القيمة closest-side إلى عكس ذلك تمامًا، وهو يستخدم أقصر مسافة بين المركز والجانب الآخر.
.element{
shape-outside: ellipse(closest-side farthest-side at 50% 50%);
/* identical to: */
shape-outside: ellipse(150px 300px at 50% 50%);
width: 300px;
height: 600px;
}
قد يكون هذا مفيدًا عندما تتغير أبعاد العنصر (أو المربع المرجعي) بطرق غير متوقعة، ولكنك تريد أن يتكيف شكل القطع الناقص.
يمكن أيضًا استخدام الكلمات الرئيسية نفسها farthest-side وclosest-side للنطاق الجغرافي في وظيفة الشكل circle().
الدالة Poly()
إذا كانت الدوائر والقطع الناقص محدودة للغاية، فإن دالة شكل المضلّع تفتح عالمًا من الخيارات. التنسيق هو polygon(x1 y1, x2 y2, ...) حيث يتم تحديد أزواج من إحداثيات س ص لكل رأس (نقطة) للمضلّع. الحد الأدنى لعدد الأزواج لتحديد المضلّع هو ثلاثة، مثلث.
.element{
shape-outside: polygon(0 0, 0 300px, 300px 600px);
width: 300px;
height: 600px;
}
يتم وضع الرؤوس على النظام الإحداثي. بالنسبة إلى المضلّعات المتجاوبة، يمكنك استخدام قيم النسب المئوية لبعض الإحداثيات أو جميعها.
.element{
/* polygon responsive to font-size*/
shape-outside: polygon(0 0, 0 100%, 100% 100%);
width: 20em;
height: 40em;
}
هناك معلَمة fill-rule اختيارية مستوردة من SVG ترشد المتصفح بشأن كيفية مراعاة "داخل المضلع" في حال وجود مسارات متقاطعة ذاتيًا أو أشكال مغلقة. يشرح "جوني تريثال" بشكل جيد آلية عمل سمة قاعدة التعبئة بتنسيق SVG. وفي حال عدم تحديد قيمة، سيتم ضبط السمة fill-rule تلقائيًا على nonzero.
.element{
shape-outside: polygon(0 0, 0 100%, 100% 100%);
/* identical to: */
shape-outside: polygon(nonzero, 0 0, 0 100%, 100% 100%);
}
الدالة inset()
تتيح لك دالة الشكل inset() إنشاء أشكال مستطيلة يمكن لف المحتوى حولها. قد يبدو هذا غير بديهيّ مع الأخذ في الاعتبار الافتراض الأولي بأنّ CSS تشكل محتوى ويب مجانيًا من خلال مربّعات بسيطة. قد يكون الأمر جيدًا جدًا. لم أعثر بعد على حالة استخدام لـ inset()، وهي غير قابلة للتحقيق حاليًا باستخدام الأعداد العشرية والهوامش أو باستخدام polygon(). على الرغم من أنّ inset() توفّر تعبيرًا أكثر قابلية للقراءة للأشكال المستطيلة من polygon().
التدوين الكامل لدالة شكل داخلي هو inset(top right bottom left border-radius). إنّ وسيطات الموضع الأربعة الأولى تتم إزاحةها للداخل من حواف العنصر. الوسيطة الأخيرة هي نصف القطر الحدي للشكل المستطيل. إنها اختيارية، لذا يمكنك استبعادها. وهو يتّبع رمز الاختصار border-radius الذي تستخدمه حاليًا في CSS.
.element{
shape-outside: inset(100px 100px 100px 100px);
/* yields a rectangular shape which is 100px inset on all sides */
float: left;
}
إنشاء أشكال من المربعات المرجعية
إذا لم تحدّد دالة شكل للسمة shape-outside، يمكنك السماح للمتصفح باشتقاق شكل من المربّع المرجعي للعنصر. المربّع المرجعي التلقائي هو margin-box. لا شيء غريب حتى الآن، وهذه هي الطريقة التي تعمل بها الأعداد العشرية بالفعل. ولكن باستخدام هذه التقنية، يمكنك إعادة استخدام هندسة أحد العناصر. لنلقِ نظرة على السمة border-radius.
إذا كنت تستخدمه لتدوير زوايا عنصر عائم، فستحصل على تأثير الاقتصاص، ولكن تظل المساحة العائمة مستطيلة. أضِف shape-outside: border-box لالتفاف حول المحيط الذي أنشأه border-radius.
.element{
border-radius: 50%;
shape-outside: border-box;
float: left;
}
بالطبع، يمكنك استخدام جميع المربعات المرجعية بهذه الطريقة. فيما يلي استخدام آخر للأشكال المشتقة - اقتباسات الإزاحة.
يمكن تحقيق تأثير سحب علامة الإزاحة باستخدام خصائص الهامش العائم والهامش فقط. ولكن هذا يتطلب منك وضع عنصر علامة الاقتباس في شجرة HTML في النقطة التي تريد أن يعرضها.
فيما يلي كيفية تحقيق نفس تأثير سحب الاقتباس للإزاحة مع مرونة إضافية:
.pull-quote{
shape-outside: content-box;
margin-top: 200px;
float: left;
}
نُعيِّن صراحةً المربع المرجعي content-box لنظام إحداثيات الشكل. في هذه الحالة، تحدد كمية المحتوى في علامة اقتباس السحب الشكل الذي سيلف حوله المحتوى الخارجي. تُستخدم السمة margin-top هنا لضبط (إزاحة) علامة اقتباس السحب، بغض النظر عن موضعها في شجرة HTML.
هامش الشكل
ستلاحظ أن التفاف المحتوى حول شكل يمكن أن يجعله يحك العنصر بشكل وثيق. يمكنك إضافة مسافة حول الشكل باستخدام السمة shape-margin.
.element{
shape-outside: circle(40%);
shape-margin: 1em;
float: left;
}
التأثير مماثل لما اعتدت عليه عند استخدام السمة margin العادية، ولكن لا يؤثر shape-margin إلا في المساحة المحيطة بالقيمة shape-outside. يضيف تباعدًا حول الشكل فقط إذا كان هناك مجال له في نظام الإحداثيات. لهذا السبب يتم تعيين نصف قطر الدائرة أعلى من المثال على 40% وليس على 50%. فإذا تم ضبط نصف القطر على %50، لشغل الدائرة كل المساحة في نظام الإحداثيات، بدون ترك أي مجال لتأثير shape-margin. لا تنسَ أنّ الشكل يقتصر في النهاية على margin-box للعنصر (العنصر بالإضافة إلى margin المحيط به). وإذا كان الشكل أكبر حجمًا وتجاوزه، فسيتم اقتصاصه إلى margin-box وستحصل على شكل مستطيل.
من المهم معرفة أنّ السمة shape-margin تقبل قيمة موجبة واحدة فقط. ولا يحتوي على رمز ممتد. ما أعلى هامش الشكل للدائرة، على أي حال؟
أشكال متحركة
يمكنك مزج أشكال CSS مع العديد من ميزات CSS الأخرى، مثل الانتقالات والصور المتحركة. على الرغم من ذلك، يجب أن أؤكد أن المستخدمين يجدون الأمر مزعجًا للغاية عندما يتغير تخطيط النص أثناء القراءة. انتبه جيدًا للتجربة إذا قررت لصالح الأشكال المتحركة.
يمكنك إضافة تأثيرات حركية إلى أنصاف الأقطار والوسط للشكلَين circle() وellipse() ما دامت هذه القيم محدّدة في القيم التي يمكن للمتصفّح إضافتها. ويمكن الانتقال من circle(30%) إلى circle(50%). ومع ذلك، فإنّ الرسوم المتحركة بين circle(closest-side) وcircle(farthest-side) ستؤدي إلى اختناق المتصفّح.
.element{
shape-outside: circle(30%);
transition: shape-outside 1s;
float: left;
}
.element:hover{
shape-outside: circle(50%);
}
يمكن تطبيق تأثيرات أكثر تشويقًا عند إنشاء صور متحركة لأشكال polygon()، مع العلم أنّ المضلّع يجب أن يحتوي على عدد الرؤوس نفسه بين حالتَي الحركة. لا يمكن للمتصفّح إضافة عناوين في حال إضافة رؤوس أو إزالتها.
تتمثل إحدى الحيل في إضافة أقصى عدد من الرؤوس التي تحتاجها ووضعها مجمعة معًا في حالة الرسوم المتحركة حيث تريد عددًا أقل من الحواف المتصورة على الشكل.
.element{
/* four vertices (looks like rectangle) */
shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: shape-outside 1s;
}
.element:hover{
/* four vertices, but second and third overlap (looks like triangle) */
shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}
التفاف المحتوى داخل شكل
تضمّنت المسودة الأولية لمواصفات أشكال CSS السمة shape-inside التي أتاحت لك إحاطة المحتوى داخل شكل معيّن. وقد كانت هناك عمليات تنفيذ في Chrome وWebkit لبعض الوقت. مع ذلك، إنّ تضمين محتوى بشكل عشوائي ضمن مسار مخصّص يتطلّب المزيد من الجهد والأبحاث لتغطية جميع السيناريوهات الممكنة وتجنُّب حدوث أخطاء. لهذا السبب، تم تأجيل السمة shape-inside إلى أشكال CSS المستوى 2 وتم سحب عمليات التنفيذ المرتبطة بها.
ومع ذلك، مع بعض الجهد والقليل من الحلول الوسط، لا يزال بإمكانك تحقيق تأثير التفاف المحتوى داخل شكل مخصص. يتمثل الاختراق في استخدام عنصرين عائمين مع shape-outside، في وضعهما على جانبي الحاوية. الحل الوسط هو أنه يجب عليك استخدام عنصر أو عنصرين فارغين لا يحملان أي معنى دلالي، ولكنهما بمثابة دعامات لخلق وهم الشكل بالداخل.
<div>
<div class='left-shape'></div>
<div class='right-shape'></div>
Lorem ipsum...
</div>
يُعدّ وضع عنصرَي الدائرتين .left-shape و.right-shape في أعلى الحاوية مهمًا، لأنّه سيتم تحريكهما إلى اليسار واليمين من أجل إحاطة المحتوى.
.left-shape{
shape-outside: polygon(0 0, ...);
float: left;
width: 50%;
height: 100%;
}
.right-shape{
shape-outside: polygon(50% 0, ...);
float: right;
width: 50%;
height: 100%;
}
يجعل هذا النمط الشريحتين العائمتين تشغل مساحة العنصر بأكمله، لكنّ خصائص shape-outside توفّر مساحة لبقية المحتوى.
إذا لم تكن أشكال CSS متوافقة مع المتصفح، فسيؤدي ذلك إلى تأثيرات مزعجة من خلال دفع كل المحتوى لأسفل. لهذا السبب من المهم استخدام الميزة بطريقة محسَّنة تدريجيًا.
في أمثلة الرسوم المتحركة السابقة في الشكل، ستلاحظ أن تغيير النص يمكن أن يكون مزعجًا. لا تتطلّب جميع حالات الاستخدام شكلاً متحركًا. ولكن يمكنك إضافة تأثيرات حركية إلى خصائص أخرى تتفاعل مع أشكال CSS لإضافة تأثير حيثما كان ذلك منطقيًا.
في عرض Alice in Wonderland التوضيحي لأشكال CSS، استخدمنا موضع التمرير لتغيير الهامش العلوي من المحتوى. يتم ضغط النص بين عنصرين عائمين. أثناء تحركه للأسفل، يجب إعادة التنسيق وفقًا لـ shape-outside من العنصرَين العائمَين. وهذا يعطي انطباعًا بأن النص يتطرق إلى الأسفل ويضيف إلى تجربة سرد القصص. هل الحدود غير مبرّرة؟ لكنه يبدو رائعًا.
نظرًا لأن المتصفح يتم تنفيذ تنسيق النص محليًا، يكون الأداء أفضل من استخدام حل JavaScript. لكن تغيير الهامش العلوي عند التمرير يؤدي إلى تشغيل الكثير من إعادة التخطيط ورسم الأحداث، وقد يقلل ذلك بشكل ملحوظة في الأداء. يُرجى توخي الحذر. مع ذلك، لا يؤدي استخدام أشكال CSS بدون تحريكها إلى تحقيق نتيجة أداء ملموسة.
التحسين التدريجي
ابدأ بافتراض أن المتصفح لا يتوافق مع أشكال CSS واعتمد على ذلك عند اكتشاف هذه الميزة. تُعد Modernizr حلاً جيدًا لرصد الميزات، وهناك اختبار لأشكال CSS في قسم "الاكتشافات غير الأساسية".
توفّر بعض المتصفّحات رصد الميزات في CSS من خلال قاعدة @supports بدون الحاجة إلى مكتبات خارجية. ويتعرّف Google Chrome، المتوافق أيضًا مع أشكال CSS، على القاعدة @supports. إليك الطريقة التي تستخدمها لتحسين ما يلي تدريجيًا:
.element{
/* styles for all browsers */
}
@supports (shape-outside: circle(50%)){
/* styles only for browsers which support CSS Shapes */
.element{
shape-outside: circle(50%);
}
}
كتبت Lea Verou المزيد من المعلومات عن كيفية استخدام قاعدة @supports في CSS.
التوضيح من استبعادات CSS
ما نعرف اليوم باسم "أشكال CSS" كان يُعرف باسم "استبعادات وأشكال CSS" في الأيام الأولى من المواصفات. وقد يبدو التبديل في التسمية فروقًا طفيفًا، ولكنه مهم جدًا في الواقع. تعمل استبعادات CSS، التي أصبحت الآن مواصفات منفصلة، على تفعيل التفاف المحتوى حول العناصر التي يتم وضعها بشكل عشوائي، بدون الحاجة إلى خاصية عائمة. تخيل أنّ المحتوى يلتف حول عنصر له موضع محدد، وهذه حالة استخدام لاستثناءات CSS. تحدد أشكال CSS المسار الذي سيلف فيه المحتوى.
لذا، فإن الأشكال والاستبعادات ليست هي نفسها، لكنها تكمل بعضها البعض. تتوفّر أشكال CSS في المتصفحات حاليًا، في حين لم يتم تنفيذ استثناءات CSS بعد مع تفاعل الأشكال.
أدوات للعمل باستخدام أشكال CSS
يمكنك إنشاء مسارات في أدوات كتابة الصور الكلاسيكية، ولكن لا يعمل أي منها، أثناء كتابة هذا النص، على تصدير البنية المطلوبة لقيم أشكال CSS. حتى لو فعلوا ذلك، فإن العمل على هذا النحو لن يكون عمليًا للغاية.
تم تصميم أشكال CSS لاستخدامها في المتصفح، حيث تتفاعل مع العناصر الأخرى على الصفحة. من المفيد للغاية تصور تأثيرات تعديل الشكل على المحتوى المحيط به. هناك بعض الأدوات لمساعدتك في سير العمل هذا:
الأقواس: تستخدم إضافة "محرر أشكال CSS" للأقواس وضع المعاينة المباشرة لمحرر التعليمات البرمجية لتراكب محرر تفاعلي لتعديل قيم الأشكال.
Google Chrome: تعمل إضافة "محرر أشكال CSS" في Google Chrome على توسيع نطاق أدوات المطوّرين في المتصفح من خلال إضافة عناصر تحكم لإنشاء الأشكال وتعديلها. يضع محررًا تفاعليًا أعلى العنصر المحدد.
يحتوي الفحص في Google Chrome على دعم مضمَّن لإبراز الأشكال. مرِّر مؤشر الماوس فوق عنصر يتضمّن السمة shape-outside وسيضيء الشكل لتوضيح الشكل.
أشكال من الصور: إذا كنت تفضّل إنشاء صور وجعل المتصفّح يستخرج الأشكال منها، كتبت "ريبيكا هاوك" برنامجًا تعليميًا جيدًا لبرنامج Photoshop.
polyfill: Google Chrome هو أول متصفّح رئيسي يشحن أشكال CSS. سيتم دعم هذه الميزة في المستقبل على نظامي التشغيل iOS 8 وSafari 8 من Apple. وقد يستخدمه مورّدون آخرون في المتصفِّح في المستقبل. وحتى ذلك الحين، يتوفّر رمز polyfill لأشكال CSS لتوفير الدعم الأساسي.
الخلاصة
في الويب الذي يوجد فيه المحتوى في الغالب في مربعات بسيطة، توفر أشكال CSS طريقة لإنشاء تخطيط تعبيري، مما يؤدي إلى سدّ فجوة الدقة بين تصميم الويب وتصميم الطباعة. بالطبع، يمكن إساءة استخدام الأشكال وتؤدي إلى تشتيت الانتباه. ولكن، عند تطبيق الشكل بذوق وحكم جيد، يمكن أن تعزز الأشكال عرض المحتوى وتركيز انتباه المستخدم بطريقة فريدة من نوعها.
أتركك مع مجموعة من الأعمال من قبل الآخرين، ومعظمها من المطبوعات، والتي توضح الاستخدامات المثيرة للاهتمام للتخطيط غير المستطيل. آمل أن يلهمك هذا لتجربة أشكال CSS وتجربة أفكار تصميم جديدة.
شكرًا جزيلاً لكل من "بيرل تشن" و"آلان ستيرنز" و"زولتان هورفاث" لمراجعة هذه المقالة وتقديم إحصاءات قيّمة.