جدید در کروم 71

Pete LePage

در Chrome 71، ما پشتیبانی از موارد زیر را اضافه کرده‌ایم:

• نمایش زمان های نسبی اکنون بخشی از API Intl است.
• برای متنی که به صورت عمودی جریان دارد، مشخص کنید که زیر خط باید در کدام سمت متن ظاهر شود .
• نیاز به فعال سازی کاربر قبل از استفاده از API سنتز گفتار.

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

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

تغییر گزارش

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

• فهرست تغییر مخزن منبع Chromium
• به‌روزرسانی‌های ChromeStatus.com برای Chrome 71
• لغو و حذف Chrome 71

نمایش زمان های نسبی با Intl.RelativeTimeFormat()

توییتر زمان نسبی را برای آخرین پست نشان می دهد

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

نمایش زمان‌های نسبی آنقدر رایج شده است که اکثر کتابخانه‌های تاریخ/زمان متداول، توابع محلی‌سازی شده را برای مدیریت این مورد برای ما ارائه می‌کنند. در واقع، تقریباً هر برنامه وب که می‌سازم، Moment JS یکی از اولین کتابخانه‌هایی است که به صراحت برای این منظور اضافه می‌کنم.

Chrome 71 Intl.RelativeTimeFormat() را معرفی می‌کند که کار را به موتور جاوا اسکریپت منتقل می‌کند و قالب‌بندی محلی زمان‌های نسبی را فعال می‌کند. این یک افزایش عملکرد کوچک به ما می دهد، و به این معنی است که ما فقط زمانی به آن کتابخانه ها به عنوان پلی پر نیاز داریم که مرورگر هنوز از API های جدید پشتیبانی نمی کند.

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

استفاده از آن ساده است، یک نمونه جدید ایجاد کنید و محلی را مشخص کنید، سپس فقط فرمت را با زمان نسبی فراخوانی کنید. برای جزئیات کامل، پست Intl.RelativeTimeFormat API Mathias را بررسی کنید.

تعیین مکان زیر خط برای متن عمودی

متن عمودی با خط‌های متناقض

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

در Chrome 71، ویژگی text-underline-position اکنون left یا right به عنوان بخشی از مشخصات دکوراسیون متن CSS3 می‌پذیرد. مشخصات دکوراسیون متن CSS3 چندین ویژگی جدید اضافه می کند که به استفاده از آنها اجازه می دهد مواردی مانند نوع خط ، سبک ، رنگ و موقعیت را مشخص کنید.

.left {
  text-underline-position: left;
}

.right {
  text-underline-position: right;
}

سنتز گفتار نیاز به فعال سازی کاربر دارد

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

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

const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
  window.speechSynthesis.speak(utterance);
} catch (ex) {
  console.log('speechSynthesis not available', ex);
}

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

هیچ چیز بدتر از این نیست که به یک سایت بروید و آن را غافلگیر کنید و همکارانی که دور شما نشسته اند.

و بیشتر!

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

• متد Element.requestFullscreen() اکنون می‌تواند در اندروید سفارشی‌سازی شود و به شما امکان می‌دهد بین نمایان کردن نوار پیمایش در مقابل حالت کاملاً غوطه‌ور که در آن هیچ کنترل عامل کاربر تا زمانی که یک حرکت کاربر انجام نشود، یکی را انتخاب کنید.
• حالت اعتبار پیش‌فرض برای درخواست‌های اسکریپت ماژول ، از omit به same-origin تغییر کرده است.
• و کروم را با مشخصات Shadow DOM v1 در یک ردیف قرار می‌دهد، Chrome 71 اکنون ویژگی‌های :host() و :host-context() و همچنین آرگومان‌های ::slotted() را محاسبه می‌کند.

ویدیوهای Chrome DevSummit

اگر به Chrome Dev Summit نرسیدید، یا شاید هم موفق شدید، اما همه گفتگوها را ندیدید، فهرست پخش Chrome Dev Summit 2018 را در کانال YouTube ما بررسی کنید.

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

ماریکو و جیک در مورد نحوه ساخت Squoosh در برنامه های وب پیچیده JS-heavy، Avoiding the Slow صحبت کردند.

کیتی و حسین چند تکنیک عالی برای به حداکثر رساندن عملکرد سایت خود را در Speed ​​Essentials: تکنیک‌های کلیدی برای وب‌سایت‌های سریع پوشش دادند.

جیک کیک را انداخت . و تعداد زیادی ویدیوی عالی دیگر در فهرست پخش Chrome DevSummit 2018 وجود دارد، بنابراین آنها را بررسی کنید.

مشترک شوید

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

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