الخصائص المنطقية للاختصارات المفيدة

ميشيل باركر مع مقالتي المفضلة على مدونة 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 الشائعة التي أرتكبها.

رابط مباشر →