الميزات الجديدة في الإصدار 133 من Chrome

Rachel Andrew

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

دالة attr() المتقدّمة في CSS

تضيف هذه الميزة إلى الدالة attr() الحالية الميزات المحدّدة في المستوى 5 من CSS. يتيح ذلك استخدام أنواع أخرى غير <string> واستخدامها في جميع سمات CSS (بالإضافة إلى التوافق الحالي مع محتوى العنصر النائب).

في المثال التالي، تستخدم قيمة السمة color للعنصر div القيمة من السمة data-color. يتم تحليل قيمة هذه السمة إلى <color> باستخدام attr() وtype(). تم ضبط القيمة الاحتياطية على red.

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

اطّلِع على مزيد من المعلومات في مقالة ترقية خدمة مقارنة الأسعار attr().

طلبات البحث عن حاويات حالة التمرير في CSS

استخدِم طلبات البحث عن الحاويات لتنسيق العناصر المشتقة من الحاويات استنادًا إلى حالة الانتقال فيها.

حاوية طلب البحث هي إما حاوية لفائف أو عنصر يتأثّر بموضع لفائف حاوية لفائف. يمكن الاستعلام عن الحالات التالية:

  • stuck: حاوية ذات موضع ثابت ملتصقة بإحدى حواف مربّع التمرير
  • snapped: يتم حاليًا تثبيت حاوية محاذية لميزة "التمرير السريع" أفقيًا أو عموديًا.
  • scrollable: ما إذا كان يمكن تمرير حاوية لفائف الشاشة في الاتجاه الذي تم الاستعلام عنه

نوع حاوية جديد: يتيح scroll-state طلب الحِزم. على سبيل المثال:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

اطّلِع على مزيد من المعلومات وشاهد بعض العروض التوضيحية في طلبات البحث عن حالة الانتقال في CSS.

text-box وtext-box-trim وtext-box-edge من CSS

تحدِّد السمة text-box-trim الجوانب التي يجب اقتصاصها، سواء من الأعلى أو الأسفل، بينما تحدِّد السمة text-box-edge كيفية اقتصاص الحافة.

تتيح لك هذه السمات التحكّم في المسافة الرأسية بدقة باستخدام مقاييس الخط.

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

تعرَّف على كيفية استخدام هذه السمات الجديدة في CSS text-box-trim.

وغير ذلك

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

  • Animation.overallProgressتوفّر لك طريقة تمثيل ملائمة ومتسقة لمدى تقدّم الصورة المتحركة خلال تكراراتها بغض النظر عن طبيعة المخطط الزمني.
  • تتيح لك دالة Node.prototype.moveBefore نقل العناصر في شجرة DOM بدون إعادة ضبط حالة العنصر.
  • تُرسِل واجهة FileSystemObserver إشعارات إلى المواقع الإلكترونية بشأن التغييرات في نظام الملفات.
  • تتيح لك طريقة PublicKeyCredential getClientCapabilities() تحديد ميزات WebAuthn المتوافقة مع برنامج العميل الخاص بالمستخدم.

يمكنك الاطّلاع على ملاحظات إصدار Chrome 133 الكاملة لمعرفة تفاصيل عن هذه الميزات وغيرها الكثير من الميزات الجديدة في Chrome.

مراجع إضافية

لا يشمل ذلك سوى بعض النقاط الرئيسية. يمكنك الاطّلاع على الروابط التالية للاطّلاع على مزيد من التغييرات في الإصدار 133 من Chrome.

اشتراك

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

بعد طرح الإصدار 133 من Chrome، سنطلعك على الميزات الجديدة في Chrome.