الميزات الجديدة في Chrome 90

Pete LePage

في ما يلي ما تحتاج إلى معرفته:

اسمي بيت لي باي، وأنا أقدّم المعلومات الأساسية للمطوّرين في Chrome 90، بأسلوب التسعينيات.

منع حدوث تدفّق زائد باستخدام overflow: clip

CSS IS AWESOME

هَذَا فِي قِمَّةِ الرَّوْعَة. ولكن أعتقد أنّ كل مطوّر ويب قد رأى وواجه مشكلة في تدفّق البيانات بشكل غير ملائم في مرحلة ما. هناك مقالة رائعة على CSS Tricks حول الطُرق المختلفة للتعامل مع المحتوى الزائد، على سبيل المثال، باستخدام overflow: hidden أو auto.

في مواصفات CSS Overflow، تتوفّر خاصية clip جديدة تعمل بطريقة مشابهة لhidden.

.overflow-clip {
  overflow: clip;
}
إنّ المربّع مع نص CSS رائع، حيث يتوفّر خيار رائع للعرض خارج الصندوق.

يتيح لك استخدام overflow: clip منع أي نوع من الانتقال إلى المربّع، بما في ذلك الانتقال الآلي. وهذا يعني أنّ المربّع لا يُعدّ حاوية لعرض المحتوى، ولا يبدأ سياق تنسيق جديدًا. يمكنك تطبيق الاقتصاص على محور واحد إذا كنت بحاجة إليه من خلال overflow-x وoverflow-y.

يُرجى العِلم أنّه يتوفّر أيضًا الرمز overflow-clip-margin الذي يتيح لك توسيع حدود المقطع. يكون هذا مفيدًا في الحالات التي يكون فيها هناك فائض من الحبر يجب أن يكون مرئيًا.

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}
إنّ المربّع مع نص CSS رائع، حيث يتوفّر خيار رائع للعرض خارج الصندوق.

يمكنك الاطّلاع على overflow: clip في العمل على الرابط https://petele-css-is-awesome.glitch.me/.

سياسة الميزات هي الآن سياسة الأذونات

في الإصدار 74 من Chrome، طرحنا Feature Policy API، التي تتيح لك تفعيل واجهات برمجة تطبيقات معيّنة وميزات ويب في المتصفّح أو إيقافها أو تعديل سلوكها بشكل انتقائي. هذه السياسات هي عقد بينك وبين المتصفّح. وهي تُعلم المتصفّح بنواياك.

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

بدءًا من الإصدار 90 من Chrome، ستتم إعادة تسمية واجهة برمجة التطبيقات Feature Policy API لتكون Permissions Policy، وتم أيضًا إعادة تسمية عنوان HTTP. في الوقت نفسه، اتّفق المنتدى على بنية جديدة تستند إلى "قيم الحقل منسق" لبروتوكول HTTP.

الإصدار 90 من Chrome والإصدارات الأحدث

Permissions-Policy: geolocation=()

الإصدار 89 من Chrome والإصدارات الأقدم

Feature-Policy: geolocation 'none'

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

نموذج Shadow DOM التعريفي

يقدّم Shadow DOM، وهو جزء من معيار Web Components، طريقة لتطبيق أنماط CSS على شجرة فرعية معيّنة من نموذج DOM وعزل هذه الشجرة الفرعية عن بقية المستند. حتى الآن، كانت الطريقة الوحيدة لاستخدام Shadow DOM هي إنشاء جذر ظل باستخدام JavaScript.

const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;

يعمل هذا الإجراء بشكل جيد في العرض من جهة العميل، ولكن ليس بشكل جيد في العرض من جهة الخادم حيث لا تتوفّر طريقة مضمّنة للتعبير عن جذور الظل في ملف HTML الذي ينشئه الخادم. ولكن، بدءًا من الإصدار 90 من Chrome، يمكنك استخدام واجهة برمجة التطبيقات Declarative Shadow DOM لإنشاء جذور الظل باستخدام HTML فقط.

"الجذر الظلّ التوضيحي" هو عنصر <template> يحتوي على سمة shadowroot. يرصده محلل HTML ويطبّقه على الفور بصفته جذر الظل للعنصر الرئيسي.

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

يؤدي تحميل ترميز HTML الخالص إلى ظهور شجرة نموذج عناصر المستند هذه:

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

يمنحنا ذلك مزايا ميزة التغليف في Shadow DOM وميزة عرض الخانات في HTML الثابت. لا يلزم استخدام JavaScript لإنشاء الشجرة بأكملها، بما في ذلك جذر الظل.

اطّلِع على نموذج Shadow DOM التعريفي على web.dev للحصول على مزيد من التفاصيل.

والمزيد

وهناك الكثير من الميزات الأخرى بالطبع.

للمساعدة في تحسين الخصوصية وسرعات التحميل للمستخدمين الذين يزورون المواقع الإلكترونية التي تتيح استخدام بروتوكول HTTPS، سيستخدم شريط العناوين في Chrome https:// تلقائيًا. وإذا لم تكن قد أعددت إعادة توجيه تلقائية من HTTP إلى HTTPS، حان الآن الوقت المناسب لإجراء ذلك.

ويتم أيضًا تضمين برنامج ترميز AV1 في متصفّح Chrome للكمبيوتر المكتبي، وهو مُحسَّن بشكل خاص لعقد مؤتمرات الفيديو من خلال دمج WebRTC.

مراجع إضافية

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

اشتراك

إذا أردت البقاء على اطّلاع على فيديوهاتنا، يمكنك الاشتراك في قناة مطوّري Chrome على YouTube، وستتلقّى إشعارًا عبر البريد الإلكتروني عند نشر فيديو جديد.

اسمي "بيت ليبيت"، وسأكون هنا لإطلاعك على ميزات الإصدار 91 من Chrome فور طرحه.

كلمة شكر خاصة

لقد استمتعتُ كثيرًا بتصوير هذه الحلقة من سلسلة "الميزات الجديدة في Chrome" التي تتضمّن طابعًا من تسعينات القرن الماضي. شكرًا جزيلاً لـ Sean Meehan على الفكرة وعلى جمع أشخاص رائعين ساعدوا في فتح بوابة الزمن إلى عام 1990.

GDS Design

  • فولا أكينولا
  • رامي كمال
  • كريستوفر بودل
  • كروسيك
  • كريس ووكر

تصميم الصوت والموسيقى الإضافية

  • بريان جوردون

شكرًا أيضًا لـ "لورين بوريا" و"لي كاروثرز" و"لوكاس هولكيك" الذين يعملون على كل فيديوهات "الميزات الجديدة في Chrome" التي أُنشئها ويجعلونني أبدو أفضل مما أنا عليه. شكرًا لكم.