الملاحظات المطلوبة: كيف يمكننا تعريف بناء CSS؟

Rachel Andrew

Ian Kilpatrick

Tab Atkins-Bittner

تاريخ النشر: 19 أيلول (سبتمبر) 2024

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

لاختبار افتراضاتنا، عملنا على بعض الأمثلة لعرض كيفية عمل ميزة "عرض المحتوى على شكل شبكة" مع كل إصدار. اطّلِع على الأمثلة الواردة في هذه المشاركة وأرسِل إلينا ملاحظاتك لنتمكّن من اتخاذ قرار بشأن هذه الميزة ومواصلة العمل عليها.

لا يتناول هذا المنشور جميع حالات الاستخدام المحتملة، ولكن من الواضح أنّ فصل تنسيق "المرفقات الرأسية" عن تنسيق "شبكة" لن يؤدي إلى نقص وظائف الميزة. في الواقع، قد يكون العكس صحيحًا. كما سترى في هذه المشاركة، يوفّر الإصدار display: masonry فرصًا جديدة وبنية أبسط. بالإضافة إلى ذلك، أعرب العديد من المطوّرين عن قلقهم بشأن احتمال أن يؤدي إعادة ترتيب العناصر باستخدام تنسيق "المرفق" إلى حدوث مشاكل في تسهيل الاستخدام. ويتم أيضًا معالجة هذه المشكلة لكلا الإصدارَين من الصياغة، من خلال السمة reading-flow المقترَحة.

تنسيق أساسي للبناء

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

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

باستخدام display: masonry

لإنشاء تنسيق عرض مُجمّع، استخدِم القيمة masonry لسمة display. يؤدي ذلك إلى إنشاء تنسيق مُجمّع باستخدام مسارات الأعمدة التي تحدّدها (أو يتم تحديدها حسب المحتوى) وتنسيق مُجمّع في المحور الآخر. يتم عرض العنصر الأول في بداية كل من المحتوى المُجمَّع والمحتوى المضمّن (لذلك يظهر في أعلى يمين الصفحة باللغة الإنجليزية)، ويتم ترتيب العناصر باتجاه المحتوى المضمّن.

لتحديد الأغاني، استخدِم masonry-template-tracks مع قيم قائمة الأغاني كما هو مُستخدَم في تنسيق شبكة CSS.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(3, 1fr);
  gap: 10px;
}

باستخدام display: grid

لإنشاء تنسيق عرض مُجمّع، عليك أولاً إنشاء تنسيق شبكة باستخدام القيمة grid لخاصية display. حدِّد الأعمدة باستخدام السمة grid-template-columns ، ثمّ امنح grid-template-rows قيمة masonry.

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

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  gap: 10px;
}

نقاط يجب مراعاتها عند الاختيار بين الخيارَين

يتمثل الاختلاف الملحوظ بين هاتين الطريقتَين في أنّ استخدام display: masonry يؤدي إلى عرض المحتوى في شكل مربّعات حتى في حال عدم تحديد أي أغانٍ باستخدام masonry-template-tracks. لذلك، قد يكون display: masonry هو كل ما تحتاجه. ويعود السبب في ذلك إلى أنّ القيمة الأولية لـ masonry-template-tracks هي repeat(auto-areas, auto). ينشئ التنسيق عددًا من المقاطع الصوتية ذات الحجم التلقائي الذي يلائم الحاوية.

التدفق العكسي مع البناء

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

في هذا التنسيق، يتمّ تحديد الأعمدة، ثمّ يتمّ ملء العناصر باللصق من نهاية الكتلة.

باستخدام display: masonry

أنشئ تنسيقًا للعرض على شكل شبكة باستخدام display: masonry، ثم استخدِم masonry-direction مع القيمة column-reverse.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(3, 1fr);
  masonry-direction: column-reverse;
}

باستخدام display: grid

أنشئ تصميمًا مُعدًّا للعرض على الشاشة باستخدام display: grid وgrid-template-rows: masonry. بعد ذلك، استخدِم السمة grid-auto-flow مع القيمة الجديدة row-reverse ل ترتيب العناصر من نهاية الكتلة لحاوية الشبكة.

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  grid-auto-flow: row-reverse;
}

نقاط يجب مراعاتها عند الاختيار بين الخيارَين

يشبه إصدار display: masonry إلى حدٍ كبير طريقة عمل flexbox. غيِّر اتجاه تدفق الأعمدة باستخدام السمة masonry-direction مع قيمة column-reverse.

يستخدم إصدار شبكة CSS grid-auto-flow. وفقًا للتعريف الحالي، سيؤدي استخدام grid-auto-flow: row-reverse وgrid-auto-flow: column-reverse إلى تحقيق أثر مماثل. قد يكون هذا الأمر مربكًا، لأنّك قد تتوقّع أن يفعلوا شيئًا مختلفًا.

ترتيب الصفوف

يمكنك أيضًا تغيير الاتجاه لتحديد الصفوف.

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

باستخدام display: masonry

أنشئ تنسيقًا للعرض على شكل شبكة باستخدام display: masonry، ثم اضبط قيمة masonry-direction على row. ما لم تكن تريد أن يكون لصفوفك حجم محدد لشدَّة العرض، ليس عليك تحديد أيّ حجم للمقاطع الصوتية لأنّ الحجم التلقائي هو auto، وبالتالي سيتم ضبط حجم المقاطع الصوتية وفقًا للمحتوى الذي تحتوي عليه.

.masonry {
  display: masonry;
  masonry-direction: row;
}

باستخدام display: grid

.masonry {
  display: grid;
  grid-template-columns: masonry;
  grid-template-rows: repeat(3, 1fr);
}

نقاط يجب مراعاتها عند الاختيار بين الخيارَين

كما هو الحال مع التدفق العكسي، يعني تغيير إصدار display: masonry من الأعمدة إلى الصفوف تغيير قيمة masonry-direction. في إصدار الشبكة، عليك تبديل قيم السمتَين grid-template-columns و grid-template-rows. أو إذا كنت تستخدم الاختصار، غيِّر ترتيب البنية.

في كلا المثالَين على عملية التبديل، يبدو الإصدار display: masonry أكثر سهولة. هناك خاصية واحدة تتحكّم في التدفق masonry-direction، وهي تأخذ إحدى القيم التالية:

• row
• column
• row-reverse
• column-reverse

بعد ذلك، أضِف أي معلومات قياس مطلوبة إلى masonry-template-tracks، على افتراض أنّ القيمة التلقائية التلقائية ليست هي ما تحتاجه.

في حالة استخدام الشبكة، لإجراء الاتجاه المعاكس، عليك استخدام السمة grid-auto-flow ، ولإجراء صفوف الشاشة، عليك تبديل قيمة السمات grid-template-*. ولا يمكن أيضًا في بنية الشبكة الحالية ترك قيمة محور الشبكة غير محدّدة. يجب دائمًا تحديد سمات grid-template-* على المحور الذي لا يحتوي على قيمة masonry.

ترتيب العناصر

في كلا الإصدارَين، يمكنك تحديد موضع العناصر بوضوح باستخدام مواضع الإعلانات المستندة إلى السطر التي ستكون على دراية بها من تنسيق الشبكة. في كلا الإصدارَين، يمكنك فقط تحديد موضع العناصر في محور الشبكة، وهو المحور الذي يتضمّن مسارات محدّدة مسبقًا، ولا يمكنك تحديد موضع العناصر على المحور الذي يُنشئ تنسيق "عرض الإعلانات على شكل مربّعات".

باستخدام display: masonry

يحدِّد ملف CSS التالي تنسيقًا للعرض على شكل كتل مع أربعة أعمدة. وبالتالي، فإنّ محور الشبكة هو الأعمدة. يتم وضع العنصر الذي يحمل الفئة a من سطر العمود الأول إلى سطر العمود الثالث، ليشمل مقطعَين صوتيَّين بخصائص masonry-track-* الجديدة. ويمكن أيضًا تعريفه على أنّه اختصار لرمز masonry-track: 1 / 3;.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(4, 1fr);
}

.a {
  masonry-track-start: 1;
  masonry-track-end: 3;
}

باستخدام display: grid

يحدِّد ملف CSS التالي تنسيقًا للعرض على شكل كتل مع أربعة أعمدة. وبالتالي، فإنّ محور الشبكة هو الأعمدة. يتم وضع العنصر الذي يحمل الفئة a من سطر العمود الأول إلى سطر العمود الثالث، ليشمل مقطعَين صوتيَّين بخصائص grid-column-*. يمكن أيضًا تعريف هذا الرمز على أنّه اختصار لرمز grid-column: 1 / 3;.

إذا كان محور الشبكة هو الأعمدة، سيتم تجاهل سمات grid-row-*، وإذا كان محور الشبكة هو الصفوف، سيتم تجاهل سمات grid-columns-*.

.masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

.a {
  grid-column-start: 1;
  grid-column-end: 3;
}

يمكنك استخدام الأسطر المُعنوَنة مع كلتا الصيغتَين. تعرض الأمثلة التالية شبكة مع خطّي عمودَين باسم a.

باستخدام display: masonry

يتم تحديد الأسطر المُسمّاة في قيمة قائمة الأغاني masonry-template-tracks. يمكن وضع العنصر بعد أي سطر يحمل الاسم a.

.masonry {
  display: masonry;
  masonry-template-tracks: 100px [a] auto [a] auto 100px;
}

.item {
  masonry-track: a;
}

باستخدام display: grid

يتم تحديد الأسطر المُسمّاة في قيمة قائمة الأغاني grid-template-columns. يتم وضع العنصر بعد السطر الأول الذي يحمل الاسم a. في حال تحديد سمة grid-row، سيتم تجاهلها.

.masonry {
  display: grid;
  grid-template-columns: 100px [a] auto [a] auto 100px;
  grid-template-rows: masonry;
}

.item {
  grid-column: a;
  grid-row: a; /* ignored */
}

يمكنك أيضًا استخدام المناطق المُعنوَنة في كلتا النحوتين. تعرض الأمثلة التالية شبكة تتضمّن ثلاث مسارات باسم "أ" و"ب" و "ج".

باستخدام display: masonry

يتمّ تسمية المقاطع الصوتية على أنّها قيمة masonry-template-areas. وبما أنّه لم يتم تحديد أحجام المقاطع الصوتية، يتم ضبط جميع المقاطع الصوتية الثلاثة تلقائيًا على الحجم auto. يتم وضع العنصر في قناة الإصدار "a".

.masonry {
  display: masonry;
  masonry-template-areas: "a b c";
}

.item {
  masonry-track: a;
}

يعمل هذا الإجراء بالطريقة نفسها سواء كنت تحدّد الصفوف أو الأعمدة، وسيكون الاختلاف الوحيد هو السمة masonry-direction.

باستخدام display: grid

بالنسبة إلى الأعمدة، تكون بنية الجملة متطابقة بشكل أساسي. وبالمثل، بما أنّه لم يتم تحديد أحجام المسارات، يتم ضبط الأحجام الثلاثة تلقائيًا على auto، ولكن لا يزال عليك تحديد صراحةً أنّ محور العرض الآخر هو شاشة مسطّحة:

.masonry {
  display: grid;
  grid-template-areas: "a b c";
  grid-template-rows: masonry;
}

.item {
  grid-column: a;
}

بالنسبة إلى الصفوف، يجب كتابة القيمة بشكل مختلف، لأنّه grid-template-areas يحدِّد في الواقع منطقة ثنائية الأبعاد، ويتم كتابة كل صف كسلسلة منفصلة:

.masonry {
  display: grid;
  grid-template-areas: "a" "b" "c"; /* Note the difference, each row is quoted. */
  grid-template-columns: masonry;
}

.item {
  grid-row: a;
}

نقاط يجب مراعاتها عند الاختيار بين الخيارَين

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

الاختصارات

في هذه المشاركة، تم استخدام الأسماء الطويلة لتوضيح السمات التي يتم استخدامها، ولكن يمكن تعريف إصدارَي display: masonry وdisplay: grid باستخدام الاختصارات.

باستخدام display: masonry

يستخدم الاختصار display: masonry الكلمة الرئيسية masonry. لإنشاء تنسيق الأساس للعرض المربّع، استخدِم ملف CSS التالي:

.masonry {
  display: masonry;
  masonry: repeat(3, 1fr);
}

لإنشاء تخطيط بسيط للصفوف:

.masonry {
  display: masonry;
  masonry: row;
}

لتحديد المقاطع الصوتية وتنسيق يستند إلى الصفوف باستخدام الاختصار:

.masonry {
  display: masonry;
  masonry: repeat(3, 1fr) row;
}

باستخدام display: grid

لإنشاء تنسيق "عرض مسطّح" أساسي باستخدام الاختصار grid:

.masonry {
  display: grid;
  grid: masonry / repeat(3, 1fr);
}

لإنشاء تخطيط بسيط للصفوف:

.masonry {
  display: grid;
  grid: repeat(3, auto) / masonry;
}

ملاحظة: في إصدار الشبكة، عليك دائمًا تحديد المقاطع الصوتية على محور الالتفاف المتعرج. وهذا هو الفرق الرئيسي بين الإصدارَين.

في الأمثلة الأكثر تعقيدًا، يمكن تجميع المزيد من السمات معًا في الاختصار بدون أن يصبح معقدًا للغاية، وذلك لأنّ بنية display:masonry العامة أبسط.

على سبيل المثال، تخيل إنشاء ثلاثة أعمدة باسم "أ" و"ب" و "ج"، تم ملؤها من الأسفل إلى الأعلى.

باستخدام display:masonry

في display: masonry، يمكن ضبط هذه الإعدادات الثلاثة معًا في الاختصار:

.masonry {
  display: masonry;
  masonry: column-reverse "a b c";
}

وبما أنّه يتم ضبط أحجامها تلقائيًا، لا تحتاج إلى تحديد الأحجام، ولكن إذا أردت حجمًا معيّنًا بدلاً من ذلك، يمكن إضافته. على سبيل المثال: masonry: column-reverse 50px 100px 200px "a b c";.

بالإضافة إلى ذلك، يمكن إعادة ترتيب كل مكوّن بحرية، وليس هناك ترتيب محدّد تحتاج إلى تذكُّره. وإذا أردت استخدام الصفوف بدلاً من ذلك، ما عليك سوى تبديل column-reverse بـ row أو row-reverse، وسيظلّ باقي البنية كما هو.

باستخدام display: grid

في display: grid، يجب ضبط هذه الجوانب الثلاثة بشكل منفصل:

.masonry {
  display: grid;
  grid-template-rows: masonry;
  grid-template-areas: "a b c";
  grid-auto-flow: wrap-reverse;
}

مثل مثال "عرض الإعلانات على شكل مربّعات"، يؤدي ذلك إلى ضبط حجم جميع الأعمدة على auto، ولكن إذا أردت تقديم أحجام محدّدة، يمكنك إجراء ما يلي:

.masonry {
  display: grid;
  grid: masonry / 50px 100px 200px;
  grid-template-areas: "a b c";
  grid-auto-flow: wrap-reverse;
}

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

.masonry {
  display: grid;
  grid: "a b c" masonry / 50px 100px 200px;
  grid-auto-flow: wrap-reverse;
}

في كلا المثالَين، يكون الترتيب مطلوبًا بشكل صارم، ويختلف إذا أردت استخدام الصفوف بدلاً من ذلك. على سبيل المثال، يبدو التغيير إلى الصفوف على النحو التالي:

.masonry {
  display: grid;
  grid: 50px 100px 200px / masonry;
  grid-template-areas: "a" "b" "c";
}

أو لتلخيص كل ذلك في عبارة واحدة:

.masonry {
  display: grid;
  grid: "a" 50px "b" 100px "c"  200px / masonry;
}

نقاط يجب مراعاتها عند الاختيار بين الخيارَين

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

يستخدم الإصدار display: grid الاختصار الحالي grid، وهو اختصار معقد إلى حدٍ ما، ويُستخدم بشكلٍ أقل من قِبل المطوّرين، وفقًا لتجربتنا. كما هو موضّح في الأمثلة السابقة، يجب الانتباه عند ضبط ترتيب القيم حتى عند استخدامها لتنسيقات المرصوصة البسيطة.

اعتبارات أخرى

تتناول هذه المشاركة بعض حالات الاستخدام الشائعة في الوقت الحالي، ولكن لا نعلم ما قد يحمله المستقبل للشبكة أو التنسيقات المربّعة. من بين الحجج المهمة لاستخدام صيغة separate display: masonry أنّها تسمح بتقسيم العنصرَين في المستقبل. في ما يتعلّق بالقيم الأولية، مثل قيم masonry-template-tracks، قد يكون من المفيد إجراء تعديل مختلف في تنسيق "العرض المربّع" عن التنسيق "الشبكة". لا يمكننا تغيير الإعدادات التلقائية للشبكة في حال استخدام الإصدار display: grid، لأنّ ذلك قد يؤدي إلى حصر الإجراءات التي يمكننا اتّخاذها في المستقبل.

في هذه الأمثلة، يمكنك الاطّلاع على الأماكن التي يجب أن يتجاهل فيها المتصفّح السمات الصالحة في الشبكة في حال استخدام تنسيق "المرصوص". على سبيل المثال، grid-template-areas، حيث يتم تجاهل معظم القيم لأنّها تحدّد تنسيق شبكة ثنائية الأبعاد، في التنسيق المربّع، نحدّد فقط اتجاهًا واحدًا بشكل كامل.

تقديم ملاحظاتك

اطّلِع على هذه الأمثلة، بالإضافة إلى مسودة المواصفات التي تعرض كل إصدار بجانب الآخر. يُرجى مشاركة رأيك من خلال التعليق على الطلب 9041 أو، إذا كنت تفضّل كتابة مشاركة على مدونتك أو على وسائل التواصل الاجتماعي، يُرجى إعلامنا على X أو LinkedIn.