TablesNG wordt gelanceerd in Chromium 91 en repareert een heleboel bugs die al jaren deel uitmaken van het webplatform. Deze updates zullen de browsercompatibiliteit verbeteren als onderdeel van de #Compat2021 -inspanning, en het gebruik van tabellen op het webplatform in het algemeen verbeteren. Enkele van de meest genoemde problemen zijn onder meer position: sticky in rijen , subpixelgeometrie en het correct samenvouwen van de randen .
De TablesNG-inspanning
TablesNG is een meerjarig initiatief, onder leiding van Chrome-ontwikkelaar Aleks Totic, om de manier waarop tabellen op internet worden weergegeven volledig opnieuw te ontwerpen. Tabellen vormen een bijzonder knelpunt bij de ontwikkeling van websites, deels vanwege hun geschiedenis.
Tabellen werden in 1994 aan HTML toegevoegd en vervolgens jarenlang gebruikt als de belangrijkste methode om complexe pagina-indelingen te maken. Ze zijn nog steeds overal op internet te vinden, hoewel modern gebruik over het algemeen bedoeld is om tabelgegevens weer te geven. Er zijn echter grote verschillen in tabelgedrag tussen browsers, waarvan een groot deel tot stand is gekomen doordat de tabelspecificatie onvolledig en gedetailleerd is. Tabellen werden ook in browsers geïmplementeerd vóór veel CSS-functies: orthogonale schrijfmodi, position:relative , box-sizing , flexbox-containers en meer. De ondersteuning voor veel van deze functies was dus inconsistent.
De nieuwe specificatie, CSS Table Module Level 3, is geschreven nadat Edge in 2018 de tabellen opnieuw heeft geïmplementeerd. TablesNG is een herarchitectuurinspanning die niet alleen tot doel heeft deze nieuwe specificatie te volgen, maar onderweg ook veel inconsistenties in tabellen wil oplossen. . Enkele van de meest zichtbare veranderingen die hieruit zijn voortgekomen zijn:
- Sticky positionering in rijen mogelijk maken voor lange tabellen die scrollen.
- Uitlijning met subpixelgeometrie en tabelranden opgelost.
- Verbeterd schilderen voor achtergronden en randen.
position: sticky in rijen
Een van de grootste vragen en meest frustrerende dingen over het stylen van tafels in het verleden was het gebrek aan ondersteuning voor position: sticky in rijen. Deze functie zorgt ervoor dat een tabelkop op de pagina blijft terwijl u scrolt, en geeft context aan lange gegevenstabellen. Tegen de tijd dat u de koptekst uit het zicht schuift en naar een tabel vol cijfers kijkt, vergeet u gemakkelijk wat die cijfers betekenen.
position: sticky wordt toegepast op de <thead> . De reden dat we deze bug al zo lang hebben, is omdat position: sticky al werd gespecificeerd lang nadat HTML-tabellen uitkwamen. Vóór deze oplossing werden headers met de beoogde position: sticky gewoon geconverteerd naar position: static , maar nu kunt u position: sticky overal in de tabellen gebruiken: op headers ( <thead> ) of labels op de verticale as.
Verbeterde randen en achtergronden
Een van de oudste tabelbugs dateert uit september 2008. Deze werd bijna zodra Chrome werd uitgebracht gearchiveerd en kon nooit worden opgelost vanwege de oude tabelarchitectuur. Het onderwerp betreft het beschilderen van tafels en ingestorte randen.
De manier waarop tabellen worden geschilderd, in volgorde van z-index , is: cellen > rijen > secties > tabellen. Ze worden vervolgens geschilderd in de volgorde waarin ze verschijnen in het DOM (Document Object Model), hoewel de cellen zelf in omgekeerde DOM-volgorde staan, waarbij de eerste cel in de tabel de bovenste is.
Het probleem hier is dus dat randen bij de tabel horen en niet bij de cel, op de oude manier waarop tabellen werden geschilderd. Samengevouwen randen worden geschilderd wanneer de tafel de voorgrond schildert. Dit betekent dat een enkele tabelcel niet meerdere randen kan hebben:
In het bovenstaande voorbeeld kunt u zien dat de meest linkse blauwe cel ten onrechte over de oranje cel rechtsonder werd geschilderd, omdat deze niet meerdere randen kon hebben. In de opnieuw ontworpen implementatie is dit opgelost en wordt de oranje randcel correct over de blauwe heen geschilderd, waardoor de tweede tabelopening zowel blauwe als oranje randlijnen kan hebben.
Deze bug is nu opgelost in Chromium en Firefox.
Subpixelgeometrie (tabeluitlijning)
Pixeluitlijning in tabellen is een ander interoperabiliteitsprobleem dat is opgelost met TablesNG. Voorheen rondde de oudere engine grafische waarden altijd af op de pixel. Dit betekende dat als je in- en uitzoomde op de pagina, er dingen zouden verschuiven, wat uitlijningsproblemen veroorzaakte. TablesNG lost deze uitlijningsproblemen op.
Het web opnieuw ontwerpen
Het Chrome-team heeft niet alleen nieuwe functies geïntroduceerd om het schrijven van websites robuuster te maken, maar ze hebben ook hard gewerkt om bestaande API's en hun compatibiliteit te verbeteren. In feite is TablesNG slechts een van de vele herarchitectuurprojecten die dit team de afgelopen acht jaar op zich heeft genomen. Anderen, maar niet alle projecten, zijn onder meer:
- LayoutNG: een grondige herschrijving van alle lay-outalgoritmen, voor een sterk verbeterde betrouwbaarheid en meer voorspelbare prestaties.
- BlinkNG: een systematische opschoning en refactoring van de Blink-rendering-engine in netjes gescheiden pijplijnfasen. Dit zorgt voor betere caching, hogere betrouwbaarheid en functies voor hernieuwde / vertraagde weergave, zoals zichtbaarheid van inhoud en containerquery's .
- GPU Raster Everywhere: een langetermijninspanning om GPU-rasterisatie waar mogelijk op alle platforms uit te rollen.
- Threaded scrollen en animaties: een langetermijninspanning om alle scrollende en niet-lay-out-inducerende animaties naar de compositor-thread te verplaatsen.
Houd ons in de gaten voor meer updates over deze verbeteringen en meer!