Chrome 147 brengt drie kleine maar handige webveranderingen
Chrome 147 heeft weer een paar nieuwe webbouwstenen meegekregen. Het gaat om element-scoped view transitions, de CSS-functie contrast-color() en de border-shape property. Voor gewone site-eigenaren zijn dit geen grote knoppen die morgen alles anders maken, maar ze kunnen je site wel mooier en rustiger laten voelen.
Wat is er aan de hand?
Chrome voegt steeds nieuwe dingen toe aan het web. In versie 147 zijn er drie opvallende updates voor makers van websites en webapps. De update-pagina van Google noemt ze heel kort en duidelijk: element-scoped view transitions, contrast-color() en border-shape.
De bron staat hier: https://developer.chrome.com/blog/new-in-chrome-147?hl=en
Dat klinkt technisch, en dat is het ook een beetje. Maar het idee erachter is simpel: meer controle over hoe je site eruitziet en hoe onderdelen op het scherm veranderen. Vooral bij animaties en kleuren kan dat net wat netter uitpakken.
Waarom is dit belangrijk voor kleine sites?
Als je een simpele bedrijfswebsite, webshop of portfolio hebt, merk je dit niet direct in de zin van “nu moet alles anders”.Maar je kunt er later wel voordeel van hebben. Denk aan soepelere overgangen,beter leesbare tekst en meer vormvrijheid bij randen.
Dat is vooral fijn als je site wat moderner moet aanvoelen zonder zware trucjes.Minder losse JavaScript-oplossingen is vaak ook prettiger voor onderhoud. En voor een kleine site betekent dat vaak: minder gedoe, minder foutkans.
Element-scoped view transitions: wat verandert er precies?
View transitions zijn bedoeld om een verandering op een pagina mooier te laten verlopen. Bijvoorbeeld als een kaartje openklapt, een lijst wisselt of een paneel verschijnt. Met element-scoped view transitions kun je dat gericht op één element doen,in plaats van op de hele pagina.
Dat is handig als je niet wilt dat alles even meebeweegt. Een hele pagina-animatie kan snel te veel worden. een kleine, nette overgang rond één onderdeel voelt vaak rustiger voor de gebruiker.
Voor wie telt dit mee?
Dit kan handig zijn voor:
- webshops met productkaartjes
- dashboards met losse blokken
- sites met menu’s of uitklapvakken
- webapps waar je vaak tussen onderdelen wisselt
Voor een eenvoudige brochure-site is dit minder spannend. Daar zit vaak niet zoveel dynamiek in. Maar als je site steeds meer op een kleine app begint te lijken,kan dit best nuttig worden.
contrast-color(): beter leesbare tekst zonder gokken
de CSS-functie contrast-color() is bedoeld om een tekstkleur te kiezen die goed afsteekt tegen de achtergrond. Dat klinkt klein, maar het kan veel schelen. Denk aan knoppen,labels of balken waarvan je nooit zeker weet of wit of zwart beter werkt.
Nu moet je dat vaak zelf testen of slim instellen. Met deze functie kan CSS daar meer werk in doen. Voor mensen die websites bouwen betekent dat minder handmatig puzzelen bij elke kleurwissel.
Voor gebruikers is het voordeel simpel: tekst kan beter leesbaar worden. Dat is fijn bij drukke pagina’s, donkere thema’s of knoppen met opvallende kleuren. Het helpt ook als je site goed toegankelijk moet zijn.
Kort lijstje: waar kan dit handig zijn?
- knoppen met wisselende achtergrondkleur
- meldingen en labels
- kaarten met eigen thema’s
- donkere en lichte modi
- onderdelen waar tekst altijd goed zichtbaar moet zijn
niet elke site heeft dit meteen nodig. Maar als je vaak met kleurvarianten werkt,kan dit later veel tijd schelen.
border-shape: iets meer vrijheid rond randen
De border-shape property draait om de vorm van randen. Daarmee komt er meer ruimte om een element een andere afwerking te geven dan steeds dezelfde gewone rand. Het idee is vooral meer controle over hoe een blok eruitziet.
Voor een kleine site kan dat handig zijn als je net iets anders wilt dan standaard rechthoeken. Denk aan kaarten, knoppen of blokken die mooi aansluiten bij je stijl. Je hoeft dan misschien minder met omwegen te werken.
Eerlijk is eerlijk: dit is vooral pas interessant als je bewust aan design werkt. Voor een simpele contactpagina merk je er waarschijnlijk weinig van. Maar voor een site met veel visuele onderdelen kan het prettig zijn.
Goed nieuws en minder fijn nieuws
Het goede nieuws is dat deze drie dingen vooral extra mogelijkheden geven. Je hoeft je site niet meteen aan te passen. En als je ze nog niet gebruikt, blijft alles gewoon werken zoals je gewend bent.
Het minder fijne nieuws is dat dit soort nieuwe CSS en browserfuncties niet overal meteen even ver zijn. Je kunt dus niet blind aannemen dat iedereen hetzelfde ziet. Testen blijft belangrijk, zeker als je site voor klanten of bezoekers met verschillende browsers is.
Hier alvast een simpel overzicht:
| Onderdeel | Waarvoor bedoeld? | Mogelijk voordeel |
|---|---|---|
| Element-scoped view transitions | Mooier wisselen van één element | Rustiger en netter gevoel |
contrast-color() | Slimme tekstkleur kiezen | Meer leesbare tekst |
border-shape | Meer controle over randen | Meer ontwerpvrijheid |
Wat kun je nu doen?
Je hoeft vandaag niet alles om te gooien. Wel kun je even kijken of een van deze drie dingen past bij je site of werk. Vooral bij nieuwe onderdelen of een redesign kan het slim zijn om dit te onthouden.
Handige stappen:
- Kijk of je site veel overgangen of animaties heeft.
- Controleer of tekst op gekleurde knoppen soms lastig leesbaar is.
- Denk na of je meer vrijheid wilt bij de vorm van kaarten of randen.
- Test altijd in de browsers die jouw bezoekers echt gebruiken.
Wil je de bron zelf lezen, dan staat de Chrome-update hier: https://developer.chrome.com/blog/new-in-chrome-147?hl=en
Dit onderwerp ligt aardig in dezelfde lijn: Runway Gen-2: maak zelf AI-video’s van tekst en afbeeldingen op je pc.
Meer lezen
De officiële uitleg of aankondiging staat ook op New in Chrome 147.
Bevers gedachte
Dit is zo’n update die niet meteen groot voelt, maar wel telt op de lange termijn. Kleine verbeteringen in animatie, kleur en vorm maken een site vaak net rustiger en fijner. Voor kleine site-eigenaren is dat mooi nieuws: je krijgt meer keus, zonder dat je alles opnieuw hoeft te bouwen 🦫