بدءًا من Chrome 115، هناك قيم متعددة لخاصية عرض CSS. العرض: يصبح المرن عرضًا: كتلة مرنة وعرضًا: تصبح الكتلة عرضًا: تدفق الكتلة. تعتبر القيم الفردية التي تعرفها الآن قديمة ولكن يتم الاحتفاظ بها في المتصفحات للتوافق مع الإصدارات السابقة.

لماذا طال انتظاره؟

باختصار: إنه يغير الطريقة التي يمكننا بها شرح أشياء مثل نموذج الصندوق. لا تزال المواصفات مجرد لقطة من السجل التجاري، مما يعني أن W3C يجمع الخبرات من المنفذين لوضع اللمسات الأخيرة على المعيار. ولذلك، قد يتغير بعضها.

قسمت إعادة العمل نوع العرض إلى قسمين: نوع العرض الخارجي ونوع العرض الداخلي.

يحدد نوع العرض الخارجي كيفية مشاركة الصندوق الرئيسي نفسه في تخطيط التدفق.

يحدد نوع العرض الداخلي كيفية وضع المربعات التابعة له (باستثناء العناصر المستبدلة، فهذا أكثر تعقيدًا بعض الشيء).

وبالتالي فإن العرض: flex يصبح عرض: block flex مما يعني أن نوع العرض الخارجي هو كتلة (يتصرف كعنصر كتلة في الخارج)، ولكن يتم عرض عناصره الفرعية وفقًا للتخطيط المرن.

هذا هو نفس السلوك السابق، ولكن مع هذا التغيير أصبحنا قادرين على الحديث عن تأثير خاصية العرض فيما يتعلق بالعناصر الفرعية والعناصر المحيطة. في رأيي، هذا النموذج العقلي يجعل من السهل إنشاء تخطيطات أكثر قابلية للتنبؤ بها، ومن الأسهل شرح أوضاع التخطيط المختلفة وتأثيراتها.

في الدورات التدريبية أو البرامج التعليمية الأحدث، يجب أن يغطي الشرح الجيد لنموذج الصندوق ليس فقط الهوامش والحدود والفواصل والعرض والارتفاع ولكن أيضًا حجم الصندوق وخاصية العرض.

ما هي القيم الصالحة لخاصية العرض؟

كما ذكرنا سابقًا، أصبحت بعض العقارات القديمة قديمة. هنا جميع الخصائص الصالحة:

لعرض بناء الجملة متعدد القيم: الأنواع الخارجية الصالحة من النوع الخارجي من النوع الداخلي هي block، inline، وrun-in. أنواع العرض الداخلي الصالحة هي flow، flow-root، table، flex، grid، و روبي.

توجد أيضًا قيم فردية صالحة: list-item، contents، وnone.

علاوة على ذلك، يحتوي CSS على بعض قيم العرض الداخلية التي تظل صالحة. سيتم حساب هذه القيم عند استخدام أنواع عرض الجدول أو روبي.

المجموعات التالية أصبحت الآن قديمة: inline-block، inline-table، inline-flex، و inline-grid . ويمكن استبدالها بمكافئاتها متعددة القيم، على سبيل المثال: العرض: inline flex.

يتم دعم القيم المتعددة في الإصدارات الحديثة من المتصفحات الحديثة: https://caniuse.com/mdn-css_properties_display_multi-keyword_values

يمكن استخدام قيم الكلمات الرئيسية المتعددة لخاصية العرض.

هذا كل ما لدي أيها الناس!

شكرا جزيلا لقراءتك!