Il team di Chrome ha avuto una grande presenza alla conferenza CSS Day di quest'anno. Abbiamo gestito il help desk CSS, rispondendo alle domande dei partecipanti, ma abbiamo anche utilizzato una lavagna per chiedere alle persone cosa manca ancora nel CSS. In questo post condividerò i risultati di questa domanda e ti chiederò di dirci cosa ritieni manchi in HTML e CSS compilando questo breve sondaggio. Sei d'accordo con i partecipanti al CSS Day?
Le dieci richieste più frequenti
Ai partecipanti è stato chiesto di scrivere le idee su note adesive e di aggiungerle alla bacheca. Le persone potevano anche aggiungere il proprio voto alle idee aggiungendo un adesivo. Le dieci funzionalità principali sono le seguenti.
Supporto per gli input di stile
Questa è stata la nostra richiesta di funzionalità più votata con 21 voti. Ti serve un modo per applicare stili a questi elementi comuni dell'interfaccia utente in modo coerente.
Si tratta di un'area che conosciamo bene in Chrome, in quanto rappresenta uno dei principali problemi per gli sviluppatori. Stiamo lavorando per creare soluzioni migliori per loro. Ad esempio, gli elementi selezionati personalizzabili hanno lo scopo di fornire un modo per attivare un nuovo comportamento di stile. Potresti, ad esempio, aggiungere immagini o stili ancora più elaborati alle opzioni. Il vantaggio di questo approccio è che si ricorrerebbe a un menu di selezione normale, il che consente di implementare un miglioramento progressivo.
Visivamente nascosto
Con 19 voti al CSS Day, questa è stata la seconda richiesta più popolare. La richiesta riguarda un modo per aggiungere contenuti utilizzati solo dagli screen reader. Potrebbe trattarsi di un elemento HTML, in cui i contenuti non vengono visualizzati e vengono letti solo da uno screen reader.
In genere, oggi si ottiene questo risultato creando
una classe .visually-hidden
per nascondere i contenuti, ma rendendoli comunque accessibili agli screen reader.
Sebbene questa sia una richiesta molto comune, ci sono persone che non ritengono che debba essere implementata. Per maggiori dettagli, leggi I contenuti nascosti visivamente sono un hack che deve essere risolto, non sancito e questa discussione sul problema 560 del WG CSS.
position: sticky inside overflow:hidden
Questa richiesta ha ricevuto 16 voti. Al momento, position: sticky funziona solo se tutti i genitori sono overflow: visible.
Esiste un problema aperto del 2017 che richiede questa funzionalità. Anche se l'uso iniziale dell'attivazione dell'uso di overflow: hidden per l'eliminazione dei valori mobili potrebbe essere meno richiesto oggi, esistono molti altri scenari descritti nel thread.
Animazione per height: auto
Con 12 voti, molti partecipanti volevano animare height: auto. Siamo lieti di poter dire che questa funzionalità sarà disponibile sulla piattaforma web con la proprietà interpolate-size e la funzione calc-size() CSS.
Saranno disponibili a partire dalla versione 129 di Chrome.
Continua a seguirci per ulteriori informazioni in merito.
Altri tipi di input
HTML5 ha introdotto molti diversi
tipi di elementi <input>, ad esempiotype="email" per un indirizzo email o type="range" per un cursore di intervallo.
Al CSS Day abbiamo ricevuto 10 voti per altri tipi di elementi, ad esempio intervallo doppio o completamento automatico con elenco di dati personalizzato.
Numeri casuali reali in CSS
Un'altra richiesta con 10 voti riguardava numeri casuali reali in CSS. In passato, questa funzionalità è stata richiesta e aggirata per un valore animation-duration casuale.
Classi di stile Mixin
Il CSS ha aggiunto una serie di funzionalità precedentemente disponibili nei pre-processori CSS: variabili con proprietà personalizzate e ora il nesting CSS. I mixin riutilizzabili, tuttavia, non fanno ancora parte del linguaggio, ma sette dei partecipanti al CSS Day erano ansiosi di vederli.
È stata presa una risoluzione del gruppo di lavoro CSS per iniziare a lavorare a una specifica per questa funzionalità. Puoi aggiungere le tue opinioni e i tuoi casi d'uso alla discussione relativa al problema.
Stili globali nel DOM shadow
Un altro problema che ha un ampio thread di discussione sui casi d'uso è la richiesta di consentire l'applicazione di stili CSS globali all'interno di un DOM ombra. Sei persone lo hanno chiesto al CSS Day. Questa funzionalità consentirebbe di applicare gli stili di reimpostazione globale anche ai componenti web e ai singoli file CSS in tutti i componenti di un sito. Consulta questo riepilogo dei casi d'uso e facci sapere se ti piacerebbe avere anche questa funzionalità.
Dividere unità miste
È stata presentata una proposta per Interop 2024
che richiede la
possibilità di dividere per unità miste, ad esempio calc(100vw / 1px). È stata considerata troppo ampia per Interop 2024, ma molti sviluppatori, tra cui sei persone del CSS Day, vorrebbero che venisse implementata.
nth-letter
Il CSS ha una serie di pseudo-elementi che si comportano come se avessi inserito un elemento span in una sezione di contenuti. Ad esempio, ::first-letter
lo pseudo-elemento ha come target la prima lettera della prima riga del contenitore di blocco
a cui viene applicato.
In questo elenco manca ::nth-letter, che chiedete da circa vent'anni, quindi sappiamo che è una richiesta da tempo avanzata dagli sviluppatori web.::nth-letter Al CSS Day, sei persone hanno votato per questa funzionalità, che è così diventata l'ultima delle dieci più richieste.
Sei d'accordo con la classifica dei primi dieci del CSS Day?
Ci piacerebbe conoscere la posizione di un pubblico più ampio su questi problemi. Alcuni di questi rientrano nella tua top ten? In caso contrario, c'è qualcos'altro che vorresti vedere in CSS e HTML? Facci sapere compilando questo breve modulo e riassumeremo le risposte in un altro post.