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

Rachel Andrew

في ما يلي المعلومات التي يجب معرفتها:

تسمح دالة CSS المتقدّمة attr() باستخدام أنواع أخرى غير <string> واستخدامها في جميع خصائص CSS.
تتيح لك استعلامات الحاويات عن حالة التمرير في CSS استخدام استعلامات الحاويات لتصميم العناصر التابعة للحاويات استنادًا إلى حالة التمرير.
تتيح CSS text-box وtext-box-trim وtext-box-edge إمكانية التحكّم بشكل أفضل في المحاذاة العمودية للنص
وهناك الكثير غير ذلك.

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

تضيف هذه الميزة إلى الدالة attr() الحالية الميزات المحدّدة في CSS المستوى 5. يتيح ذلك استخدام أنواع أخرى غير <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.

طلبات حاوية حالة التمرير في 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.

‫CSS `text-box` و`text-box-trim` و`text-box-edge`

تحدّد السمة 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.

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

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

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

فور إصدار الإصدار 133 من Chrome، سنخبرك هنا بالميزات الجديدة في Chrome.

الميزات الجديدة في الإصدار 133 من Chrome تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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