HTMLcat is een overzicht van korte, native web-ontwikkelingstrucs die bedoeld zijn om als referentie te dienen. De verzameling koppelt nuttige platformfuncties aan kleine voorbeelden en belangrijke kanttekeningen. De lijst met notities is uitgebreid en bestrijkt diverse onderwerpen, waaronder:
CSS: Functies zoals clamp(), color-mix(), :has(), en nieuwe specificaties zoals corner-shape en Grid Lanes.
HTML: Gebruik van het dialog-element, de Popover API en het translate-attribuut.
JavaScript: Functionaliteiten zoals classList.toggle(), Intl.NumberFormat en de View Transitions API.
Het artikel waarschuwt dat sommige functies experimenteel zijn en adviseert om altijd browserondersteuning te controleren en fallbacks te gebruiken.
HTMLcat — Compacte notities over HTML, CSS en JavaScript
Sommige notities behandelen beperkte of experimentele functies. Controleer het ondersteuningslabel, houd een fallback aan en test met echte browsers en ondersteunende technologieën.
Overzicht van notities
Apparaattype in JS (JS)
Scrollbalken verbergen (CSS)
Lege tags (CSS)
Centreren in CSS (CSS)
clamp() (CSS)
Soepel scrollen (CSS, JS)
Scroll-marge (CSS)
classList.toggle() (JS)
Telefoon- en e-maillinks (HTML)
Tekstselectie-highlight (CSS)
De relationele selector :has() (CSS)
Lijstmarkeringen stylen met ::marker (CSS)
Gelokaliseerde prijzen met Intl.NumberFormat (JS)
Een subboom uitschakelen met inert (HTML)
De pseudo-klasse :target (CSS, HTML)
Het globale attribuut translate (HTML)
prefers-color-scheme (CSS)
Container size queries (CSS)
Het dialog-element (HTML, JS)
Betere tekstomloop met text-wrap (CSS)
Uitlijning van beschrijvingslijsten (HTML, CSS)
Native formulierkleuren met accent-color (CSS)
CSS Custom Highlight API (JS, CSS)
Hover detecteren over verschillende input-typen (CSS)
Transparante kleuren met color-mix() (CSS)
Scroll snap-events (JS)
Mappen sorteren op grootte (Bash)
light-dark() (CSS)
contrast-color() (CSS)
Scoped CSS met @scope (CSS)
:where() (CSS)
Scroll-gestuurde animaties (CSS)
CSS carrousels (CSS, HTML)
corner-shape (CSS)
CSS custom functions (CSS)
CSS Grid Lanes (CSS)
Popover API (HTML)
View Transitions API (JS, CSS)
Container style queries (CSS)
Exclusieve accordeons met details name (HTML)
Dialoogvensters besturen met knopcommando's (HTML)
Doorzoekbare ingeklapte inhoud met hidden=until-found (HTML)
Welkom bij HTMLcat: kleine, native web-trucs die het waard zijn om te onthouden. Elk briefje koppelt één nuttige platformfunctie aan een klein voorbeeld en de bijbehorende belangrijke kanttekening.
HTMLcat — Compacte notities over HTML, CSS en JavaScript
Sommige notities behandelen beperkte of experimentele functies. Controleer het ondersteuningslabel, houd een fallback aan en test met echte browsers en ondersteunende technologieën.
Overzicht van notities
Apparaattype in JS (JS)
Scrollbalken verbergen (CSS)
Lege tags (CSS)
Centreren in CSS (CSS)
clamp() (CSS)
Soepel scrollen (CSS, JS)
Scroll-marge (CSS)
classList.toggle() (JS)
Telefoon- en e-maillinks (HTML)
Tekstselectie-highlight (CSS)
De relationele selector :has() (CSS)
Lijstmarkeringen stylen met ::marker (CSS)
Gelokaliseerde prijzen met Intl.NumberFormat (JS)
Een subboom uitschakelen met inert (HTML)
De pseudo-klasse :target (CSS, HTML)
Het globale attribuut translate (HTML)
prefers-color-scheme (CSS)
Container size queries (CSS)
Het dialog-element (HTML, JS)
Betere tekstomloop met text-wrap (CSS)
Uitlijning van beschrijvingslijsten (HTML, CSS)
Native formulierkleuren met accent-color (CSS)
CSS Custom Highlight API (JS, CSS)
Hover detecteren over verschillende input-typen (CSS)
Transparante kleuren met color-mix() (CSS)
Scroll snap-events (JS)
Mappen sorteren op grootte (Bash)
light-dark() (CSS)
contrast-color() (CSS)
Scoped CSS met @scope (CSS)
:where() (CSS)
Scroll-gestuurde animaties (CSS)
CSS carrousels (CSS, HTML)
corner-shape (CSS)
CSS custom functions (CSS)
CSS Grid Lanes (CSS)
Popover API (HTML)
View Transitions API (JS, CSS)
Container style queries (CSS)
Exclusieve accordeons met details name (HTML)
Dialoogvensters besturen met knopcommando's (HTML)
Doorzoekbare ingeklapte inhoud met hidden=until-found (HTML)
Zichtbare categorieën
Kies welke categorieën je wilt zien.
Over deze site
Waarom Tech-update?
Tech-update is ontstaan omdat ik merkte dat ik dagelijks veel verschillende websites moest bezoeken om interessant technieuws te vinden. Dat kon efficiënter.
Hoe werkt het?
Meerdere keren per etmaal gaat mijn zelfgebouwde AI-agent op zoek naar interessante artikelen op blogs en nieuwssites.
Vindt hij iets relevants, dan wordt het artikel naar het Nederlands vertaald en op Tech-Update geplaatst.
Van ieder artikel maakt de AI ook een korte samenvatting. Zo kun je snel bepalen of het de moeite waard is om het volledige artikel te lezen.
Bij ieder artikel staat altijd een link naar de oorspronkelijke bron (vaak een Engelstalige website).
Artikelen kun je bewaren als favoriet, vastzetten in de zijbalk of terugvinden via de zoekfunctie.
In de instellingen (tandwielikoon rechtsboven) geef je aan in welk soort nieuws je geïnteresseert bent.
Groetjes,