TablesNG 72 اشکال کروم را برای قابلیت همکاری بهتر حل می کند

Una Kravets

Aleks Totic

TablesNG در Chromium 91 راه‌اندازی می‌شود و تعداد زیادی باگ را که سال‌ها بخشی از پلتفرم وب بوده‌اند، برطرف می‌کند. این به‌روزرسانی‌ها سازگاری مرورگر را به عنوان بخشی از تلاش #Compat2021 بهبود می‌بخشد و استفاده از جداول در پلتفرم وب را به طور کلی بهبود می‌بخشد. برخی از مواردی که بیشترین ستاره را دارند عبارتند از position: sticky در ردیف‌ها ، هندسه زیرپیکسل ، و شکستن مناسب حاشیه .

تلاش TablesNG

TablesNG یک تلاش چند ساله است که توسط توسعه‌دهنده کروم الکس توتیک رهبری می‌شود تا به طور کامل نحوه نمایش جداول در وب را بازسازی کند. جداول بخش خاصی از اصطکاک در توسعه وب هستند، تا حدی به دلیل تاریخچه آنها.

جداول در سال 1994 به HTML اضافه شدند، سپس به عنوان روش اصلی برای ایجاد طرح‌بندی صفحات پیچیده برای سال‌ها مورد استفاده قرار گرفتند. آنها هنوز در سراسر وب یافت می شوند، اگرچه استفاده مدرن عموماً برای نمایش داده های جدولی است. با این حال، تفاوت های بزرگی در رفتار جدول در بین مرورگرها وجود دارد که بسیاری از آنها به دلیل ناقص بودن مشخصات جداول و کمبود جزئیات به وجود آمده اند. جداول نیز قبل از بسیاری از ویژگی‌های CSS در مرورگرها پیاده‌سازی شدند: حالت‌های نوشتاری متعامد، position:relative ، box-sizing ، ظروف فلکس‌باکس و موارد دیگر. بنابراین پشتیبانی از بسیاری از این ویژگی ها متناقض بود.

طرح جدول ابتکاری که وب سایت Space Jam را از طریق Shannon Draper تشکیل می داد.

مشخصات جدید، CSS Table Module Level 3، پس از پیاده‌سازی مجدد جداول Edge در سال 2018 نوشته شد. TablesNG یک تلاش معماری مجدد است که نه تنها از این مشخصات جدید پیروی می‌کند، بلکه همچنین بسیاری از ناهماهنگی‌های جداول را در طول مسیر برطرف می‌کند. . برخی از مشهودترین تغییراتی که از این به وجود آمده است عبارتند از:

• فعال کردن موقعیت چسبنده در ردیف‌ها برای جداول طولانی که پیمایش می‌کنند.
• رفع هم ترازی با هندسه زیر پیکسل و حاشیه جدول.
• نقاشی بهبود یافته برای پس زمینه و حاشیه.

position: sticky در ردیف

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

هدر جدول در موقعیت چسبناک باقی نمی ماند، با وجود اینکه position: sticky به <thead> اعمال می شود.

دلیل اینکه ما برای مدت طولانی این باگ را داشتیم این بود که position: sticky به خوبی پس از بیرون آمدن جداول HTML مشخص شد. قبل از این اصلاح، سرصفحه‌هایی با position: sticky به position: static تبدیل می‌شدند، اما اکنون، می‌توانید position: sticky در هر جایی از جداول استفاده کنید: روی سرصفحه‌ها ( <thead> ) یا برچسب‌های محور عمودی.

سرصفحه جدول دارای موقعیت ثابت در Chromium 91+ است. به نسخه ی نمایشی در Codepen مراجعه کنید .

هشدار: اگر از position: sticky روی میز استفاده می کنید، مطمئن شوید که حاشیه ندارد. نقاشی حاشیه در حال حاضر یک مشکل سازگاری بین مرورگرهای باز است، زیرا مرزها به جدول تعلق دارند، نه خود ردیف سرصفحه.

بهبود نقاشی حاشیه و نقاشی پس زمینه

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

نحوه رنگ آمیزی جداول به ترتیب z-index به این صورت است: سلول > ردیف > بخش > جداول. سپس آنها به ترتیبی که در DOM ظاهر می شوند (مدل شیء سند) رنگ می شوند، اگرچه سلول ها خود به ترتیب معکوس DOM هستند، جایی که سلول اول جدول بالاترین خانه را دارد.

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

سمت چپ: رندر جدول نادرست قبل از TablesNG. راست: نمایش صحیح حاشیه های جدول در TablesNG.

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

این باگ اکنون در کرومیوم و فایرفاکس برطرف شده است.

هندسه زیر پیکسل (تراز جدول)

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

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

معماری مجدد وب

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

• LayoutNG: بازنویسی کامل همه الگوریتم‌های طرح‌بندی، برای قابلیت اطمینان بسیار بهبود یافته و عملکرد قابل پیش‌بینی‌تر.
• BlinkNG: پاکسازی سیستماتیک و بازسازی موتور رندر Blink به فازهای خط لوله که کاملاً از هم جدا شده اند. این امکان ذخیره سازی بهتر، قابلیت اطمینان بالاتر، و ویژگی های ورود مجدد/تأخیر در رندر مانند مشاهده محتوا و جستجوهای کانتینر را فراهم می کند.
• GPU Raster Everywhere: تلاشی طولانی مدت برای اجرای شطرنجی GPU در همه پلتفرم ها، در صورت امکان.
• پیمایش رشته‌ای و انیمیشن‌ها: تلاشی طولانی‌مدت برای انتقال تمام انیمیشن‌های پیمایشی و غیرقابل طرح‌بندی به رشته کامپوزیتور.

منتظر به‌روزرسانی‌های بیشتر در مورد این پیشرفت‌ها و موارد دیگر باشید!