پر کردن شکاف

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

Rachel Andrew

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

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

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

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

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

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

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

چرا در پشتیبانی شکاف وجود دارد؟

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

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

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

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

مشکلات

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

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

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

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

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

پیام‌رسانی

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

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

• یادگیری سی‌اس‌اس
• فرم‌های یادگیری
• طراحی را یاد بگیرید
• یادگیری PWA

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

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

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

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

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