Het Chrome-team was dit jaar sterk vertegenwoordigd op de CSS Day-conferentie. We bemanden de CSS-helpdesk en beantwoordden vragen van bezoekers, maar we hadden ook een whiteboard waarop we mensen vroegen wat er volgens hen nog ontbrak aan CSS. In dit bericht deel ik de resultaten van die vraag en vraag ik jullie ook om ons te laten weten wat jullie missen aan HTML en CSS door deze korte enquête in te vullen. Zijn jullie het eens met de bezoekers van CSS Day?
De tien meest gevraagde verzoeken
De aanwezigen werden gevraagd om ideeën op post-it-briefjes te schrijven en deze op het bord te plakken. Mensen konden ook op ideeën stemmen door er een sticker op te plakken. De tien belangrijkste kenmerken zijn als volgt.
Ondersteuning voor het stylen van invoervelden
Dit was onze meest gevraagde functie met 21 stemmen. Jullie willen echt manieren om deze veelgebruikte UI-elementen op een consistente manier vorm te geven.
Dit is een gebied waar we bij Chrome goed van op de hoogte zijn, als een van de grootste pijnpunten voor ontwikkelaars, en er wordt hard gewerkt aan betere oplossingen voor ontwikkelaars. Aanpasbare selectie-elementen bieden bijvoorbeeld de mogelijkheid om te kiezen voor nieuw stijlgedrag. Je zou dan bijvoorbeeld afbeeldingen of zelfs meer uitgebreide styling aan opties kunnen toevoegen. Het voordeel van deze aanpak is dat er altijd wordt teruggevallen op een regulier selectiemenu, waardoor dit een geleidelijke verbetering kan zijn.
Visueel verborgen
Met 19 stemmen op CSS Day was dit het op één na populairste verzoek. Het verzoek betreft een manier om content toe te voegen die alleen door schermlezers wordt gebruikt. Dit kan bijvoorbeeld een HTML-element zijn, waarbij de inhoud niet wordt weergegeven en alleen door een schermlezer wordt voorgelezen.
Tegenwoordig wordt dit meestal bereikt door een .visually-hidden klasse te creëren om de inhoud te verbergen, maar deze toch toegankelijk te maken voor schermlezers.
Hoewel dit een veelgevraagde functie is, zijn er mensen die vinden dat dit niet geïmplementeerd moet worden. Lees voor meer informatie het artikel "Visueel verborgen inhoud is een trucje dat opgelost moet worden, niet vastgelegd" en deze discussie op CSS WG issue 560 .
positie: vastzittend binnen overloop: verborgen
Dit verzoek heeft 16 stemmen gekregen. Momenteel werkt position: sticky alleen als alle bovenliggende elementen overflow: visible zijn.
Er is een openstaande kwestie uit 2017 waarin hierom wordt gevraagd , en hoewel het oorspronkelijke gebruiksscenario van ` overflow: hidden voor het wissen van zwevende-kommawaarden tegenwoordig misschien minder nodig is, zijn er veel andere scenario's die in de discussie worden beschreven.
Animeren naar height: auto
Met 12 stemmen wilden veel aanwezigen de animatie naar height: auto . We zijn blij te kunnen melden dat dit naar het webplatform komt met de CSS-eigenschap ` interpolate-size en de functie calc-size() . Deze zullen beschikbaar zijn vanaf Chrome versie 129. Houd onze blog in de gaten voor meer informatie hierover.
Aanvullende invoertypen
HTML5 introduceerde veel verschillende typen voor het <input> -element , bijvoorbeeld type="email" voor een e-mailadres of type="range" voor een schuifregelaar. Tijdens CSS Day kregen we 10 stemmen voor meer van dit soort typen, zoals een dubbele range of een autocomplete-functie met een aangepaste datalist.
Echte willekeurige getallen in CSS
Een ander verzoek met 10 stemmen was voor het gebruik van echte willekeurige getallen in CSS. Dit is in het verleden al eens aangevraagd en opgelost voor een willekeurige animatieduur .
Mixin-stijl lessen
CSS heeft een aantal functies toegevoegd die voorheen alleen in CSS-preprocessors te vinden waren, zoals variabelen met aangepaste eigenschappen en nu ook CSS-nesting. Herbruikbare mixins maken echter nog geen deel uit van de taal, maar zeven van de aanwezigen op CSS Day waren enthousiast om ze te zien.
De CSS-werkgroep heeft een resolutie aangenomen om te beginnen met het ontwikkelen van een specificatie voor deze functie. Je kunt je ideeën en gebruiksscenario's toevoegen aan de discussie in dat issue.
Globale stijlen in de shadow DOM
Een ander onderwerp waarover veel discussie is geweest, is het verzoek om globale CSS-stijlen ook binnen een shadow DOM te kunnen toepassen. Zes mensen hebben hier tijdens CSS Day om gevraagd. Deze mogelijkheid zou het mogelijk maken om globale stijlen ook in webcomponenten toe te passen, en ervoor te zorgen dat één CSS-bestand in alle componenten van een website werkt. Bekijk dit overzicht van gebruiksscenario's en laat ons weten of dit een functie is die u ook graag zou willen zien.
Het verdelen van gemengde eenheden
Er was een voorstel voor Interop 2024 om de mogelijkheid te bieden te delen door gemengde eenheden, bijvoorbeeld calc(100vw / 1px) . Dit werd echter te breed bevonden voor Interop 2024, hoewel veel ontwikkelaars, waaronder zes mensen op CSS Day, deze functie graag geïmplementeerd zouden zien.
nth-letter
CSS heeft een aantal pseudo-elementen die zich gedragen alsof je een span-element om een gedeelte van de inhoud hebt geplaatst. Het pseudo-element ::first-letter richt zich bijvoorbeeld op de eerste letter van de eerste regel van het blok waarop het is toegepast.
Wat ontbreekt in die lijst is ::nth-letter , en jullie vragen al zo'n twintig jaar om ::nth-letter , dus we weten dat dit een langgekoesterde wens is van webontwikkelaars. Tijdens CSS Day stemden zes mensen hiervoor, waardoor het de laatste van onze top tien meest gewenste functies werd.
Ben je het eens met de top tien van CSS Day?
We horen graag de mening van een breder publiek over deze onderwerpen. Staan sommige van deze punten in jouw top tien? Zo niet, is er dan iets anders dat je graag in CSS en HTML zou willen zien? Laat het ons weten door dit korte formulier in te vullen en we zullen de reacties samenvatten in een volgend bericht.