ميشيل باركر مع مقالتي المفضلة على مدونة Sorta: قصيرة وعملية وتترك لك كتلة صلبة قيمة لوقتك. هنا، دخلت في اختصارات الخصائص المنطقية في CSS، لا سيما تلك التي تحدد أطوالًا فقط على محور واحد ، قل فقط محور الكتلة (الرأسي) أو المحور المضمن (الأفقي) فقط.
أقول "كتلة" و "مضمنة" لأنه بقدر ما يتعلق الأمر بالخصائص المنطقية ، يمكن للمحور السيني أن يتصرف مثل المحور الرأسي اعتمادًا على التيار writing-mode
.
لذا ، حيث كان لدينا دائمًا padding
, margin
و border
الاختصارات التي يمكن أن تدعم بناء جملة متعدد القيم ، ولا يسمح لنا أي منها بتعريف الأطوال على محور معين دون أيضًا تحديد طول على المحور الآخر.
فمثلا:
/* This gives us margin on the inline axis */
margin: 0 3rem;
... لكن كان علينا أن نضع المحور الآخر من أجل الوصول إلى هناك. ومع ذلك ، مع الخصائص المنطقية ، لدينا اختصارات إضافية لكل محور مما يعني أنه يمكننا تحديد margin-inline
اختصار للعمل بشكل خاص على المحور المضمن:
margin-inline: 3rem;
تذكر ميشيل اختزال الخاصية المنطقية المفضل لدي بشكل عابر. كم مرة تضع شيئًا على هذا النوع من اللحن:
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
يمكننا إدخال هذه الأسطر الأربعة بـ inset: 0
. أو يمكننا استهداف الكتلة والمحور المضمّن مباشرةً باستخدام inset-block
و inset-inline
، على التوالي.
بينما نتحدث عن الاختصارات ، أود دائمًا أن أضع كلمة تحذير بشأنها عمليات إعادة تعيين CSS "عرضية". واحد فقط من أخطاء CSS الشائعة التي أرتكبها.