جدید در کروم 65

پیت لی پیج

  • CSS Paint API به شما این امکان را می دهد که به صورت برنامه نویسی یک تصویر تولید کنید.
  • Server Timing API به سرورهای وب اجازه می دهد تا اطلاعات زمان بندی عملکرد را از طریق هدرهای HTTP ارائه دهند.
  • ویژگی جدید CSS display: contents می تواند جعبه ها را ناپدید کند!

و خیلی چیزهای دیگر وجود دارد!

من پیت لی پیج هستم. بیایید وارد آن شویم و ببینیم چه چیز جدیدی برای توسعه دهندگان در Chrome 65 وجود دارد!

لیست کامل تغییرات را می خواهید؟ فهرست تغییرات مخزن منبع Chromium را بررسی کنید.

CSS Paint API

CSS Paint API به شما این امکان را می دهد که به صورت برنامه ریزی شده یک تصویر برای ویژگی های CSS مانند background-image یا border-image ایجاد کنید.

به جای ارجاع به یک تصویر، می توانید از تابع رنگ جدید برای ترسیم تصویر استفاده کنید - بسیار شبیه به یک عنصر بوم.

<style>
  .myElem { background-image: paint(checkerboard); }
</style>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

به عنوان مثال، به جای افزودن عناصر DOM اضافی برای ایجاد افکت موج دار بر روی یک دکمه استایل دار، می توانید از paint API استفاده کنید.

همچنین این یک روش قدرتمند برای پر کردن ویژگی‌های CSS است که هنوز در مرورگر پشتیبانی نمی‌شوند.

سورما یک پست عالی با چندین دمو در توضیح دهنده خود دارد.

Server Timing API

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

Server Timing API جدید به سرور شما اجازه می دهد تا اطلاعات زمان بندی را به مرورگر منتقل کند. به شما تصویر بهتری از عملکرد کلی شما می دهد.

با افزودن یک سرصفحه Server-Timing به پاسخ خود، می‌توانید هر اندازه که می‌خواهید معیارها را دنبال کنید: زمان خواندن پایگاه داده، زمان راه‌اندازی یا هر چیز دیگری که برای شما مهم است:

'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'

آنها در Chrome DevTools نشان داده شده‌اند، یا می‌توانید آنها را از سرصفحه پاسخ بیرون بکشید و با سایر تجزیه و تحلیل‌های عملکرد خود ذخیره کنید.


display: contents

ویژگی جدید CSS display: contents بسیار نرم است!

هنگامی که به یک عنصر کانتینر اضافه می شود، هر کودکی جای خود را در DOM می گیرد و اساساً ناپدید می شود. فرض کنید من دو div دارم، یکی داخل دیگری. div بیرونی من یک حاشیه قرمز، یک پس‌زمینه خاکستری دارد و عرض آن 200 پیکسل است. div داخلی دارای حاشیه آبی و پس‌زمینه آبی روشن است.

.disp-contents-outer {
  border: 2px solid red;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}
.disp-contents-inner {
  border: 2px solid blue;
  background-color: lightblue;
  padding: 10px;
}

به طور پیش فرض، div داخلی در div بیرونی قرار دارد.

من درونی <div> هستم

افزودن display: contents به div خارجی، باعث می شود که div خارجی ناپدید شود و محدودیت های آن دیگر برای div داخلی اعمال نمی شود. div داخلی اکنون 100٪ عرض است.

از DevTools برای بررسی DOM استفاده کنید و متوجه شوید که div خارجی هنوز وجود دارد.

موارد زیادی وجود دارد که این ممکن است مفید باشد، اما رایج ترین مورد مربوط به flexbox است. با فلکس باکس، فقط فرزندان فوری ظرف فلکس به اقلام فلکس تبدیل می شوند.

اما، هنگامی که display: contents برای کودک اعمال می‌کنید، فرزندان آن به آیتم‌های انعطاف‌پذیر تبدیل می‌شوند و با استفاده از قوانین مشابهی که برای والدینشان اعمال می‌شد، چیده می‌شوند.

برای جزئیات بیشتر و نمونه‌های دیگر، جعبه‌های ناپدید شدن پست عالی راشل اندرو با محتویات نمایشی را بررسی کنید.

و بیشتر!

اینها تنها تعدادی از تغییرات کروم 65 برای توسعه دهندگان است، البته موارد بسیار بیشتری نیز وجود دارد.

  • نحو برای تعیین HSL و HSLA و مختصات RGB و RGBA برای ویژگی رنگ اکنون با مشخصات CSS Color 4 مطابقت دارد.
  • یک خط مشی ویژگی جدید وجود دارد که به شما امکان می دهد XHR های همزمان را از طریق یک هدر HTTP یا ویژگی iframe allow کنترل کنید.

حتماً New in Chrome DevTools را بررسی کنید تا بدانید چه چیزهای جدیدی در DevTools در Chrome 65 وجود دارد. و اگر به برنامه‌های وب پیشرفته علاقه دارید، سری ویدیوهای جدید PWA Roadshow را بررسی کنید. سپس، روی دکمه اشتراک در کانال YouTube ما کلیک کنید، و هر زمان که یک ویدیوی جدید را راه اندازی کنیم، یک اعلان ایمیل دریافت خواهید کرد.

من Pete LePage هستم، و به محض اینکه Chrome 66 منتشر شود، اینجا خواهم بود تا به شما بگویم -- چه چیزهای جدیدی در Chrome وجود دارد!