TablesNG запускается в Chromium 91 и исправляет массу ошибок , которые были частью веб-платформы в течение многих лет. Эти обновления улучшат совместимость браузеров в рамках инициативы #Compat2021 и улучшат использование таблиц на веб-платформе в целом. Некоторые из наиболее отмеченных проблем включают position: sticky в строках , геометрию субпикселей и правильное схлопывание границ .
Усилия TablesNG
TablesNG — это многолетняя работа под руководством разработчика Chrome Алекса Тотича, направленная на полную переработку архитектуры отображения таблиц в Интернете. Таблицы представляют собой особую область разногласий в веб-разработке, отчасти из-за их истории.
Таблицы были добавлены в HTML в 1994 году, а затем в течение многих лет использовались в качестве основного метода создания сложных макетов страниц. Их до сих пор можно найти повсюду в Интернете, хотя в настоящее время они обычно используются для отображения табличных данных. Однако существуют большие различия в поведении таблиц в разных браузерах, многие из которых возникли из-за того, что спецификация таблиц была неполной и недостаточно подробной. Таблицы также были реализованы в браузерах раньше многих функций CSS: режимов ортогональной записи, position:relative , box-sizing , контейнеров flexbox и т. д. Поэтому поддержка многих из этих функций была непоследовательной.
Новая спецификация, 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> ) или в метках вертикальной оси.
Улучшено рисование границ и фона.
Одна из самых старых ошибок таблиц возникла в сентябре 2008 года. Она была обнаружена почти сразу после выпуска Chrome и так и не была исправлена из-за старой архитектуры таблиц. Проблема связана с раскрашиванием таблиц и свернутыми границами.
Таблицы окрашиваются в порядке z-index : ячейки > строки > разделы > таблицы. Затем они раскрашиваются в том порядке, в котором они появляются в DOM (объектная модель документа), хотя сами ячейки располагаются в обратном порядке DOM, где первая ячейка в таблице является самой верхней.
Итак, проблема здесь в том, что границы принадлежат таблице, а не ячейке, как это было раньше, когда таблицы рисовались. Свернутые границы окрашиваются, когда таблица рисует передний план. Это означает, что одна ячейка таблицы не может иметь несколько границ:
В приведенном выше примере вы можете видеть, что крайняя левая синяя ячейка неправильно рисовалась поверх оранжевой нижней правой ячейки, поскольку она не могла иметь несколько границ. В переработанной реализации это решено, и оранжевая ячейка границы правильно закрашивается поверх синей, что позволяет второму пробелу таблицы иметь как синюю, так и оранжевую линии границы.
Эта ошибка теперь исправлена в Chromium и Firefox.
Субпиксельная геометрия (выравнивание таблицы)
Выравнивание пикселей в таблицах — еще одна проблема совместимости, исправленная с помощью TablesNG. Раньше старый движок всегда округлял графические значения до пикселя. Это означало, что при увеличении и уменьшении масштаба страницы все будет смещаться, вызывая проблемы с выравниванием. TablesNG устраняет эти проблемы с выравниванием.
Реструктуризация сети
Команда Chrome не только представила новые функции, чтобы сделать веб-разработку более надежной, но также усердно работала над улучшением существующих API и их совместимости. Фактически, TablesNG — лишь один из многих проектов по реархитектуре, над которыми эта команда работала за последние восемь лет. Другие, хотя и не все проекты, включают:
- LayoutNG: полная переработка всех алгоритмов компоновки для значительного повышения надежности и более предсказуемой производительности.
- BlinkNG: систематическая очистка и рефакторинг механизма рендеринга Blink на четко разделенные фазы конвейера. Это обеспечивает лучшее кэширование, более высокую надежность и функции повторного входа/отложенного рендеринга, такие как видимость контента и запросы контейнера .
- GPU Raster Everywhere: долгосрочные усилия по внедрению растеризации GPU на всех платформах, когда это возможно.
- Поточная прокрутка и анимация: долгосрочная попытка переместить всю прокрутку и анимацию, не связанную с макетом, в поток композитора.
Следите за обновлениями об этих улучшениях и многом другом!