keeptrack-css

De browser rekent van alles uit wat jij in je CSS niet kunt opvragen. Hoe hoog een element geworden is, hoe breed de scrollbalk is, hoeveel ruimte een sticky header inneemt. Deze plugin haalt die waarden op en zet ze klaar als variabele.

Het probleem

CSS kan niet naar zichzelf kijken. Je kunt niet zeggen "maak dit element even hoog als dat element", tenzij je display: flex of grid gebruikt. Maar wat nou als je layout niet als (sub)grid gebruikt kan worden? Of je bent op zoek naar een andere waarde die sowieso niet layout gebonden is?

Precies voor die momenten heb ik deze plugin gemaakt.

Wat het doet

Je zet data-keeptrack op een element met de eigenschappen die je wil volgen, en het plugin schrijft ze weg als custom property op datzelfde element.

<div data-keeptrack="height">...</div>

Daarna is var(--height) beschikbaar in je CSS. De waarde wordt bijgewerkt zodra het element van maat verandert of de inhoud wijzigt, dus hij blijft kloppen.

Probeer het zelf

Het tweede vak heeft geen eigen script. Er staat alleen dit in de stylesheet:

.tooldemo__volger { block-size: var(--ktbron-height); }

Omdat het eerste vak een id heeft, zet de plugin de hoogte als --ktbron-height op de document root. Daarmee is die waarde overal in je CSS te gebruiken, ook op een element dat er niets mee te maken heeft.

Waar ik het initieel voor gebruik

In deze plugin staat de breedte van de scrollbalk standaard als --scrollbar-width klaar in de document root. Daarmee reken je calc(100vw - var(--scrollbar-width)) uit zonder te gokken, en dat scheelt de horizontale scrollbalk die anders op sommige schermen opduikt.

Zet je data-keeptrack-scroll-padding op een sticky kop, dan houden ankerlinks daar rekening mee. Zonder dat springt de browser naar het anker en verdwijnt je kop onder bijvoorbeeld een sticky navigatie. Het werkt ook bij het laden van de pagina en bij vooruit en terug in de geschiedenis.

En dus: hoogtes en breedtes volgen om ze op een ander element na te bootsen, op de momenten dat display: (sub)grid je niet kan helpen.

Installeren

npm install keeptrack-css

Gebruik je geen bundler, dan kun je hem ook met een gewone <script>-tag inladen.

Op npm Op GitHub

Terug naar alle tools