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

اختصارات جديدة للسمات المنطقية وخصائص داخلية جديدة في Chromium.

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

ومنذ إصدار Chromium 69 (3 أيلول (سبتمبر) 2018)، ساعدت كل من الخصائص المنطقية والقيم يتحكم المطورون في تخطيطاتهم الدولية من خلال منطقية، من الأنماط المادية والاتجاهية والأبعاد. في Chromium 87، تظهر الاختصارات تم شحن الإزاحة لتسهيل كتابة هذه الخصائص والقيم المنطقية قليلاً. ساعد ذلك Chromium في تطابُق متصفِّح Firefox، الذي كان يدعم بعض الملخّصات منذ 66. يوفّرها Safari في معاينة التكنولوجيا.

تظهر اللغات اللاتينية والعبرية واليابانية أثناء كتابة نص عنصر نائب داخل إطار جهاز. تتبع الأسهم والألوان النص للمساعدة في ربط اتجاهَي الكتلة والمضمّن.

مسار المستند

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

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

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

هل سبق لك أن فحصت عنصر p في "أدوات مطوري البرامج في Chrome"؟ إذا كان الأمر كذلك، فقد يكون لديك أنّ الأنماط التلقائية لوكيل المستخدم ليست مادية، لكنها منطقية.

p {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

CSS من ورقة أنماط وكيل المستخدم في Chromium

الهامش ليس في الأعلى أو الأسفل، كما قد يعتقد القارئ الإنجليزي. الساعة الآن block-start وblock-end. وتشبه هذه الخصائص المنطقية قدرة القارئ الإنجليزي في الأعلى والأسفل، ولكن أيضًا شبيهة بقارئ ياباني يعبّر عن اليمين واليسار. تكتب مرة واحدة، وتعمل في كل مكان.

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

اتجاه الحظر هو الاتجاه الذي تتبعه مجموعات المحتوى الجديدة، مثل سؤال نفسك "أين يجب وضع الفقرة التالية؟". قد تنظر إلى الأمر على أنه "كتلة محتوى" أو "جزء من نص". كل لغة ترتب الكتل وترتبها على طول block-axis الخاصة بهما. block-start هو جانب يتم وضع الفقرة في البداية، في حين أنّ block-end هو العنصر الذي تتدفق إليه الفقرات الجانبية الجديدة.

في الكتابة اليابانية التقليدية، على سبيل المثال، يتدفق الاتجاه من اليمين إلى اليسار:

الاتجاه المضمّن هو اتجاه انتقال الحروف والكلمات. ضع في اعتبارك الاتجاه تتحرك ذراعك ويدك عندما تكتب؛ أنهم مسافرون على طول inline-axis. inline-start هو الجانب الذي تبدأ فيه الكتابة، في حين أنّ inline-end هو الجانب الذي تبدأ فيه الكتابة. حيث تنتهي الكتابة أو تلتف. يعرض الفيديو أعلاه، "inline-axis" من أعلى إلى أسفل، ولكن في هذا الفيديو التالي، يتدفق inline-axis من اليمين إلى اليسار.

أن تكون flow-relative أن الأنماط المكتوبة للغة واحدة ستكون سياقية وملائمة تطبيقها في لغات أخرى. سيرتفع المحتوى حسب اللغة المستخدمة.

اختصارات جديدة

بعض الملخّصات التالية ليست ميزات جديدة للمتصفّح، بل هي أسهل لكتابة الأنماط من خلال الاستفادة من القدرة على تعيين القيم في كلا الكتلة أو الحواف المضمّنة في الوقت نفسه. تجلب الخصائص المنطقية inset-* قدرات جديدة، نظرًا لعدم وجود طرق بعيدة لتحديد المواضع المطلقة بالخصائص المنطقية قبلها. ومع ذلك، تتدفق الأجزاء الداخلية والاختزال معًا بشكل جيد، عن جميع ميزات الخصائص المنطقية الجديدة التي تصل إلى Chromium 87 دفعة واحدة.

اختصارات الهامش

لم يتم شحن أي قدرات جديدة، ولكن ثمة بعض الاختصارات المفيدة:
margin-block و margin-inline

حرف طويل
margin-block-start: 2ch;
margin-block-end: 2ch;
اختصار جديد
margin-block: 2ch;
/* or */
margin-block: 2ch 2ch;

لا يوجد اختصار لـ "أعلى وأسفل" أو "اليسار واليمين"... حتى الآن! ربما تشير إلى الجوانب الأربعة جميعها باستخدام اختصار margin: 10px;، والآن الإشارة بسهولة إلى جانبين تكميليين باستخدام اختصار الخاصية المنطقية.

حرف طويل
margin-inline-start: 4ch;
margin-inline-end: 2ch;
اختصار جديد
margin-inline: 4ch 2ch;

اختصارات المساحة المتروكة

لم يتم شحن أي قدرات جديدة، ولكن تم استخدام اختصارات مفيدة أكثر:
padding-block و padding-inline


حرف طويل
padding-block-start: 2ch;
padding-block-end: 2ch;
اختصار جديد
padding-block: 2ch;
/* or */
padding-block: 2ch 2ch;

إليك مجموعة الاختصارات المجّانية البالغ عددها inline:

حرف طويل
padding-inline-start: 4ch;
padding-inline-end: 2ch;
اختصار جديد
padding-inline: 4ch 2ch;

التفاصيل الداخلية والاختصارات

يمكن كتابة جميع السمات الفيزيائية top وright وbottom وleft. كقيم للسمة inset. يمكن أن تستفيد أي قيمة في position من تحديد الجوانب الداخلية.

.cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
}


اليد الطويلة الجسدية
position: absolute;
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;
اختصار مادي جديد
position: absolute;
inset: 1px 2px 3px 4px;

يجب أن يبدو ذلك مناسبًا على الفور! الجزء الداخلي هو اختصار للجوانب المادية، ويعمل تمامًا مثل الهامش والمساحة المتروكة.

الميزات الجديدة

بقدر ما هو مثير للاهتمام مثل اختصارات الجوانب المادية، هناك المزيد من الميزات المنطقية التي تم جلبها من خلال اختصارات inset الإضافية. تجلب هذه الاختصارات سهولة كتابة المطور (أقصر من حيث الكتابة) لكنها تزيد أيضًا مدى الوصول المحتمل للتخطيط لأنه يتناسب مع التدفق.

اليد الطويلة الجسدية
position: absolute;
top: 10px;
bottom: 10px;
اختصار منطقي
position: absolute;
inset-block: 10px;


اليد الطويلة الجسدية
position: absolute;
left: 10px;
right: 20px;
اختصار منطقي
position: absolute;
inset-inline: 10px 20px;

محتوى إضافي وقائمة كاملة بالاختصارات المختصرة متوفرة في MDN.

اختصارات الحدود

تحتوي الحدود بالإضافة إلى سمات color وstyle وwidth المدمجة على واختصارات منطقية جديدة أيضًا.


اليد الطويلة الجسدية
border-top-color: hotpink;
border-bottom-color: hotpink;
اختصار منطقي
border-block-color: hotpink;
/* or */
border-block-color: hotpink hotpink;


اليد الطويلة الجسدية
border-left-style: dashed;
border-right-style: dashed;
اختصار منطقي
border-inline-style: dashed;
/* or */
border-inline-style: dashed dashed;


اليد الطويلة الجسدية
border-left-width: 1px;
border-right-width: 1px;
اختصار منطقي
border-inline-width: 1px;
/* or */
border-inline-width: 1px 1px;

محتوى إضافي وقائمة كاملة باختصارات الحدود والأحرف الطويلة متوفرة في MDN.

مثال على السمة المنطقية <figure>

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

أو تجربة ذلك!

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

الملء التلقائي والتوافق مع المتصفحات المختلفة

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

p {
  /* for unsupporting browsers */
  margin-top: 1ch;
  margin-bottom: 2ch;

  /* for supporting browsers to use */
  /* and unsupporting browsers to ignore and go 🤷‍♂️ */
  margin-block: 1ch 2ch;
}

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

/* physical side styles */
p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

/* adjusted physical side styles per language */
:lang(ja) {
  p {
    /* zero out styles not useful for traditional Japanese */
    margin-top: 0;
    margin-bottom: 0;

    /* add appropriate styles for traditional Japanese */
    margin-right: 1ch;
    margin-left: 2ch;
  }
}

/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}

/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
  /* remove any potential physical cruft.. */
  margin: 0;
  /* explicitly set logical value */
  margin-block: 1ch 2ch;
}

ويمكنك أيضًا استخدام السمة @supports لتحديد ما إذا كنت تريد توفير محتوى احتياطيات الخصائص:

p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

@supports (margin-block: 0) {
  p {
    margin-block: 1ch 2ch;
  }
}

Sass وPostCSS تستخدم قناة Emotion وغيرها برامج تجميع و/أو إصدارات مبرمَجة عروض الوقت التي تحتوي على مجموعة واسعة من الإجراءات الاحتياطية أو الحلول. الاطّلاع على كل خيار لمعرفة أيهما يناسب سلسلة الأدوات والاستراتيجية العامة للموقع الإلكتروني

الخطوات التالية

سيقدم المزيد من CSS خصائص منطقية، ولكن هذا لم يحدث بعد! هناك جانب واحد كبير مفقود مجموعة من الاختصارات، ولا يزال الحل في انتظار المراجعة في مشكلة GitHub. هناك حل مؤقت في مسودة. ماذا لو كنت تريد تصميم كل الجوانب المنطقية لمربع باختصار؟

اختزال جسدي
margin: 1px 2px 3px 4px;
margin: 1px 2px;
margin: 2px;
اختصار منطقي
margin: logical 1px 2px 3px 4px;
margin: logical 1px 2px;
margin: logical 2px;

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

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

html {
  flow-mode: physical;
  /* or */
  flow-mode: logical;
  /* now all margin/padding/etc references are logical */
}

/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */

إنه أمر صعب! يُرجى الإدلاء بصوتك والتعبير عن رأيك، فنحن نريد معرفة رأيك.

هل تريد التعلم أو دراسة الخصائص المنطقية أكثر؟ فيما يلي مرجع مفصل، بالإضافة إلى الأدلة والأمثلة، حول MDN 🤓

ملاحظات