پر کردن شکاف

ساختن برای وب را آسان تر می کند.

Rachel Andrew

وقتی با توسعه‌دهندگان صحبت می‌کنیم، چه به صورت جداگانه یا از طریق نظرسنجی‌هایی مانند وضعیت CSS ، مکرراً همان چیزها را می‌شنویم. برای توسعه‌دهندگان، ساختن وب‌سایت‌ها و برنامه‌هایی که در مرورگرها به خوبی کار می‌کنند، دشوار است، و برایشان سخت است که بدانند ویژگی‌های جدید هیجان‌انگیز چه موقع ایمن هستند.

شکاف فلکس باکس

به عنوان مثالی از یک ویژگی مشکل ساز، ویژگی gap به شما امکان می دهد بین موارد grid یا flex یا ستون ها در یک ظرف چند رنگ فاصله ایجاد کنید. در حالی که ما برای مدت طولانی column-gap در چند وجهی داشته ایم، ویژگی برای اولین بار در طرح بندی شبکه ای به عنوان grid-gap ، همراه با grid-column-gap و grid-row-gap ظاهر شد.

درست پس از اینکه چیدمان شبکه در مرورگرها قرار گرفت، ویژگی به همراه row-gap و column-gap به عنوان gap تغییر نام داد. سپس مشخص شد که در طرح بندی انعطاف پذیر نیز کار کند. تغییر نام به این معنی است که ما چندین ویژگی نداریم که یک کار را انجام دهند.

.box {
  display: flex;
  gap: 1em;
}

فایرفاکس این ویژگی را برای طرح‌بندی‌های انعطاف‌پذیر در اکتبر ۲۰۱۸ ارسال کرد. این ویژگی تا ژوئیه ۲۰۲۰ در Chrome نشان داده نشد و به دنبال آن Safari در آوریل ۲۰۲۱ عرضه شد. این بدان معناست که دو سال و شش ماه فاصله وجود داشت تا بتوانیم با خیال راحت از gap استفاده کنیم. در واقع، برای اکثر توسعه دهندگان، به دلیل نیاز به پشتیبانی از نسخه های مرورگر قدیمی تر از آخرین، انتظار بسیار طولانی تر بود. پشتیبانی از gap در طرح‌بندی انعطاف‌پذیر با این واقعیت که ما نمی‌توانیم از پرس‌وجوهای ویژگی برای شناسایی پشتیبانی شکاف در طرح‌بندی انعطاف‌پذیر استفاده کنیم، مشکل‌سازتر شد. از آنجایی که ویژگی gap در grid پشتیبانی می‌شود، @supports (gap:1em) true خواهد شد.

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

چرا شکاف هایی در حمایت وجود دارد؟

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

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

در حالی که یک مرورگر ممکن است در نمونه سازی پیشرو باشد، نمایندگان همه مرورگرها (و سایر سازمان ها) در گروه کاری CSS درباره ویژگی های CSS بحث می کنند. بسیار مهم است که یک ویژگی در همه مرورگرها قابل پیاده سازی باشد و به گونه ای طراحی نشده باشد که اجرای آن در یک مرورگر غیرممکن باشد. این منجر به شکاف دائمی در پشتیبانی و عدم پذیرش این ویژگی می شود.

با این حال، وقتی نوبت به پیاده سازی یک ویژگی می رسد، باید در کنار سایر ویژگی های ممکن برای آن مرورگر اولویت بندی شود. و، گاهی اوقات چیزهایی در پشت کارهای دیگری که باید انجام شود تا مرورگر بهتر انجام شود، متوقف می شود. یک مثال عالی از این کار RenderingNG در Chromium است. این امر راه را برای اجرای زیرشبکه هموار کرده است. با این حال، شکاف طولانی بین فایرفاکس و زیرشبکه حمل و نقل کرومیوم به دلیل نیاز به طرح شبکه ای است که ابتدا در موتور رندر جدید دوباره پیاده سازی شود.

مشکلات

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

دوم مشکل پیام رسانی است. چگونه می توانیم مشخص کنیم که شکاف های پشتیبانی کجاست؟ چگونه ویژگی‌های جدید را به اشتراک می‌گذاریم بدون اینکه مجبور شویم همه به دقت درباره هر چیز تحقیق کنند تا بفهمند چقدر از آن پشتیبانی می‌شود؟

قابلیت همکاری

مرورگرها در حال حاضر با هم کار می کنند تا مشکل قابلیت همکاری را حل کنند. سال گذشته Compat 2021 به کاهش شکاف در پشتیبانی در تعدادی از ویژگی‌ها، از جمله ویژگی شکاف در طرح انعطاف‌پذیر کمک کرد. امسال تلاش Interop 2022 بر روی 15 ویژگی متمرکز شده است و قبلاً روی برخی از آنها حرکت هایی صورت گرفته است.

می توانید پیشرفت را در داشبورد Interop 2022 دنبال کنید.

پیام رسانی

مشکل دوم چیزی است که وقتی درباره ویژگی‌های اینجا در web.dev و developer.chrome.com صحبت می‌کنیم، مایلم به آن کمک کنم. می‌خواهم وقتی محتوای ما را می‌خوانید وضعیت ویژگی‌ها کاملاً واضح باشد و ما راه‌های عملی برای پیمایش مشکلات پشتیبانی ارائه دهیم.

ما تعدادی از دوره های اساسی را راه اندازی کرده ایم که در آینده بیشتر خواهد بود. این دوره ها به شما کمک می کند تا یاد بگیرید چگونه برای وب مدرن با استفاده از فناوری های اصلی پلت فرم وب بسازید. بررسی کنید:

• CSS را یاد بگیرید
• فرم ها را بیاموزید
• طراحی را بیاموزید
• PWA را یاد بگیرید

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

ما همچنین از طریق پشتیبانی از پروژه Open Web Docs به باز کردن اسناد وب کمک می کنیم. این تضمین می کند که ما اسناد درجه یک در MDN را به همراه داده های به روز سازگاری مرورگر داریم. سپس از این داده ها در اینجا در web.dev برای نشان دادن پشتیبانی از ویژگی ها استفاده می کنیم. در اینجا پشتیبانی فعلی gap در طرح انعطاف پذیر است.

اگر می‌خواهید درباره چشم‌انداز Chrome برای وب، چیزهایی که در آزمایش‌های Origin و Developer آنها را آزمایش می‌کنیم، بیشتر بدانید، آن محتوا را به طور فزاینده‌ای در سایت خواهر ما - developer.chrome.com پیدا خواهید کرد. ممکن است محتوای آنجا آزمایشی باشد یا در حال حاضر فقط در Chrome پشتیبانی شود، اما ما دوست داریم آن را بررسی کنید و بازخورد ارائه دهید.

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

عکس کریستوفر ماکسیمیلیان .