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

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

آدم أرجيل
أوريول بروفاو
أوريول بروفاو
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 التي تراعي الاهتمام عالميًا معًا، آمل أن تكون هذه مقدمة صغيرة مفيدة.

التوافق مع الملء التلقائي وعلى جميع المتصفّحات

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

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 🤓

إضافة ملاحظات