بودكاست CSS - 012: الخصائص المنطقية
نمط واجهة المستخدم الشائع حقًا هو تسمية نصية بأيقونة مضمنة داعمة.
يقع الرمز إلى يسار النص مع فجوة صغيرة بين الاثنين،
ويظهر الرمز margin-right
على الرمز.
ولكن هناك مشكلة، لأن هذا لن يعمل إلا عندما يكون اتجاه النص من اليسار إلى اليمين.
في حال تغيّر اتجاه النص من اليمين إلى اليسار، أي الطريقة التي تقرأ بها اللغات مثل اللغة العربية، سيوضع الرمز أمام النص.
كيف يتم احتساب ذلك في CSS؟ تسمح لك الخصائص المنطقية بحل هذه المواقف. من بين العديد من المزايا الأخرى، توفر هذه الإصدارات دعمًا مجانيًا تلقائيًا لنشر المحتوى على نطاق عالمي. إنها تساعدك في بناء واجهة أمامية أكثر مرونة وشمولية.
المصطلحات
تشير الخصائص الفيزيائية لأعلى ويمين وأسفل ويسار إلى الأبعاد المادية لإطار العرض. يمكنك التفكير في هذه مثل وردة بوصلة على الخريطة. من ناحية أخرى، تشير الخصائص المنطقية إلى حواف المربّع من حيث ارتباطها بتدفق المحتوى. وبالتالي، يمكن أن تتغير إذا تغير اتجاه النص أو وضع الكتابة. وهذا تحول كبير عن أنماط الاتجاهات، ويمنحنا المزيد من المرونة عند تصميم واجهاتنا.
حظر التدفق
تدفق الحظر هو الاتجاه الذي يتم فيه وضع قوالب المحتوى. على سبيل المثال، إذا كانت هناك فقرتان، فإن تدفق الحظر هو المكان الذي ستذهب إليه الفقرة الثانية. في مستند باللغة الإنجليزية، يكون تدفق الكتلة من أعلى إلى أسفل. فكر في هذا في سياق فقرات النص التي تتبع بعضها البعض، من أعلى إلى أسفل.
تدفق مضمّن
التدفق المضمّن هو كيفية تدفق النص في جملة.
في مستند باللغة الإنجليزية، يكون التدفق المضمّن من اليسار إلى اليمين.
إذا أردت تغيير لغة المستند في صفحة الويب إلى العربية (<html lang="ar">
)،
سيكون التدفق المضمّن من اليمين إلى اليسار.
يتدفق النص في الاتجاه الذي يحدّده وضع الكتابة في المستند.
يمكنك تغيير اتجاه تنسيق النص باستخدام السمة writing-mode
.
يمكن تطبيق هذا على المستند بأكمله أو على عناصر فردية.
نسبة التدفق
تاريخيًا في CSS، تمكنا فقط من تطبيق خصائص مثل الهامش بالنسبة لاتجاه جوانبها.
على سبيل المثال، يتم تطبيق السمة margin-top
على الجزء العلوي الفعلي من العنصر.
باستخدام الخصائص المنطقية، يصبح margin-top
margin-block-start
.
وهذا يعني أنّه بغض النظر عن اللغة واتجاه النص،
يكون لتدفق الحظر له قواعد هامش مناسبة.
![رسم تخطيطي يعرض جميع الأحجام المختلفة للصندوق والمكان الذي يبدأ فيه كل قسم لتغيير المقاسات وينتهي](https://web.dev/static/learn/css/logical-properties/image/a-diagram-showing-the-di-12ce9bdac4132.png?authuser=6&hl=ar)
مقاسات الشعار
لمنع عنصر ما من تجاوز عرض أو ارتفاع معين، اكتب قاعدة على النحو التالي:
.my-element {
max-width: 150px;
max-height: 100px;
}
المكافئان بالنسبة إلى التدفق هما max-inline-size
وmax-block-size
.
يمكنك أيضًا استخدام min-block-size
وmin-inline-size
بدلاً من min-height
وmin-width
.
باستخدام الخصائص المنطقية، ستبدو قاعدة الحد الأقصى للعرض والارتفاع كما يلي:
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
البداية والنهاية
بدلاً من استخدام اتجاهات مثل أعلى ويمين وأسفل ويسار، استخدم البداية والنهاية. يمنحك هذا الحقل بداية الحظر والنهاية المضمنة ونهاية الحظر والبداية المضمنة. تتيح لك هذه الإعدادات تطبيق خصائص CSS التي تستجيب لتغييرات وضع الكتابة.
على سبيل المثال، لمحاذاة النص إلى اليسار، يمكنك استخدام CSS التالية:
p {
text-align: right;
}
إذا كان هدفك ليس المحاذاة مع اليمين المادي،
ولكن مع بداية اتجاه القراءة،
فلن يكون ذلك مفيدًا.
باستخدام القيم المنطقية، هناك قيم start
وend
أكثر فائدة يتم ربطها باتجاه النص.
تبدو قاعدة محاذاة النص الآن على النحو التالي:
p {
text-align: end;
}
التباعد وتحديد الموضع
إنّ الخصائص المنطقية لكل من margin
وpadding
وinset
تجعل عناصر تحديد الموضع وتحدّد كيفية تفاعل هذه العناصر مع بعضها البعض أسهل وأكثر كفاءة.
لا تزال الخصائص المتعلقة بالهامش والمساحة المتروكة تعيينات مباشرة للاتجاهات،
ولكن الفرق الرئيسي هو أنه عندما يتغير وضع الكتابة، تتغير معه.
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
يؤدي هذا إلى إضافة بعض المساحة العمودية داخل المساحة باستخدام padding
ويدفعها للخارج من اليسار باستخدام margin
.
إنّ السمة top
تنقلها أيضًا إلى أسفل.
باستخدام مكافِئات الخصائص المنطقية، ستبدو على النحو التالي:
.my-element {
padding-block-start: 2em;
padding-block-end: 2em;
margin-inline-start: 2em;
position: relative;
inset-block-start: 0.2em;
}
يؤدي ذلك إلى إضافة بعض inline-space داخل المساحة باستخدام padding
ويدفعه للخارج من inline-start مع margin
.
وتنقلها السمة inset-block
إلى الداخل من بداية الحظر.
إنّ السمة inset-block
ليست الخيار المختصَر الوحيد الذي يضم خصائص منطقية.
يمكن زيادة تكثيف هذه القاعدة،
باستخدام إصدارات مختصرة من خصائص الهامش والمساحة المتروكة.
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
حدود
يمكن أيضًا إضافة border
وborder-radius
باستخدام الخصائص المنطقية.
لإضافة حد في الأسفل وعلى اليمين، مع نصف القطر الأيمن، يمكنك كتابة قاعدة على النحو التالي:
.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}
أو يمكنك استخدام خصائص منطقية مثل ما يلي:
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
تمثّل end-end
في border-end-end-radius
نهاية القطعة والنهاية المضمَّنة.
الوحدات
تجلب الخصائص المنطقية وحدتين جديدتين: vi
وvb
.
تمثّل وحدة vi
1% من حجم إطار العرض في الاتجاه المضمَّن.
الخاصية المكافئة غير المنطقية هي vw
.
تمثّل وحدة vb
1% من إطار العرض في اتجاه الكتل.
الخاصية المكافئة غير المنطقية هي vh
.
سيتم ربط هذه الوحدات دائمًا باتجاه القراءة.
على سبيل المثال، إذا كنت تريد أن يشغل عنصر ما% 80 من المساحة المضمّنة المتاحة لإطار العرض، سيؤدي استخدام وحدة vi
إلى تبديل هذا الحجم تلقائيًا ليصبح من أعلى إلى أسفل إذا كان وضع الكتابة عموديًا.
استخدام الخصائص المنطقية عمليًا
الخصائص المنطقية وأوضاع الكتابة ليست فقط للتدويل. ويمكنك استخدامها لإنشاء واجهة مستخدم أكثر تنوّعًا.
إذا كان لديك مخطط يحتوي على تسميات على المحور س والمحور ص، فقد ترغب في قراءة النص الموجود على التسمية ص عموديًا.
بما أنّ تصنيف المحور "ص" في العرض التوضيحي يحتوي على writing-mode
من vertical-rl
،
يمكنك استخدام قيم margin
نفسها في كلا التصنيفَين.
تنطبق القيمة margin-block-start
على كلا التصنيفين لأن بداية الحظر تقع على يمين المحور "ص" وفي الأعلى للمحور "س".
تكون جوانب بداية الحظر ذات حدود حمراء للتمكن من رؤيتها.
حل المشكلة المتعلقة بالرمز
الآن بعد أن تناولنا الخصائص المنطقية، يمكن تطبيق هذه المعرفة على مشكلة التصميم التي بدأنا بها.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
flex: none;
}
تم تطبيق الهامش على يمين عنصر الرمز.
لكي يكون التباعد بين الرمز والنص متوافقًا مع جميع اتجاهات القراءة،
يجب استخدام السمة margin-inline-end
بدلاً من ذلك.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-inline-end: 0.5em;
flex: none;
}
الآن، بغض النظر عن اتجاه القراءة، ستضع الأيقونة نفسها وتتسع نفسها بشكل مناسب.
التحقّق من استيعابك
اختبر معلوماتك عن الخصائص المنطقية
أثناء الكتابة بيدك، يتحرك معصمك على أي محور منطقي؟
inline
block
تحديد كل ما يمكن أن تستفيد من الخصائص المنطقية
flex-start
وblock-end
وinline-start
block-start
وinline
inline-size
وmax-block-size
border-end-end-radius
أي جانب منطقي من الكلمة تم وضع خط تحته؟