جدید در کروم 131

Mariko Kosaka
X

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

من ماریک کوساکا هستم. بیایید وارد آن شویم و ببینیم چه چیزی برای توسعه دهندگان در Chrome 131 جدید است.

وراثت برجسته CSS

وراثت برجسته CSS برای کلاس های شبه ::selection و ::target-text در حال تغییر است. این یک مدل بصری تر برای وراثت سبک ایجاد می کند و با کلاس های شبه ::highlight ، ::spelling-error و ::grammar-error که اخیراً اضافه شده است، هماهنگ می شود.

در مورد این قطعه کد با متن تاکید شده فکر کنید.

p {
  color: deeppink;
}

.blue::selection {
  color: blue;
}

<p class="blue">
    This is
    <em>emphasized</em>
    text.
</p>

در نسخه‌های قبلی Chrome، وقتی متنی را انتخاب می‌کنید که بر روی آن تأکید شده است، با وجود تنظیم ::selection شبه کلاس در عنصر پاراگراف والد، رنگ متن به آبی تغییر نمی‌کند.

متن هایلایت شده به رنگ صورتی

این به این دلیل است که با استفاده از مدل وراثت عنصر مبدا اجرا شد. بنابراین ::selection شبه کلاس در این مورد فقط عناصر را با کلاس آبی مطابقت می دهد که عنصر داخل این پاراگراف ندارد.

با تغییر وراثت برجسته، وقتی همان متن در Chrome 131 انتخاب می‌شود، متن رنگ خود را به آبی تغییر می‌دهد.

متن هایلایت شده با رنگ آبی

چند تغییر دیگر در این رابطه وجود دارد، بنابراین حتماً تغییرات وراثت برای استایل انتخاب CSS نوشته شده توسط Stephen Chenney از Igalia که روی این ویژگی کار کرده است را بررسی کنید.

بهبود استایل در <details> و <summary>

اکنون گزینه های بیشتری برای استایل دادن به ساختار عناصر <details> و <summary> به منظور ساخت ویجت های افشا یا آکاردئون دارید.

تغییرات ارائه شده در این نسخه استفاده از ویژگی display را امکان پذیر می کند و یک شبه عنصر ::details-content اضافه می کند تا به بخشی که گسترش می یابد و جمع می شود، استایل دهید.

از لحاظ تاریخی تغییر نوع نمایش عنصر details غیرممکن بود. اکنون این محدودیت کاهش یافته است و به شما امکان می دهد از مواردی مانند طرح بندی شبکه ای یا انعطاف پذیر استفاده کنید.

در این نمونه انحصاری آکاردئونی که از چندین عنصر details ساخته شده است، هنگامی که یکی از عناصر details گسترش می یابد، محتوای آن در کنار summary قرار می گیرد.

ویجت آکاردئون با طرح فلکس

این با استفاده از یک طرح انعطاف پذیر در عنصر details به دست می آید. همچنین می توانید الگوهای طرح بندی بیشتری را با مقادیر نمایشگر دیگر مانند grid امتحان کنید.

برای توضیح عمیق تر ، گزینه های بیشتر برای استایل کردن <details> مقاله براموس را بررسی کنید.

کادرهای حاشیه @page

پشتیبانی از کادرهای حاشیه صفحه، هنگام چاپ یک سند وب، یا صادرات آن به صورت PDF، اضافه شده است.

کادرهای حاشیه صفحه به شما امکان می دهند محتویات را در قسمت حاشیه صفحه تعریف کنید. بنابراین، می توانید به جای استفاده از سرصفحه ها و پاورقی های داخلی تولید شده توسط مرورگر، سرصفحه ها و پاورقی های سفارشی را ارائه دهید.

حاشیه صفحه با استفاده از قانون @page در CSS تعریف می شود.

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

ظاهر و محتویات یک جعبه حاشیه با ویژگی های CSS در داخل قوانین at-که نشان دهنده 16 کادر حاشیه با استفاده از محتوای تولید شده است، مشخص می شود.

برای شماره‌گذاری صفحات، شمارنده‌ها با page برای شماره صفحه فعلی و pages برای تعداد کل صفحات پشتیبانی می‌شوند.

برای توضیح بیشتر ، مقاله راشل را بررسی کنید.

و بیشتر!

و البته موارد دیگر بسیار زیاد است.

  • پشتیبانی از منابع SVG خارجی برای 'clip-path'، 'fill'، 'stroke' و 'marker'.
  • WebHID در زمینه های اختصاصی کارگر فعال است.
  • رفتار Emoji را با ویژگی font-variant-emoji CSS کنترل کنید.

در ادامه مطلب

این فقط برخی از نکات کلیدی را پوشش می دهد. برای تغییرات بیشتر در Chrome 131 پیوندهای زیر را بررسی کنید.

مشترک شوید

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

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