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

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

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

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

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

مسار المستند

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

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

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

هل سبق لك أن فحصت عنصر 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 من اليمين إلى اليسار.

يعني ذلك أنّ الأنماط المكتوبة بلغة واحدة سيتم تطبيقها بشكل سياقي ومناسب على اللغات الأخرى. سيرتفع المحتوى حسب اللغة المستخدمة.

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

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

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

لم يتم شحن أي قدرات جديدة، ولكن هناك بعض الملخّصات المفيدة جدًا:
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 هو اختصار للجوانب المادية، ويؤدي الدور نفسه الذي يؤديه الهامش والتباعد.

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

على الرغم من أنّ اختصارات الجوانب المادية مثيرة للاهتمام، إلا أنّ هناك المزيد من الميزات المنطقية التي توفّرها اختصارات 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.

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

تحتوي سمة Border، بالإضافة إلى سمات 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> وبعض السمات المنطقية. إذا كنت مهتمًا بمعرفة كيفية عمل كل هذه الخدمات المراعية للغة على مستوى العالم معًا، آمل أن تكون هذه مقدّمة صغيرة ومفيدة.

ميزة Polyfilling والتوافق مع جميع المتصفّحات

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

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 🤓

ملاحظات