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

Pete LePage

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

• هناك قيمة جديدة لسمة CSS overflow.
• تمت إعادة تسمية Feature Policy API إلى Permissions Policy.
• وتتوفّر طريقة جديدة لتنفيذ Shadow DOM واستخدامه مباشرةً في HTML.
• كان لديّ عدة سترات تشبه هذه تمامًا في التسعينيات.
• وهناك الكثير من الميزات الأخرى.

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

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

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

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

.overflow-clip {
  overflow: clip;
}

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

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

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}

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

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

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

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

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

Permissions-Policy: geolocation=()

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 الذي ينشئه الخادم. ومع ذلك، بدءًا من Chrome 90 وباستخدام نموذج Shadow DOM التعريفي، يمكنك البدء باستخدامه، إذ يمكنك إنشاء جذور ظل باستخدام HTML فقط.

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

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

تحميل نتائج ترميز HTML الخالص في شجرة DOM هذه:

<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.

• الميزات الجديدة في الإصدار 90 من "أدوات مطوّري البرامج في Chrome"
• إيقاف Chrome 90 نهائيًا وإزالته
• تحديثات ChromeStatus.com للإصدار 90 من Chrome
• الميزات الجديدة في JavaScript في Chrome 90
• قائمة التغييرات في مستودع مصدر Chromium

اشتراك

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

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

شكر خاص

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

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