Chrome Dev Insider: نسخه CSS و UI

Rachel Andrew

به نسخه دوم Chrome Dev Insider خوش آمدید، جایی که ما به‌روزرسانی‌های جدید و هیجان‌انگیز در انجمن و اینجا در Chrome را به اشتراک می‌گذاریم. این یک قسمت جدید از داستان های خودی در مورد نحوه برخورد ما با کارمان است و نگاهی گذرا به برخی از مهم ترین به روز رسانی هایی است که باید به آنها توجه کنید.

من ریچل اندرو، مدیر محتوا برای web.dev و developer.chrome.com ، به عنوان بخشی از تیم روابط توسعه‌دهنده Chrome هستم. من بیش از بیست سال است که روی وب کار می کنم، با تمرکز بر استانداردهای وب باز و CSS، و یکی از اعضای کارگروه CSS هستم.

دو ماه پیش، Google I/O را جمع‌بندی کردیم و برخی از مهم‌ترین به‌روزرسانی‌ها را درباره نحوه پشتیبانی از توسعه‌دهندگان در سریع‌تر و قدرتمندتر کردن وب و در عین حال ایمن و خصوصی نگه داشتن اطلاعات کاربر به اشتراک گذاشتیم .

یکی از چیزهایی که برجسته شد (و ما خوشحالیم که جامعه مورد توجه قرار گرفت !) حجم عظیمی از کار تیم برای پشتیبانی بیشتر از ویژگی‌های CSS و UI در وب است. در این نسخه از Chrome Dev Insider، ما شما را در پشت صحنه در مورد اینکه چه کسی پشت این کار است، نحوه کار ما برای حمایت از توسعه دهندگان CSS و UI و آنچه در پیش است، خواهیم برد. به همین دلیل است که از میزبانی این نسخه از Insider بسیار هیجان زده هستم.

در اخبار

در اولین Chrome Dev Insider ، برخی به‌روزرسانی‌ها را در مورد Compat 2021 و ابتکارات Interop 2022 به اشتراک گذاشتیم که در آن فروشندگان مرورگر و بازیکنان اکوسیستم برای ارائه ویژگی‌های بیشتر به وب که در همه مرورگرها پشتیبانی می‌شوند، شریک شده‌اند. این ابتکار تمرکز زیادی بر CSS دارد زیرا ناسازگاری مرورگر یکی از بزرگترین چالش‌ها برای توسعه‌دهندگان CSS است .

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

امتیازات برای مرورگرهای آزمایشی در مارس 2022.

امتیازات مرورگرهای آزمایشی در ژوئیه 2022. آخرین امتیازها را ببینید .

در اوایل ماه گذشته، شاهد انتشار بامپر سافاری با Safari 16.0 Beta بودیم که شامل ویژگی‌های هیجان انگیزی مانند Container Queries ، subgrid و بازرس flexbox است. نسخه‌های اخیر فایرفاکس و کروم شامل تعدادی ویژگی و اصلاحات هیجان‌انگیز است—من هر ماه در سری پست‌های جدیدم به پلتفرم وب، موارد کلیدی را در مرورگرهای پایدار و بتا پوشش می‌دهم.

Scoop Insider: پشتیبانی از توسعه دهندگان CSS و UI

با توجه به اینکه سال 2022 به یک سال هیجان انگیز برای ویژگی های CSS تبدیل شده است، فکر می کنیم زمان خوبی است تا شما را به پشت صحنه ببریم. من با Una Kravets، رهبر DevRel برای Web UI و Devtools و Nicole Sullivan ، مدیر محصول ما برای Web UI که بر CSS و HTML API تمرکز دارد، نشستم تا در مورد سفر Chrome به سمت پشتیبانی از توسعه دهندگان UI صحبت کنم.

بیایید با هر دوی شما شروع کنیم. کمی بیشتر از خودتان بگویید؟

نیکول: من مدیر محصول برای رابط کاربری وب در کروم هستم. من به طور خاص بر روی CSS و HTML APIهای جدید و توسعه دهندگان و طراحانی که UI می سازند تمرکز می کنم. این یک فضای مهیج با برخی از APIهای واقعا مهم است مانند Container Queries ، Scope و (امیدواریم!) ریتم عمودی .

Una: من تیم های Web UI و DevTools DevRel را رهبری می کنم. ما بر روی پشتیبانی از مهندسان UI در پلتفرم وب تمرکز می‌کنیم و مطمئن می‌شویم که آنها ابزارهای مورد نیاز برای موفقیت را دارند. این شامل CSS API ها و اجزای HTML به همراه ویژگی های DevTools برای مشاهده تغییرات فعال و بازخورد می شود.

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

یونا: ما باید کارهایی انجام می دادیم تا نشان دهیم این کار چقدر مهم است و چرا باید در اولویت باشد. ما با بررسی DNA MDN در سال 2019 شروع کردیم، که UI را به عنوان برخی از نقاط دردناک برتر در پلتفرم شناسایی کرد. و از آن زمان، ما به استفاده از داده ها به عنوان راهنمای خود از طریق MDN و نظرسنجی های رضایت توسعه دهندگان داخلی خود ادامه داده ایم. نتیجه همه این‌ها این است که ما توانستیم خرید عمیق‌تری برای رهبری داشته باشیم و توانستیم کارهای مهندسی را در مورد برخی از ویژگی‌های بسیار درخواست شده توسعه‌دهنده در فضای UI اولویت بندی کنیم که همچنین اکثریت تمرکز را برای ابتکاراتی مانند Compat 2021 و Compat 2021 تشکیل می‌دهند. اینتروپ 2022 .

نیکول: ما علاوه بر جذب رهبری، باید راه درستی برای رساندن این APIها به توسعه‌دهندگان نیز پیدا می‌کردیم. وقتی برای اولین بار به کروم پیوستم، در پروژه ای به نام Layered API (یا به اختصار LAPI) این مشکل را به هم زدم. هدف LAPI ها ارائه یک تجربه کامپوننت به توسعه دهندگان بود. من هنوز فکر می کنم که این یک نتیجه عالی برای شوت زدن بود، اما ما اشتباهات زیادی مرتکب شدیم! ما ابتدا روی اعلان‌های نان تست و فهرست مجازی تمرکز کردیم. در دسترس قرار دادن نان تست ها تقریبا غیرممکن است و فهرست مجازی یکی از سخت ترین مولفه ها برای درست کردن آن است. نیت ما خوب بود اما به توسعه دهندگان کمکی نکرد، بنابراین پروژه را غروب کردیم. یادگیری از راه سخت دشوار است، اما هر اشتباهی باعث تقویت رنسانس برای CSS و HTML می شود که در حال حاضر اتفاق می افتد.

بیایید کمی بیشتر در مورد LAPI صحبت کنیم. اونجا چه اتفاقی افتاد؟

نیکول: برای LAPIها، ما می‌دانستیم که وب نیاز به یک تجربه توسعه‌دهنده مؤلفه‌ای دارد که به ایجاد رابط کاربری بومی نزدیک‌تر است. و واضح بود که اختراع مجدد چرخ توسعه دهندگان را عقب نگه داشته است. من نمی توانم تعداد برگه هایی را که در حرفه ام ساخته ام بشمارم! گفتنی است، ما سعی کردیم با ارسال جاوا اسکریپت با مرورگر که بسیار سخت بود، آن را حل کنیم. هیچ‌کس قبلاً جاوا اسکریپت را در مرورگر ارسال نکرده بود، و مشخص نبود که چگونه باید با کد C++ که موتور رندر مرورگر را نیرو می‌دهد تعامل داشته باشد. ما به سایر فروشندگان مرورگر گوش دادیم (از شما متشکرم، موزیلا!) و از این رویکرد عقب نشینی کردیم و بنابراین توانستیم با Open UI چیز بسیار بهتری پیدا کنیم. با تکیه بر HTML و CSS به راه‌حل‌های منعطف و اعلامی می‌رسیم. از آنجایی که بیانی است، می‌توانیم دسترسی‌پذیری را به گونه‌ای تنظیم کنیم که انجام آن با جاوا اسکریپت به این آسانی نباشد. من واقعا در مورد اینکه این به کجا می رود هیجان زده هستم. ما در حال پشتیبانی از منوی انتخابی، پنجره بازشو، راهنمای ابزار، ناوبری، آکاردئون، زبانه ها، چرخ فلک و جابجایی هستیم که الگوهای طراحی رابط کاربری واقعا ضروری هستند.

بنابراین ما چیزهای زیادی یاد گرفته ایم. و من می دانم که ابتکارات دیگری در این فضا وجود دارد، مانند CSS Houdini . داستان چیه؟

Una: بله CSS Houdini مکان دیگری است که ما از جامعه یاد گرفته ایم. بسیاری از ویژگی‌های مفید هودینی وجود دارد، اما بسیاری از آن‌ها بسیار پایین‌تر از آن بودند که پذیرش و پشتیبانی گسترده‌تری را به دست آورند. ما متوجه شدیم که اجرای API های سطح پایین لزوماً اصطکاک را برای توسعه دهندگان کاهش نمی دهد. درعوض، تمرکز بر راه‌حل‌ها و نیازهای سطح بالاتر به جمع‌آوری پشتیبانی بین مرورگرها و فرودهای لازم برای حرکت سوزن در اکوسیستم کمک کرده است. ما در حال حاضر پیشرفت را در https://ishoudinireadyyet.com / دنبال می کنیم.

صحبت از پشتیبانی از مرورگرهای متقابل، به نظر می رسد ابتکاراتی مانند Interop 2022 و Open UI نتایج مثبت قابل توجهی را برای جامعه ارائه می دهند. از توسعه دهندگان چه می شنوید؟

Una: یکی از مهم‌ترین نکات دردناکی که از توسعه‌دهندگان می‌شنویم این است که "طراحی را در مرورگرها یکسان کنیم." ما با همکاری با سایر فروشندگان مرورگر برای اولویت‌بندی و ارائه برخی از ویژگی‌های برنامه‌نویس درخواست‌شده برتر، این مشکل را حل کرده‌ایم. و بازخوردی که از جامعه شنیده ایم بسیار مثبت بوده است. علاوه بر این، از طریق یک تلاش دوباره معماری بزرگ به نام RenderingNG ، می‌توان برخی از این ویژگی‌ها را با عملکرد بسیار بهتری به کار برد. توسعه دهندگان هیجان زده هستند که این ویژگی های مدت ها مورد انتظار که سال ها از آنها خواسته اند، بالاخره روی آنها کار شده و به مرورگرهای متقابل وارد می شوند.

نیکول: هیجان در جامعه محسوس است. می توانید آن را در توییتر ببینید. :)

ثابت شده است که کار با اکوسیستم برای هر موفقیتی که در آسان‌تر کردن زندگی توسعه‌دهندگان داشته‌ایم حیاتی است. من می دانم که تیم شما در آنجا کارهای زیادی انجام داده است. آیا می خواهید جزئیاتی را به اشتراک بگذارید؟

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

به عنوان مثال، چند سال پیش ما کار با فریم ورک های جاوا اسکریپت مانند React و Angular را شروع کردیم. و متا فریم‌ورک‌ها - برای مثال Next، Nuxt و Gatsby. سال گذشته، ما همین کار را با ابزارها و چارچوب‌های رابط کاربری مانند Sass، Bootstrap و Material شروع کردیم. امیدوارم در سال آینده بتوانیم با GreenSock و سایر ابزارهایی که زندگی توسعه دهندگان را آسان تر می کند، همکاری کنیم. من به‌تازگی شاهد سخنرانی Cassie Evans از GreenSock در کنفرانس Smashing بودم و من را از کار با افراد در فضای انیمیشن بسیار هیجان‌زده کرد.

بنابراین بزرگترین فرصت برای اکوسیستم رابط کاربری وب را کجا می بینیم؟

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

و نیکول، نقشه راه بعدی تیم شما چیست؟

نیکول: همه اکتشافات به چیزی قابل حمل تبدیل نمی شوند، اما چیزهای زیادی وجود دارد که من در حال حاضر واقعاً در مورد آنها هیجان زده هستم:

Una به اولین مورد اشاره کرد، ما در حال فعال کردن طراحی پاسخگو و مبتنی بر مولفه هستیم. این شامل ابزارهایی برای طراحی سیستم های رنگی است تا طراحان بتوانند به ترجیحات کاربر مانند حالت تاریک پاسخ دهند. به عنوان مثال، فضای رنگی OKLCH روشنایی را در رنگ ها ثابت نگه می دارد. طراحان می توانند از انتخاب رنگ ها به طراحی روابط بین رنگ ها حرکت کنند، بدون اینکه به پالت های گل آلود ختم شوند!

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

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

چیزی که من شخصاً بیشتر از همه در مورد آن هیجان زده هستم، کنترل های داخلی وب UI است. توسعه دهندگان بارها و بارها به ساخت یک تبلت یکسان ادامه می دهند، فکر می کنم مرورگر می تواند کمک کند. در Open UI ، ما در حال کار بر روی مؤلفه‌هایی مانند منوی انتخاب، پنجره بازشو، راهنمای ابزار، زبانه‌ها، ناوبری، آکاردئون و جابجایی هستیم. ما در حال کاوش هستیم که قابلیت دسترسی در این مرورگرهای اولیه چگونه به نظر می رسد تا وب به مرور زمان به طور پیش فرض در دسترس باشد. سپس توسعه‌دهندگان می‌توانند روی مشکلات پیچیده‌تر و ظریف‌تر تمرکز کنند، در حالی که اصول اولیه مانند تب تب‌ها چگونه می‌تواند توسط مرورگر پشتیبانی شود. این احتمالاً به پست خود نیاز دارد، بنابراین فعلاً در آنجا متوقف می شوم!

در نهایت، ما به سرمایه گذاری در تعامل بین مرورگرها ادامه خواهیم داد. کار کردن با افراد WebKit و Gecko برای ایجاد ثبات در تجربه توسعه‌دهنده عالی بوده است. ما با صدای بلند و واضح از توسعه دهندگان شنیدیم که آنها این را می خواهند!

اوه، و اگر آن را بررسی نکرده اید، API Shared Element Transitions تیم Seamless Web قرار است نحوه طراحی افراد برای وب را تغییر دهد. همه آن تغییرات کوچک ظریف که به طراحان اجازه می دهد طرح های خود را در فضای فیزیکی جهت دهند، نه تنها ممکن، بلکه آسان خواهند بود. جیک آرچیبالد یک دمو عالی دارد.

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

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

Una: موارد جدید ما برای جلسه پلت فرم وب در I/O نکات برجسته بسیاری از ویژگی هایی را که امسال فرود می آیند را پوشش می دهد. آدام آرگیل همچنین یک مقاله عالی در مورد تمام فرودهای جدید و آینده CSS نوشت. به‌طور مداوم، فعلاً بر روی نسخه‌های پایدار تمرکز می‌کنم و فقط از کارهای دیگری که در راه است آگاه می‌شوم. سری جدید شما در پلتفرم وب عالی است که می‌توانید آن را دنبال کنید. اشتراک در خبرنامه web.dev این محتوا را به صندوق ورودی توسعه دهندگان نیز می آورد. و برای توسعه دهندگانی که به دنبال مشارکت و کمک به همه اینها هستند، پیوستن به Open UI یکی از بهترین راه هایی است که می توانید از این کار پشتیبانی کنید.

کلید به روز رسانی های آینده

ما سنت خود را حفظ می کنیم تا به شما در مورد تغییرات آتی که باید در هنگام ساختن تجربیات وب خود در ذهن داشته باشید، آگاه شویم.

حداکثر سن برای کوکی ها را به 400 روز محدود کنید

• به‌روزرسانی: وقتی کوکی‌ها با ویژگی صریح Expires/Max-Age تنظیم می‌شوند، مقدار آن اکنون به بیش از 400 روز در آینده محدود نمی‌شود. قبلاً هیچ محدودیتی وجود نداشت و کوکی ها می توانستند چندین هزار سال در آینده منقضی شوند. هدف این محدودیت ایجاد تعادل بین الگوهای استفاده رایج و احترام به حریم خصوصی کاربر است. هر سایتی که بیشتر از هر 400 روز بازدید شود، می‌تواند کوکی‌ها را برای اطمینان از تداوم خدمات بازخوانی کند و کاربران مطمئن باشند که کوکی‌ها برای هزاران سال بدون استفاده در مرورگرشان باقی نمی‌مانند.
• جدول زمانی تخمینی: ارسال در Chrome 104 (در 2 اوت 2022 پایدار است).
• توسعه دهنده CTA: برنامه نویسان ممکن است نیاز داشته باشند زمانی که کاربران از وب سایت های خود بازدید می کنند، کوکی ها را بیشتر از قبل به طور فعالانه به روز کنند. در غیر این صورت، کاربران ممکن است 400 روز پس از تنظیم اولیه کوکی از سیستم خارج شوند.

امیدوارم از خواندن این نسخه Chrome Dev Insider لذت برده باشید. اگر آن را از دست دادید، این اولین مورد است. ما مشتاقانه منتظر هستیم که در سه ماهه آینده چیزهای بیشتری را برای شما به ارمغان بیاوریم.

تا آن زمان، نظر خود را در مورد این نسخه از Chrome Dev Insider به ما بگویید و برای بهتر کردن آن چه کاری می‌توانیم انجام دهیم.

نظر شما در مورد این نسخه از Chrome Dev Insider چیست؟ بازخورد خود را به اشتراک بگذارید .