جدید در کروم 62

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

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

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

شاخص کیفیت شبکه

API اطلاعات شبکه برای مدتی در کروم در دسترس بوده است، اما با توجه به اتصال کاربر، فقط سرعت‌های تئوری شبکه را ارائه می‌کند. تصور کنید از WiFi استفاده می کنید، اما به یک هات اسپات سلولی متصل هستید که فقط سرعت 2G دارد؟ API WiFi را گزارش می کند!

console.log(navigator.connection.type);
> wifi

در Chrome 62، API گسترش یافته است تا معیارهای عملکرد واقعی شبکه را از مشتری ارائه دهد. با استفاده از این سیگنال‌های کیفیت شبکه، می‌توانید محتوا را برای شبکه تنظیم کنید. به عنوان مثال، در اتصالات بسیار کند، می توانید با ارائه نسخه کاهش یافته، عملکرد بارگذاری صفحه را بهبود بخشید.

برای ساده کردن منطق برنامه شما، API عملکرد شبکه اندازه گیری شده را بر حسب مقایسه با اتصال سلولی برمی گرداند. به عنوان مثال، اتصال به یک اتصال فیبر فوق سریع، API 4G را گزارش می دهد.

console.log(navigator.connection.effectiveType);
> 4G

این سیگنال‌ها همچنین به‌عنوان سرصفحه‌های درخواست HTTP در دسترس خواهند بود و از طریق Client Hints فعال می‌شوند. نمونه را بررسی کنید و برای غواصی عمیق تر به مشخصات آن نگاهی بیندازید.

فونت های متغیر OpenType

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

یک فونت متغیر OpenType معادل چندین فونت مجزا است که می تواند به طور فشرده در یک فایل فونت بسته بندی شود. با تنظیم ویژگی font-variation-settings CSS، کشش، سبک، وزن و موارد دیگر را می توان به راحتی تنظیم کرد و تعداد نامحدودی از تغییرات سبک را ارائه می دهد. اکنون می توان آن سه فونت را در یک فایل فشرده ترکیب کرد.

.heading {
  font-family: "Avenir Next Variable";
  font-size: 48px;
  font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
  font-family: "Avenir Next Variable";
  font-size: 24px;
  font-variation-settings: 'wght' 400;
}

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

ضبط رسانه از عناصر DOM

اکنون می‌توانید با استفاده از Media Capture از DOM Elements API مستقیماً از HTMLMediaElements مانند صدا و تصویر، محتوا را در MediaStream ضبط کنید .

پس از فراخوانی captureStream() در یک عنصر رسانه ای HTML، محتوای پخش شده را می توان دستکاری، پردازش، ارسال از راه دور یا ضبط کرد. تصور کنید از صدای وب برای ایجاد اکولایزر یا کد صوتی خود استفاده می کنید. یا محتوا را با استفاده از WebRTC به یک سایت راه دور پخش کنید. فرصت ها تقریبا بی پایان هستند.

برچسب‌های ایمن برای برخی از صفحات HTTP نیست

همانطور که قبلاً اعلام کردیم ، از Chrome 62، زمانی که کاربر داده‌ها را در صفحه HTTP وارد می‌کند، کروم صفحه را با برچسبی در نوار آدرس به‌عنوان «Not Secure» علامت‌گذاری می‌کند. این برچسب همچنین در حالت ناشناس برای همه صفحات HTTP نشان داده خواهد شد.

و بیشتر!

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

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

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