جدید در کروم ۱۵۴

راشل اندرو

منتشر شده: ۲۲ سپتامبر ۲۰۲۶

کروم ۱۵۴ اکنون در حال انتشار است و این پست برخی از ویژگی‌های کلیدی این نسخه را به اشتراک می‌گذارد. یادداشت‌های کامل انتشار کروم ۱۵۴ را بخوانید.

نکات برجسته این نسخه:

<iframe> با اندازه واکنش‌گرا

کروم ۱۵۴ پشتیبانی از iframeهای با اندازه واکنش‌گرا را اضافه می‌کند و به یک عنصر <iframe> در سند والد اجازه می‌دهد تا اندازه خود را با اندازه سرریز طرح‌بندی سند جاسازی‌شده تنظیم کند تا از پیمایش در سند فرزند جلوگیری شود. این جایگزین الگویی می‌شود که در آن شما به صورت دستی محتوای iframe را اندازه‌گیری می‌کردید، ابعاد را با postMessage() ارسال می‌کردید و اندازه iframe را در صفحه جاسازی به‌روزرسانی می‌کردید.

برای تنظیم اندازه یک iframe به اندازه ارتفاع محتوای آن، از ویژگی frame-sizing CSS در عنصر <iframe> در صفحه جاسازی استفاده کنید:

.embed {
  width: 100%;
  frame-sizing: content-height;
}

سند جاسازی‌شده نیز باید با گنجاندن یک عنصر <meta name="responsive-embedded-sizing"> در <head> خود، این قابلیت را فعال کند:

<meta name="responsive-embedded-sizing" content="allow-origins=*">

برای جزئیات بیشتر و نسخه‌های نمایشی، به iframe های واکنش‌گرا در کروم ۱۵۴ مراجعه کنید.

حالت‌های scroll-marker-group CSS

ویژگی scroll-marker-group کنترل می‌کند که آیا یک کانتینر اسکرول، قبل یا بعد از محتویات خود، یک شبه عنصر ::scroll-marker-group ایجاد کند یا خیر. کروم ۱۵۴، scroll-marker-group با دو حالت بهبود بخشیده است که ترتیب فوکوس و معناشناسی دسترسی WAI-ARIA مربوط به ::scroll-marker-group و ::scroll-marker تنظیم می‌کنند:

/* Links mode (default) */
scroll-marker-group: after links;

/* Tabs mode */
scroll-marker-group: before tabs;

text-decoration-inset در CSS

به طور پیش‌فرض، طول تزئینات متن یک عنصر (مانند زیرخط، روی خط یا خط میانی) با طول متن رندر شده یکسان است. ویژگی text-decoration-inset در CSS به شما امکان می‌دهد نقاط شروع و پایان تزئینات متن یک عنصر را طوری تنظیم کنید که از لبه‌های متن به داخل وارد شود، از آن امتداد یابد یا نسبت به لبه‌های متن جابجا شود.

text-decoration-inset مقادیر auto ، length و percent را با استفاده از سینتکس تک مقداری یا دو مقداری می‌پذیرد، برای مثال، هر دو انتها را به اندازه 10px داخل می‌کند:

text-decoration-inset: 10px;

مقادیر مثبت، تزئینات را به داخل متن وارد می‌کنند (آن را کوتاه‌تر می‌کنند)، در حالی که مقادیر منفی، تزئینات را به داخل متن هدایت می‌کنند (آن را بلندتر می‌کنند). این به شما امکان می‌دهد فاصله تزئینات را به دقت تنظیم کنید و به جای گرادیان‌های پس‌زمینه یا عناصر اضافی، جلوه‌های متحرک نمایش زیرخط را با تزئینات متن CSS ایجاد کنید.

برای اطلاعات بیشتر، به مستندات text-decoration-inset در MDN مراجعه کنید.

مطالعه بیشتر

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

اشتراک

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

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