جدید در کروم 133

راشل اندرو

در اینجا چیزی است که شما باید بدانید:

attr() پیشرفته CSS

این ویژگی به تابع attr() موجود می افزاید، ویژگی هایی که در CSS Level 5 مشخص شده اند. این اجازه می دهد تا انواع دیگری را علاوه بر <string> و استفاده در تمام ویژگی های CSS (علاوه بر پشتیبانی موجود برای محتوای شبه عنصر) داشته باشد.

در مثال زیر مقدار ویژگی color برای div از مقدار ویژگی data-color استفاده می کند. این مقدار مشخصه با استفاده از attr() و type() به یک <color> تجزیه می شود. مقدار بازگشتی روی red تنظیم شده است.

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

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

در CSS بیشتر بدانید 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 ببینید.

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 133 پیوندهای زیر را بررسی کنید.

مشترک شوید

برای به‌روز ماندن، در کانال YouTube Developers Chrome مشترک شوید و هر زمان که ویدیوی جدیدی را راه‌اندازی کنیم، یک اعلان ایمیلی دریافت خواهید کرد.

به محض انتشار کروم 133، ما در اینجا خواهیم بود تا به شما بگوییم چه چیزی در کروم جدید است!