جدید در کروم 108

در اینجا چیزی است که شما باید بدانید:

من آدریانا خارا هستم. بیایید وارد آن شویم و ببینیم چه چیز جدیدی برای توسعه دهندگان در Chrome 108 وجود دارد.

واحدهای اندازه نمای جدید

واحدهای نمای جدید به شما کنترل بیشتری برای ایجاد رابط‌های کاربری تطبیقی ​​می‌دهند.

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

واحدهای large با این فرض که رابط های عامل کاربر جمع شده اند، اندازه دید را ارائه می دهند.

از سوی دیگر، واحدهای small با فرض گسترش اینترفیس ها، اندازه دید را فراهم می کنند.

و با واحدهای dynamic ، اندازه ویوپورت به طور خودکار در پاسخ به عناصر رابط مرورگر که نشان داده می شوند یا نه، تنظیم می شود.

مقدار هر چیزی در محدوده واحد بزرگ (حداکثر) و واحد کوچک (حداقل) خواهد بود.

قسمت های مختلف نمای برای هر نوع واحد دید.

برای جزئیات بیشتر این مقاله را بررسی کنید. همچنین تغییر رفتار تغییر اندازه نمای پورت Android را بررسی کنید تا نمای خود را به درستی مدیریت کنید.

فونت های متغیر اکنون در COLRv1 پشتیبانی می شوند.

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

اما مشخصات COLRv1 شامل تغییرات OpenType نیز می‌شود، که به معنی اجازه دادن به تغییرات در ویژگی‌های فونت با تغییر مقادیر محور متغیر است. اکنون چنین تغییراتی پشتیبانی می شود.

این نسخه همچنین شامل پسوندهای شرط font-tech() و font-format() برای CSS @supports است.

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

در اینجا با نسخه نمایشی بازی کنید و با فونت های متغیر به کلمات خود تأثیر بگذارید.

روش های FileSystemSyncAccessHandle اکنون همزمان هستند.

سیستم فایل خصوصی مبدا دسترسی به نوع خاصی از فایل را فراهم می کند که برای عملکرد بسیار بهینه شده است، توسعه دهندگان می توانند با فراخوانی createSyncAccessHandle() به چنین فایل هایی دسترسی پیدا کنند، که روشی است که در اشیاء FileSystemFileHandle در معرض دید قرار می گیرد.

این تماس منجر به یک FileSystemSyncAccessHandle می شود.

متدهای truncate(newSize) ، getSize() ، flush() و close() در آن دسته دسترسی، قبلاً ناهمزمان بودند، اما در Chrome 108 همگام هستند.

دلیل خوبی برای این تغییر وجود دارد، این باعث می‌شود FileSystemSyncAccessHandle با API فایل مشابه POSIX که برنامه‌های کاربردی مبتنی بر Wasm انتظار دارند، مطابقت داشته باشد. API را ارگونومیک تر می کند و در عین حال دستاوردهای عملکرد قابل توجهی را به همراه دارد.

این یک تغییر بالقوه شکسته است، اگر از روش های بالا استفاده می کنید، هر گونه استفاده از Promise.then() خراب می شود. اگر یک زنگ then() را بر روی نتیجه هر یک از متدهای قبلی ناهمزمان و اکنون همزمان زنجیره بزنید، باید کد خود را تغییر دهید.

// ⛔️ This will break, and you need to restructure your code:
accessHandle.flush().then(/* Follow-up code */);
// ✅ Correct:
accessHandle.flush();
/* Follow-up code */

برای دستورالعمل های دقیق تر به این مقاله مراجعه کنید

و بیشتر!

البته چیزهای بیشتری وجود دارد.

در ادامه مطلب

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

مشترک شوید

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

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

،

در اینجا چیزی است که شما باید بدانید:

من آدریانا خارا هستم. بیایید وارد آن شویم و ببینیم چه چیز جدیدی برای توسعه دهندگان در Chrome 108 وجود دارد.

واحدهای اندازه نمای جدید

واحدهای نمای جدید به شما کنترل بیشتری برای ایجاد رابط‌های کاربری تطبیقی ​​می‌دهند.

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

واحدهای large با این فرض که رابط های عامل کاربر جمع شده اند، اندازه دید را ارائه می دهند.

از سوی دیگر، واحدهای small با فرض گسترش اینترفیس ها، اندازه دید را فراهم می کنند.

و با واحدهای dynamic ، اندازه ویوپورت به طور خودکار در پاسخ به عناصر رابط مرورگر که نشان داده می شوند یا نه، تنظیم می شود.

مقدار هر چیزی در محدوده واحد بزرگ (حداکثر) و واحد کوچک (حداقل) خواهد بود.

قسمت های مختلف نمای برای هر نوع واحد دید.

برای جزئیات بیشتر این مقاله را بررسی کنید. همچنین تغییر رفتار تغییر اندازه نمای پورت Android را بررسی کنید تا نمای خود را به درستی مدیریت کنید.

فونت های متغیر اکنون در COLRv1 پشتیبانی می شوند.

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

اما مشخصات COLRv1 شامل تغییرات OpenType نیز می‌شود، که به معنی اجازه دادن به تغییرات در ویژگی‌های فونت با تغییر مقادیر محور متغیر است. اکنون چنین تغییراتی پشتیبانی می شود.

این نسخه همچنین شامل پسوندهای شرط font-tech() و font-format() برای CSS @supports است.

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

در اینجا با نسخه نمایشی بازی کنید و با فونت های متغیر به کلمات خود تأثیر بگذارید.

روش های FileSystemSyncAccessHandle اکنون همزمان هستند.

سیستم فایل خصوصی مبدا دسترسی به نوع خاصی از فایل را فراهم می کند که برای عملکرد بسیار بهینه شده است، توسعه دهندگان می توانند با فراخوانی createSyncAccessHandle() به چنین فایل هایی دسترسی پیدا کنند، که روشی است که در اشیاء FileSystemFileHandle در معرض دید قرار می گیرد.

این تماس منجر به یک FileSystemSyncAccessHandle می شود.

متدهای truncate(newSize) ، getSize() ، flush() و close() در آن دسته دسترسی، قبلاً ناهمزمان بودند، اما در Chrome 108 همگام هستند.

دلیل خوبی برای این تغییر وجود دارد، این باعث می‌شود FileSystemSyncAccessHandle با API فایل مشابه POSIX که برنامه‌های کاربردی مبتنی بر Wasm انتظار دارند، مطابقت داشته باشد. API را ارگونومیک تر می کند و در عین حال دستاوردهای عملکرد قابل توجهی را به همراه دارد.

این یک تغییر بالقوه شکسته است، اگر از روش های بالا استفاده می کنید، هر گونه استفاده از Promise.then() خراب می شود. اگر یک زنگ then() را بر روی نتیجه هر یک از متدهای قبلی ناهمزمان و اکنون همزمان زنجیره بزنید، باید کد خود را تغییر دهید.

// ⛔️ This will break, and you need to restructure your code:
accessHandle.flush().then(/* Follow-up code */);
// ✅ Correct:
accessHandle.flush();
/* Follow-up code */

برای دستورالعمل های دقیق تر به این مقاله مراجعه کنید

و بیشتر!

البته چیزهای بیشتری وجود دارد.

در ادامه مطلب

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

مشترک شوید

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

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