- Chrome 62 با ارائه معیارهای عملکرد واقعی به جای نتایج نظری، API اطلاعات شبکه را مفیدتر میکند.
- پشتیبانی از فونت های متغیر OpenType به پایان رسیده است.
- می توانید جریان های رسانه ای را از عناصر HTML Media ضبط کنید .
- من یک یادآوری ویژه درباره یک تغییر مهم دارم که در Chrome 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 برای توسعه دهندگان است، البته موارد بسیار بیشتری نیز وجود دارد.
- API درخواست پرداخت اکنون در Chrome برای iOS در دسترس است.
- می توانید با آزمایش اولیه WebVR شروع به ساخت تجربیات غنی از واقعیت مجازی کنید.
سپس در کانال یوتیوب ما مشترک شوید و هر زمان که ویدیوی جدیدی را راه اندازی کنیم، یک اعلان ایمیل دریافت خواهید کرد.
من Pete LePage هستم، و به محض اینکه Chrome 63 منتشر شد، اینجا خواهم بود تا به شما بگویم -- چه چیزهای جدیدی در Chrome وجود دارد!
،- Chrome 62 با ارائه معیارهای عملکرد واقعی به جای نتایج نظری، API اطلاعات شبکه را مفیدتر میکند.
- پشتیبانی از فونت های متغیر OpenType به پایان رسیده است.
- می توانید جریان های رسانه ای را از عناصر HTML Media ضبط کنید .
- من یک یادآوری ویژه درباره یک تغییر مهم دارم که در Chrome 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 برای توسعه دهندگان است، البته موارد بسیار بیشتری نیز وجود دارد.
- API درخواست پرداخت اکنون در Chrome برای iOS در دسترس است.
- می توانید با آزمایش اولیه WebVR شروع به ساخت تجربیات غنی از واقعیت مجازی کنید.
سپس در کانال یوتیوب ما مشترک شوید و هر زمان که ویدیوی جدیدی را راه اندازی کنیم، یک اعلان ایمیل دریافت خواهید کرد.
من Pete LePage هستم، و به محض اینکه Chrome 63 منتشر شد، اینجا خواهم بود تا به شما بگویم -- چه چیزهای جدیدی در Chrome وجود دارد!