الحفر في خاصية العرض: قيمتا العرض

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

في هذه المقالة ، وهي الأولى في سلسلة قصيرة ، سألقي نظرة على الطريقة التي يتم بها تحديد قيم display في مواصفات المستوى 3. هذا تغيير في كيفية تعريفنا display في الإصدارات السابقة من CSS. على الرغم من أنه قد يبدو غير معتاد في البداية بالنسبة لأولئك منا الذين عملوا CSS لسنوات عديدة ، أعتقد أن هذه التغييرات تساعد حقًا في شرح ما يحدث عندما نغير قيمة display على عنصر ما.

عناصر الكتلة والمضمنة

من أول الأشياء التي نعلمها للأشخاص الجدد في CSS هي مفاهيم الكتلة والعناصر المضمنة. سنشرح أن بعض العناصر على الصفحة display: block ولها ميزات معينة بسبب ذلك. يتمددون في الاتجاه الداخلي ، ويشغلون أكبر مساحة متاحة لهم. يقتحمون خطاً جديداً ؛ يمكننا منحهم العرض والارتفاع والهامش وكذلك الحشو ، وستدفع هذه الخصائص العناصر الأخرى على الصفحة بعيدًا عنها.

نعلم أيضًا أن بعض العناصر display: inline . العناصر المضمنة مثل الكلمات في الجملة ؛ لا يكسرون سطرًا جديدًا ، لكن بدلاً من ذلك يحتفظون بحرف مسافة بيضاء بينهما. إذا أضفت الهوامش والمساحة المتروكة ، فسيتم عرض ذلك ولكنه لن يدفع العناصر الأخرى بعيدًا.

يعتبر سلوك عناصر الكتلة والعناصر المضمنة أمرًا أساسيًا لـ CSS وحقيقة أن مستند HTML المرمز بشكل صحيح سيكون قابلاً للقراءة افتراضيًا. يُشار إلى هذا التخطيط باسم "Block and Inline Layout" أو "Normal Flow" لأن هذه هي الطريقة التي تضع بها العناصر نفسها إذا لم نفعل شيئًا آخر لها.

القيم الداخلية والخارجية display

نحن نفهم عناصر الكتلة والعناصر المضمنة ، ولكن ماذا يحدث إذا عرضنا عنصرًا display: grid ؟ هل هذا شيء مختلف تماما؟ إذا نظرنا إلى أحد المكونات التي حددناها display: grid ، من حيث العنصر الأصل في التخطيط ، فإنه يتصرف كعنصر على block level . سيتمدد العنصر وسيشغل مساحة كبيرة في البعد المضمّن كما هو متاح ، وسيبدأ في سطر جديد. إنه يتصرف تمامًا مثل عنصر block من حيث كيفية تصرفه جنبًا إلى جنب مع بقية التخطيط. لم نقول display: block رغم ذلك ، أو هل فعلنا ذلك؟

اتضح أن لدينا. في المستوى 3 من مواصفات العرض ، يتم تحديد قيمة display ككلمتين رئيسيتين. تحدد هذه الكلمات الأساسية القيمة الخارجية للعرض ، والتي ستكون inline أو block وبالتالي تحدد كيف يتصرف العنصر في التخطيط جنبًا إلى جنب مع العناصر الأخرى. كما أنها تحدد القيمة الداخلية للعنصر - أو كيف يتصرف الأبناء المباشرون لهذا العنصر.

هذا يعني أنه عندما تقول display: grid ، فإن ما تقوله حقًا هو display: block grid . أنت تطلب حاوية شبكة على مستوى الكتلة. عنصر يحتوي على جميع سمات الكتلة - يمكنك إعطائه الطول والعرض والهامش والحشو ، وسوف يمتد لملء الحاوية. ومع ذلك ، فقد تم إعطاء أبناء تلك الحاوية القيمة الداخلية grid بحيث يصبحون عناصر شبكة. يتم تحديد سلوك عناصر الشبكة هذه في مواصفات شبكة CSS: تعطينا مواصفات display طريقة لإخبار المتصفح بأن هذه هي طريقة التخطيط التي نريد استخدامها.

أعتقد أن طريقة التفكير هذه في display مفيدة للغاية ؛ يشرح بشكل مباشر ما نقوم به باستخدام طرق التخطيط المختلفة. إذا كنت تريد تحديد display: inline flex ، فماذا تتوقع؟ نأمل أن يكون المربع الذي يتصرف كعنصر مضمن ، مع الأطفال الذين هم عناصر مرنة.

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

نحن نعود دائمًا إلى التدفق الطبيعي

عند التفكير في خصائص العرض الداخلية والخارجية ، قد يكون من المفيد التفكير فيما يحدث إذا لم نتلاعب بقيمة العرض على الإطلاق. إذا قمت بكتابة بعض HTML وعرضه في متصفح ، فإن ما تحصل عليه هو Block and Inline Layout ، أو Normal Flow. يتم عرض العناصر كعناصر block أو inline .

يحتوي المثال أدناه على بعض العلامات التي قمت بتحويلها إلى كائن وسائط ، من خلال جعل عرض div display: flex (الطفلين المباشرين) الآن عناصر مرنة ، وبالتالي أصبحت الصورة الآن في صف واحد مع المحتوى. إذا رأيت في المحتوى ، مع ذلك ، هناك عنوان وفقرة يتم عرضها في التدفق الطبيعي مرة أخرى. أصبح الأطفال المباشرون لوسائل الإعلام عناصر مرنة ؛ يعود أطفالهم إلى التدفق الطبيعي ما لم نغير قيمة العرض على العنصر المرن. الحاوية المرنة نفسها عبارة عن صندوق كتلة ، كما ترى من خلال حقيقة أن الحد يمتد إلى حافة الأصل.

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

شرح flow-root inline-block

من المحتمل أيضًا أن تكون قيمة inline-block مألوفة للكثيرين منا ممن عملوا CSS لفترة من الوقت. هذه القيمة هي طريقة للحصول على بعض سلوك الكتلة على عنصر inline . على سبيل المثال ، يمكن أن يكون لعنصر inline-block عرض وارتفاع. عنصر مع display: inline-block أيضًا بطريقة مثيرة للاهتمام من حيث أنه ينشئ B lock F أو C ontent (BFC).

يقوم BFC ببعض الأشياء المفيدة من حيث التخطيط ، على سبيل المثال ، يحتوي على عدد عائم. لقراءة المزيد عن سياقات تنسيق الكتل بمزيد من التفصيل ، راجع مقالتي السابقة "فهم تخطيط CSS وسياق تنسيق الكتلة." لذلك فإن قول display: inline-block يمنحك مربعًا مضمنًا ينشئ BFC أيضًا.

كما ستكتشف (إذا قرأت المقالة المذكورة أعلاه حول سياق تنسيق الكتلة) ، فهناك قيمة أحدث للعرض والتي تنشئ أيضًا BFC بشكل صريح. هذه هي قيمة flow-root . تنشئ هذه القيمة BFC على كتلة ، بدلاً من عنصر مضمن.

• display: inline-block BFC في مربع مضمن.
• display: flow-root BFC على صندوق كتلة.

ربما تفكر الآن في أن هذا كله مربك بعض الشيء: لماذا لدينا كلمتان رئيسيتان مختلفتان تمامًا هنا ، وماذا حدث لصيغة القيمتين التي كنا نتحدث عنها من قبل؟ يقود هذا الأمر بدقة إلى الشيء التالي الذي أحتاج إلى شرحه حول display ، أي حقيقة أن CSS لها تاريخ نحتاج إلى التعامل معه فيما يتعلق بخاصية display .

القيم القديمة للعرض

توضح مواصفات CSS2 القيم التالية لخاصية display :

• inline
• block
• inline-block
• list-item
• none
• table
• inline-table

تم تعريف الخصائص الداخلية المختلفة للجدول أيضًا مثل table-cell التي لا نتعامل معها في هذه المقالة.

ثم أضفنا إلى هذه بعض القيم للعرض ، لدعم التخطيط المرن والشبكة:

• grid
• inline-grid
• flex
• inline-flex

ملاحظة : تحدد المواصفات أيضًا ruby inline-ruby لدعم نص Ruby والذي يمكنك قراءته في مواصفات Ruby.

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

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

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

لشرح كيفية عمل ذلك ، يمكننا التفكير في حاوية شبكية. في العالم ذي القيمتين ، سننشئ حاوية شبكة على مستوى الكتلة مع:

 .container { display: block grid; }

ومع ذلك ، فإن الكلمة الرئيسية القديمة تعني أن ما يلي يفعل الشيء نفسه:

 .container { display: grid; }

إذا أردنا بدلاً من ذلك حاوية شبكة مضمنة ، في العالم ذي القيمتين ، سنستخدم:

 .container { display: inline grid; }

وفي حالة استخدام القيم القديمة:

 .container { display: inline-grid; }

يمكننا الآن العودة إلى حيث بدأت هذه المحادثة وإلقاء نظرة على display: inline-block . بالنظر إلى الجدول ، يمكنك أن ترى أن هذا مُعرَّف في العالم ذي القيمتين على أنه display: inline flow-root . يتطابق الآن مع display: flow-root الذي سيتم display: block flow-root . القليل من الترتيب والتوضيح لكيفية تعريف هذه الأشياء. إعادة هيكلة CSS ، إذا أردت.

دعم المستعرض لبناء جملة قيمتين

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

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