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

Pete LePage

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

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

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

منع التجاوز باستخدام overflow: clip

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

في مواصفات تجاوز CSS، تتوفّر سمة 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، قدمنا واجهة برمجة تطبيقات سياسة الميزات، التي تتيح لك تفعيل بعض واجهات برمجة التطبيقات وميزات الويب وتعطيلها وتعديلها بشكل انتقائي في المتصفح. هذه السياسات هي بمثابة عقد يتم إبرامه بينك وبين المتصفّح. وتُعلِم هذه الطريقة المتصفِّح بالغرض من هدفك.

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

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

Permissions-Policy: geolocation=()

Feature-Policy: geolocation 'none'

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

نموذج تعريف المستند (DOM) لتظليل الإعلان

يوفر Shadow DOM، وهو جزء من معيار مكونات الويب، طريقة لتحديد نطاق أنماط 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، باستخدام نموذج الإعلان Delarative 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 لإنتاج الشجرة بأكملها، بما في ذلك جذر الظل.

يمكنك الاطّلاع على Declarative Shadow DOM على web.dev للحصول على مزيد من التفاصيل.

والمزيد

وبالطبع هناك المزيد.

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

ويتم شحن برنامج ترميز AV1 إلى متصفّح Chrome على الكمبيوتر المكتبي تم تحسينه خصيصًا لعقد اجتماعات الفيديو من خلال دمج WebRTC.

محتوى إضافي للقراءة

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

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

اشتراك

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

اسمي بيت ليبيج، وبعد طرح الإصدار 91 من Chrome، سأكون هنا لإخبارك بالجديد في Chrome!

تحية خاصة

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

بالطبع، لورين بورجا ولي كاروثرز ولوكاس هولسيك الذين يعملون على كل فيديوهاتي الجديدة في Chrome ويجعلونني تبدو أفضل مما أنا عليه في الواقع. شكرًا لك!