استكشف مستقبل تصميمات الويب مع خصائص CSS المنطقية المستوى 2. يغطي هذا الدليل الشامل الخصائص الجديدة، والأمثلة العملية، وكيفية بناء مواقع عالمية حقيقية ومتوافقة مع أوضاع الكتابة المختلفة.
خصائص CSS المنطقية المستوى 2: بناء ويب عالمي حقيقي مع دعم محسّن لوضع الكتابة
لعقود من الزمن، بنى مطورو الويب التنسيقات باستخدام مفردات متجذرة في العالم المادي: أعلى، أسفل، يسار، ويمين. كنا نضبط margin-left، وpadding-top، وborder-right. هذا النموذج الذهني خدمنا جيدًا عندما كان الويب وسيطًا يُقرأ من اليسار إلى اليمين ومن الأعلى إلى الأسفل بشكل أساسي. ومع ذلك، الويب عالمي. إنه منصة لجميع اللغات والثقافات، والكثير منها لا يتبع هذا التدفق الاتجاهي البسيط.
لغات مثل العربية والعبرية تُكتب من اليمين إلى اليسار. ويمكن كتابة اليابانية والصينية التقليدية عموديًا، من الأعلى إلى الأسفل ومن اليمين إلى اليسار. إن فرض نموذج CSS مادي يعتمد على الاتجاه من اليسار إلى اليمين على أنظمة الكتابة هذه يؤدي إلى تنسيقات معطوبة، وتجربة مستخدم محبطة، وجبل من التجاوزات البرمجية. وهنا يأتي دور خصائص وقيم CSS المنطقية، التي تمثل نقلة نوعية أساسية من الاتجاهات المادية إلى الاتجاهات المنطقية المرتبطة بتدفق المحتوى. وبينما وضع المستوى 1 حجر الأساس، فإن خصائص CSS المنطقية المستوى 2 تكمل الصورة، موفرة الأدوات التي نحتاجها لبناء واجهات مستخدم عالمية ومتوافقة تمامًا مع وضع الكتابة.
سيأخذك هذا الدليل الشامل في رحلة عميقة لاستكشاف التحسينات التي أتى بها المستوى 2. سنبدأ بمراجعة سريعة للمفاهيم الأساسية، ثم نستكشف الخصائص والقيم الجديدة التي تملأ الفجوات، وأخيرًا، سنضع كل ذلك موضع التنفيذ من خلال بناء مكون يتكيف بسلاسة مع أي وضع كتابة. استعد لتغيير طريقة تفكيرك في تنسيق CSS إلى الأبد.
مراجعة سريعة: المفاهيم الأساسية للخصائص المنطقية (المستوى 1)
قبل أن نتمكن من تقدير الإضافات في المستوى 2، يجب أن يكون لدينا فهم قوي للأساس الذي وضعه المستوى 1. النظام بأكمله مبني على مفهومين رئيسيين: وضع الكتابة وما ينتج عنه من محور رأسي (block) ومحور أفقي (inline).
أوضاع الكتابة الأربعة
تحدد خاصية CSS writing-mode اتجاه تدفق النص. بينما نعتبر غالبًا القيمة الافتراضية أمرًا مسلمًا به، هناك العديد من القيم التي تغير بشكل أساسي كيفية تدفق المحتوى على الصفحة:
- horizontal-tb: هذه هي القيمة الافتراضية لمعظم اللغات الغربية. يتدفق النص أفقيًا (المحور الأفقي) من اليسار إلى اليمين (أو من اليمين إلى اليسار بناءً على الاتجاه)، وتتراكم الأسطر من الأعلى إلى الأسفل (المحور الرأسي).
- vertical-rl: تستخدم في الطباعة التقليدية لشرق آسيا (مثل اليابانية والصينية). يتدفق النص عموديًا من الأعلى إلى الأسفل (المحور الأفقي)، وتتراكم الأسطر من اليمين إلى اليسار (المحور الرأسي).
- vertical-lr: مشابهة لما سبق، ولكن الأسطر تتراكم من اليسار إلى اليمين (المحور الرأسي). أقل شيوعًا، ولكنها تستخدم في بعض السياقات مثل الكتابة المنغولية.
- sidelong-rl / sidelong-lr: هذه لحالات استخدام محددة حيث تريد وضع الحروف على جانبها. وهي أقل شيوعًا في محتوى الويب العام.
المفهوم الجوهري: المحور الرأسي (Block) مقابل المحور الأفقي (Inline)
هذا هو أهم مفهوم يجب استيعابه. في عالم منطقي، نتوقف عن التفكير في "العمودي" و"الأفقي" ونبدأ في التفكير من منظور محوري الـ block والـ inline. يعتمد اتجاههما كليًا على writing-mode.
- المحور الأفقي (Inline Axis) هو الاتجاه الذي يتدفق فيه النص داخل سطر واحد.
- المحور الرأسي (Block Axis) هو الاتجاه الذي تتراكم فيه الأسطر الجديدة.
دعونا نرى كيف يتم ذلك:
- في اللغة الإنجليزية القياسية (writing-mode: horizontal-tb): يمتد المحور الأفقي (inline axis) أفقيًا، ويمتد المحور الرأسي (block axis) عموديًا.
- في اللغة اليابانية التقليدية (writing-mode: vertical-rl): يمتد المحور الأفقي (inline axis) عموديًا، ويمتد المحور الرأسي (block axis) أفقيًا.
لأن هذه المحاور يمكن أن تتبدل، تصبح خصائص مثل width وheight غامضة. هل width هو الحجم على طول المحور الأفقي أم المحور الأفقي (inline)؟ الخصائص المنطقية تحل هذا الغموض. لدينا الآن start وend لكل محور:
- block-start: تعني "الأعلى" في الإنجليزية، ولكنها تعني "اليمين" في اليابانية العمودية.
- block-end: تعني "الأسفل" في الإنجليزية، ولكنها تعني "اليسار" في اليابانية العمودية.
- inline-start: تعني "اليسار" في الإنجليزية، ولكنها تعني "الأعلى" في اليابانية العمودية.
- inline-end: تعني "اليمين" في الإنجليزية، ولكنها تعني "الأسفل" في اليابانية العمودية.
ربط الخصائص المادية بالمنطقية (المستوى 1)
قدم المستوى 1 مجموعة شاملة من عمليات الربط من الخصائص المادية إلى المنطقية. إليك بعض الأمثلة الرئيسية:
- width ← inline-size
- height ← block-size
- min-width → min-inline-size
- max-height → max-block-size
- margin-left → margin-inline-start
- margin-right → margin-inline-end
- margin-top → margin-block-start
- margin-bottom → margin-block-end
- padding-left → padding-inline-start
- padding-top → padding-block-start
- border-right → border-inline-end
- border-bottom → border-block-end
- left / right (للتموضع) ← inset-inline-start / inset-inline-end
- top / bottom (للتموضع) ← inset-block-start / inset-block-end
كما قدم لنا المستوى 1 اختصارات مفيدة مثل margin-inline (للبداية والنهاية) وpadding-block (للبداية والنهاية).
أهلاً بكم في المستوى 2: ما الجديد ولماذا هو مهم
بينما كان المستوى 1 خطوة هائلة إلى الأمام، إلا أنه ترك بعض الفجوات الملحوظة. بعض خصائص CSS الأساسية مثل float، وclear، وresize لم يكن لها مكافئات منطقية. علاوة على ذلك، لا يمكن التحكم في خصائص مثل border-radius منطقيًا، مما أجبر المطورين على العودة إلى الخصائص المادية للتصميم الدقيق. هذا يعني أنه يمكنك بناء 90% من التنسيق باستخدام الخصائص المنطقية، ولكنك ستظل بحاجة إلى تجاوزات مادية لأوضاع الكتابة المختلفة، مما يبطل الغرض جزئيًا.
خصائص CSS المنطقية المستوى 2 تعالج هذه العيوب مباشرة. لا يتعلق الأمر بتقديم نظام جديد جذري، بل بإكمال النظام الذي بدأ في المستوى 1. ويحقق ذلك بطريقتين أساسيتين:
- تقديم خصائص وقيم منطقية جديدة لميزات CSS الأقدم التي كانت مادية بطبيعتها (مثل float).
- إضافة ربط للخصائص المنطقية للاختصارات المعقدة التي تم تجاهلها سابقًا (مثل border-radius).
مع المستوى 2، أصبحت رؤية نظام تصميم متوافق تمامًا مع تدفق المحتوى شبه مكتملة، مما يسمح لنا ببناء مكونات معقدة وجميلة وقوية تعمل في كل مكان، للجميع، دون حيل أو تجاوزات.
نظرة معمقة: القيم والخصائص المنطقية الجديدة في المستوى 2
دعنا نستكشف الإضافات الأكثر تأثيرًا التي يجلبها المستوى 2 إلى مجموعة أدوات المطورين لدينا. هذه هي الأدوات التي تملأ الفجوات وتمكّن من تصميم مكونات عالمية حقًا.
Float وClear: الثورة المنطقية
كانت خاصية float حجر الزاوية في تنسيق CSS لسنوات، لكن قيمها، left وright، هي تعريف الاتجاه المادي. إذا قمت بتعويم صورة إلى left فقرة باللغة الإنجليزية، فإنها تبدو صحيحة. ولكن إذا قمت بتبديل اتجاه المستند إلى من اليمين إلى اليسار (RTL) للغة العربية، فإن الصورة الآن على الجانب "الخطأ" من كتلة النص. يجب أن تكون على اليمين، وهي بداية السطر.
يقدم المستوى 2 كلمتين مفتاحيتين جديدتين ومنطقيتين لخاصية float:
- float: inline-start; تقوم بتعويم عنصر إلى بداية الاتجاه الأفقي (inline). في لغات LTR، هذا هو اليسار. في لغات RTL، هذا هو اليمين. في وضع الكتابة vertical-rl، هذا هو الأعلى.
- float: inline-end; تقوم بتعويم عنصر إلى نهاية الاتجاه الأفقي (inline). في LTR، هذا هو اليمين. في RTL، هذا هو اليسار. في vertical-rl، هذا هو الأسفل.
وبالمثل، تحصل خاصية clear، المستخدمة للتحكم في التفاف المحتوى حول العناصر العائمة، على نظيراتها المنطقية:
- clear: inline-start; تزيل التعويم على جانب البداية الأفقي.
- clear: inline-end; تزيل التعويم على جانب النهاية الأفقي.
هذا يغير قواعد اللعبة. يمكنك الآن إنشاء تنسيقات كلاسيكية للصورة مع التفاف النص تتكيف تلقائيًا مع أي اتجاه لغة دون سطر واحد إضافي من CSS.
تحكم محسّن مع خاصية Resize المنطقية
خاصية resize، التي تستخدم بشكل شائع على textarea، تسمح للمستخدمين بتغيير حجم العنصر. قيمها التقليدية هي horizontal، vertical، وboth. ولكن ماذا يعني "horizontal" في وضع الكتابة العمودي؟ لا يزال يعني تغيير الحجم على طول المحور الأفقي المادي، وهو ما قد لا يكون ما يقصده المستخدم أو المصمم. من المرجح أن يرغب المستخدم في تغيير حجم العنصر على طول محوره الأفقي (inline) لجعل الأسطر أطول أو أقصر.
يقدم المستوى 2 قيمًا منطقية لـ resize:
- resize: inline; تسمح بتغيير الحجم على طول المحور الأفقي (inline).
- resize: block; تسمح بتغيير الحجم على طول المحور الرأسي (block).
استخدام resize: block; على textarea باللغة الإنجليزية يسمح للمستخدم بجعلها أطول. استخدامه في وضع الكتابة العمودي يسمح للمستخدم بجعلها أوسع (وهو الاتجاه الرأسي). إنه يعمل ببساطة.
`caption-side`: تموضع منطقي لتسميات الجداول
تحدد خاصية caption-side موضع caption الجدول. كانت القيم القديمة هي top وbottom. مرة أخرى، هذه قيم مادية. إذا كان قصد المصمم هو وضع التسمية "قبل" محتوى الجدول، فإن top تعمل لأوضاع الكتابة الأفقية. ولكن في وضع vertical-rl، تكون "بداية" التدفق الرأسي على اليمين، وليس في الأعلى.
يوفر المستوى 2 الحل المنطقي:
- caption-side: block-start; تضع التسمية في بداية التدفق الرأسي.
- caption-side: block-end; تضع التسمية في نهاية التدفق الرأسي.
`text-align`: قيمة منطقية أساسية
بينما كانت القيم start وend لخاصية text-align موجودة منذ فترة، إلا أنها جزء أساسي من فلسفة الخصائص المنطقية وتستحق التأكيد. استخدام text-align: left; هو خطأ شائع يسبب مشاكل في التنسيق فورًا في اللغات التي تكتب من اليمين إلى اليسار. النهج الصحيح والحديث هو دائمًا استخدام:
- text-align: start; لمحاذاة النص إلى بداية الاتجاه الأفقي.
- text-align: end; لمحاذاة النص إلى نهاية الاتجاه الأفقي.
جوهرة تاج المستوى 2: خاصية `border-radius` المنطقية
ربما تكون الإضافة الأكثر أهمية وقوة في المستوى 2 هي مجموعة الخصائص للتحكم في أنصاف أقطار الحواف (border radii) منطقيًا. في السابق، إذا أردت أن تكون لبطاقة ما زوايا مستديرة في "الأعلى" فقط، كنت ستستخدم border-top-left-radius وborder-top-right-radius. ينهار هذا تمامًا في وضع الكتابة العمودي، حيث تصبح الزوايا "العلوية" الآن هي زوايا start-start وend-start.
يقدم المستوى 2 أربع خصائص طويلة جديدة تتوافق مع الزوايا الأربع للعنصر بطريقة مرتبطة بتدفق المحتوى. اصطلاح التسمية هو border-[block-edge]-[inline-edge]-radius.
- border-start-start-radius: الزاوية التي يلتقي فيها جانبا بداية المحور الرأسي (block-start) وبداية المحور الأفقي (inline-start).
- border-start-end-radius: الزاوية التي يلتقي فيها جانبا بداية المحور الرأسي (block-start) ونهاية المحور الأفقي (inline-end).
- border-end-start-radius: الزاوية التي يلتقي فيها جانبا نهاية المحور الرأسي (block-end) وبداية المحور الأفقي (inline-start).
- border-end-end-radius: الزاوية التي يلتقي فيها جانبا نهاية المحور الرأسي (block-end) ونهاية المحور الأفقي (inline-end).
قد يكون من الصعب تصور هذا في البداية، لذلك دعونا نوضح ذلك لأوضاع الكتابة المختلفة:
ربط `border-radius` في `writing-mode: horizontal-tb` (مثل الإنجليزية)
- border-start-start-radius تُقابل top-left-radius.
- border-start-end-radius تُقابل top-right-radius.
- border-end-start-radius تُقابل bottom-left-radius.
- border-end-end-radius تُقابل bottom-right-radius.
ربط `border-radius` في `writing-mode: horizontal-tb` مع `dir="rtl"` (مثل العربية)
هنا، يتم عكس الاتجاه الأفقي.
- border-start-start-radius تُقابل top-right-radius. (بداية المحور الرأسي هي الأعلى، بداية المحور الأفقي هي اليمين).
- border-start-end-radius تُقابل top-left-radius.
- border-end-start-radius تُقابل bottom-right-radius.
- border-end-end-radius تُقابل bottom-left-radius.
ربط `border-radius` في `writing-mode: vertical-rl` (مثل اليابانية)
هنا، يتم تدوير كلا المحورين.
- border-start-start-radius تُقابل top-right-radius. (بداية المحور الرأسي هي اليمين، بداية المحور الأفقي هي الأعلى).
- border-start-end-radius تُقابل bottom-right-radius.
- border-end-start-radius تُقابل top-left-radius.
- border-end-end-radius تُقابل bottom-left-radius.
باستخدام هذه الخصائص الجديدة، يمكنك تحديد أنصاف أقطار الزوايا التي ترتبط دلاليًا بتدفق المحتوى، وليس بالشاشة المادية. ستكون زاوية "start-start" دائمًا هي الزاوية الصحيحة، بغض النظر عن اللغة أو اتجاه النص.
التنفيذ العملي: بناء مكون جاهز للعالمية
النظرية رائعة، ولكن دعونا نرى كيف يعمل هذا في الممارسة. سنقوم ببناء مكون بطاقة ملف شخصي بسيط، أولاً باستخدام الخصائص المادية القديمة، ثم نعيد هيكلته لاستخدام الخصائص المنطقية الحديثة من المستوى 1 والمستوى 2.
ستحتوي البطاقة على صورة عائمة على جانب واحد، وعنوان، وبعض النصوص، وإطار مزخرف وزوايا مستديرة.
الطريقة "القديمة": بطاقة هشة ذات خصائص مادية
إليك كيف كنا قد نصمم هذه البطاقة قبل بضع سنوات:
/* --- CSS (الخصائص المادية) --- */
.physical-card {
width: 300px;
padding: 20px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-left: 5px solid steelblue;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.physical-card .avatar {
float: left;
width: 80px;
height: 80px;
margin-right: 15px;
}
.physical-card h3 {
margin-top: 0;
text-align: left;
}
في سياق LTR الإنجليزي القياسي، يبدو هذا جيدًا. ولكن إذا وضعنا هذا داخل حاوية بها dir="rtl" أو writing-mode: vertical-rl، فإن التنسيق ينهار. الإطار المزخرف على الجانب الخطأ، الصورة الرمزية على الجانب الخطأ، الهامش غير صحيح، والزوايا المستديرة في غير مكانها.
الطريقة "الجديدة": بطاقة قوية ذات خصائص منطقية
الآن، دعنا نعيد هيكلة نفس المكون باستخدام الخصائص المنطقية. سنستفيد من خصائص المستوى 1 والإضافات الجديدة من المستوى 2.
/* --- CSS (الخصائص المنطقية) --- */
.logical-card {
inline-size: 300px;
padding: 20px; /* اختصار `padding` منطقي بالفعل! */
margin-block-end: 20px;
border: 1px solid #ccc;
border-inline-start: 5px solid darkcyan;
border-start-start-radius: 8px; /* قوة المستوى 2! */
border-end-start-radius: 8px; /* قوة المستوى 2! */
}
.logical-card .avatar {
float: inline-start; /* قوة المستوى 2! */
inline-size: 80px;
block-size: 80px;
margin-inline-end: 15px;
}
.logical-card h3 {
margin-block-start: 0;
text-align: start;
}
الاختبار والتحقق
مع هذا الكود الجديد لـ CSS، يمكنك وضع المكون في أي حاوية، وسوف يتكيف تلقائيًا.
- في سياق LTR: سيبدو مطابقًا للنسخة المادية الأصلية.
- في سياق RTL (dir="rtl"): ستطفو الصورة الرمزية إلى اليمين، وسيكون هامشها على اليسار، وسيكون الإطار المزخرف على اليمين، وسيكون النص محاذيًا للبداية (إلى اليمين). ستكون الزوايا المستديرة بشكل صحيح في أعلى اليمين وأسفل اليمين. إنه يعمل ببساطة.
- في سياق عمودي (writing-mode: vertical-rl): سيكون "عرض" البطاقة (الآن حجمها العمودي inline-size) 300 بكسل. ستطفو الصورة الرمزية إلى "الأعلى" (inline-start) مع هامش في "أسفلها" (inline-end). سيكون الإطار المزخرف على الجانب الأيمن (inline-start)، وستكون الزوايا المستديرة في أعلى اليمين وأعلى اليسار. لقد أعاد المكون توجيه نفسه بالكامل بشكل صحيح دون أي استعلامات وسائط أو تجاوزات.
دعم المتصفحات والحلول البديلة
يبدو كل هذا رائعًا، ولكن ماذا عن دعم المتصفحات؟ الخبر السار هو أن دعم خصائص المستوى 1 المنطقية ممتاز في جميع المتصفحات الحديثة. يمكنك ويجب عليك استخدام خصائص مثل margin-inline-start وpadding-block اليوم.
الدعم لميزات المستوى 2 الأحدث يتحسن بسرعة ولكنه ليس عالميًا بعد. القيم المنطقية لـ float، وclear، وresize مدعومة جيدًا. خصائص border-radius المنطقية هي الأحدث وقد لا تزال خلف علامات الميزات أو في إصدارات المتصفحات الحديثة. كما هو الحال دائمًا، يجب عليك استشارة موارد مثل MDN Web Docs أو CanIUse.com للحصول على أحدث بيانات التوافق.
استراتيجيات التحسين التدريجي
نظرًا لأن CSS مصمم ليكون مرنًا، يمكننا بسهولة توفير حلول بديلة للمتصفحات القديمة. ستضمن الخاصية المتتالية (cascade) أنه إذا لم يفهم المتصفح خاصية منطقية، فسيتجاهلها ببساطة ويستخدم الخاصية المادية المحددة قبلها.
إليك كيف يمكنك كتابة CSS جاهز للحلول البديلة:
.card {
/* حل بديل للمتصفحات القديمة */
border-left: 5px solid darkcyan;
border-top-left-radius: 8px;
/* خاصية منطقية حديثة ستتجاوز الحل البديل */
border-inline-start: 5px solid darkcyan;
border-start-start-radius: 8px;
}
يضمن هذا النهج تجربة أساسية قوية للجميع مع توفير تنسيق محسّن وقابل للتكيف للمستخدمين على المتصفحات الحديثة. بالنسبة للمشاريع التي لا تحتاج إلى دعم أوضاع كتابة متعددة، قد يكون هذا مبالغًا فيه. ولكن لأي تطبيق عالمي أو نظام تصميم أو سمة، فهذه استراتيجية قوية ومستقبلية.
المستقبل منطقي: ما بعد المستوى 2
يعد الانتقال من عقلية مادية إلى عقلية منطقية أحد أهم التحولات في CSS الحديث. إنه يوفق لغة التصميم لدينا مع واقع الويب العالمي المتنوع. إنه ينقلنا بعيدًا عن الحيل الهشة الموجهة للشاشة نحو تصميم مرن وموجه للمحتوى.
هل لا تزال هناك فجوات؟ قليلة. لا تزال القيم المنطقية لخصائص مثل background-position أو التدرجات اللونية قيد المناقشة. ولكن مع إصدار المستوى 2، يمكن الآن إنجاز الغالبية العظمى من مهام التنسيق والتصميم اليومية باستخدام نهج منطقي بحت.
الدعوة إلى العمل للمطورين واضحة: ابدأ في استخدام الخصائص المنطقية بشكل افتراضي. اجعل inline-size خيارك الأول بدلاً من width. استخدم margin-inline بدلاً من تعيين الهوامش اليمنى واليسرى بشكل منفصل. لا يتعلق الأمر فقط بدعم لغات مختلفة؛ بل يتعلق بكتابة CSS أفضل وأكثر مرونة. المكون المبني بالخصائص المنطقية هو بطبيعته أكثر قابلية لإعادة الاستخدام والتكيف، سواء تم استخدامه في تخطيط LTR أو RTL أو عمودي. إنها ببساطة هندسة أفضل.
الخاتمة: احتضن التدفق
خصائص CSS المنطقية المستوى 2 ليست مجرد مجموعة من الميزات الجديدة؛ إنها اكتمال لرؤية. إنها توفر القطع النهائية الحاسمة اللازمة لبناء تنسيقات تحترم التدفق الطبيعي لمحتواها، مهما كان هذا التدفق. من خلال تبني خصائص مثل float: inline-start وborder-start-start-radius، نرتقي بحرفتنا من مجرد تحديد مواضع الصناديق على الشاشة إلى تصميم تجارب ويب عالمية وشاملة ومستقبلية حقًا.
في المرة القادمة التي تبدأ فيها مشروعًا جديدًا أو تبني مكونًا جديدًا، توقف قبل أن تكتب margin-left. اسأل نفسك، "هل أعني اليسار، أم أعني البداية؟" من خلال هذا التحول الذهني البسيط، ستساهم في بناء ويب أكثر قابلية للتكيف وإتاحة للجميع، في كل مكان.