جدید در کروم 133

راشل اندرو

آنچه باید بدانید این است:

تابع پیشرفته‌ی attr() در CSS

این ویژگی به تابع attr() موجود، ویژگی‌های مشخص شده در CSS سطح ۵ را اضافه می‌کند. این امر امکان استفاده از انواع داده‌ای علاوه بر <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 : مشخص می‌کند که آیا می‌توان یک کانتینر اسکرول را در جهت مورد نظر اسکرول کرد یا خیر.

یک container-type: 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 وب‌سایت‌ها را از تغییرات در سیستم فایل مطلع می‌کند.
  • متد getClientCapabilities() PublicKeyCredential getClientCapabilities به شما امکان می‌دهد تعیین کنید که کدام ویژگی‌های WebAuthn توسط کلاینت کاربر پشتیبانی می‌شوند.

برای جزئیات بیشتر در مورد این ویژگی‌ها و بسیاری از ویژگی‌های جدید دیگر در کروم، به یادداشت‌های کامل انتشار کروم ۱۳۳ مراجعه کنید!

مطالعه بیشتر

این فقط برخی از نکات برجسته کلیدی را پوشش می‌دهد. برای تغییرات بیشتر در کروم ۱۳۳، لینک‌های زیر را بررسی کنید.

اشتراک

برای به‌روز ماندن، در کانال یوتیوب توسعه‌دهندگان کروم مشترک شوید و هر زمان که ویدیوی جدیدی منتشر کنیم، از طریق ایمیل به شما اطلاع داده خواهد شد.

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