Il team di Chrome ha partecipato in modo significativo alla conferenza CSS Day di quest'anno. Abbiamo gestito l'Helpdesk CSS, rispondendo alle domande dei partecipanti, ma avevamo anche una lavagna su cui chiedevamo alle persone cosa pensavano mancasse ancora in CSS. In questo post condividerò i risultati della 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 principali
Ai partecipanti è stato chiesto di scrivere le idee su foglietti adesivi e di aggiungerli alla bacheca. Le persone possono anche aggiungere il proprio voto alle idee aggiungendo un adesivo. Le dieci funzionalità principali sono le seguenti.
Supporto per lo stile degli input
Questa è stata la funzionalità più richiesta, con 21 voti. Vuoi davvero trovare modi per applicare uno stile coerente a questi elementi comuni della UI.
Si tratta di un aspetto di cui siamo ben consapevoli in Chrome, in quanto è uno dei principali problemi per gli sviluppatori, e sono in corso lavori per creare soluzioni migliori per gli sviluppatori. Ad esempio, gli elementi di selezione personalizzabili mirano a fornire un modo per attivare il nuovo comportamento di stile. Potresti quindi aggiungere immagini o uno stile ancora più elaborato alle opzioni. Il vantaggio di questo approccio è che verrà utilizzato un normale menu di selezione, consentendo 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 le persone raggiungono questo obiettivo creando
una classe .visually-hidden
per nascondere i
contenuti, ma renderli comunque accessibili agli screen reader.
Sebbene si tratti di una richiesta popolare, ci sono persone che non ritengono che questa debba essere implementata. Per maggiori dettagli, leggi Visually hidden content is a hack that needs to be resolved, not enshrined e questa discussione su CSS WG issue 560.
position: sticky inside overflow:hidden
Questa richiesta ha ricevuto 16 voti. Al momento, position: sticky funziona solo quando
tutti i genitori sono overflow: visible.
Esiste un problema aperto dal 2017 che richiede questa funzionalità e, sebbene il caso d'uso iniziale di attivazione dell'utilizzo di overflow: hidden per lo svuotamento dei float potrebbe essere meno necessario oggi, esistono molti altri scenari descritti nel thread.
Anima fino a height: auto
Con 12 voti, molti partecipanti hanno scelto di animare height: auto. Siamo felici di annunciare che questa funzionalità sarà disponibile sulla piattaforma web con la proprietà CSS interpolate-size e la funzione calc-size().
Queste funzionalità saranno disponibili a partire da Chrome 129.
In un post futuro troverai maggiori informazioni al riguardo.
Tipi di input aggiuntivi
HTML5 ha introdotto molti
tipi diversi per l'elemento <input>, ad esempio
type="email" per un indirizzo email o type="range" per un cursore di intervallo.
Al CSS Day abbiamo ricevuto 10 voti per altri tipi, ad esempio intervallo doppio
o completamento automatico con datalist 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 implementata per una animation-duration casuale.
Classi di stile mixin
CSS ha aggiunto una serie di funzionalità già viste nei preprocessor CSS: variabili con proprietà personalizzate e ora CSS Nesting. I mixin riutilizzabili, tuttavia, non sono ancora entrati a far parte del linguaggio, ma sette dei partecipanti al CSS Day erano ansiosi di vederli.
Il CSS Working Group ha deciso di iniziare a lavorare su una specifica per questa funzionalità e puoi aggiungere i tuoi pensieri e casi d'uso alla discussione in questo problema.
Stili globali nel DOM ombra
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 hanno chiesto questa funzionalità al CSS Day. Questa funzionalità consentirebbe di applicare gli stili di ripristino globali anche nei componenti web e di utilizzare singoli file CSS in tutti i componenti di un sito. Dai un'occhiata a 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). È stato ritenuto
troppo ampio per Interop 2024, ma molti sviluppatori, tra cui sei persone al CSS
Day, vorrebbero vederlo implementato.
nth-letter
CSS ha una serie di pseudo-elementi che si comportano come se avessi inserito un tag span intorno
a una sezione di contenuti. Ad esempio, lo
pseudo-elemento ::first-letter
ha come target la prima lettera della prima riga del contenitore di blocco
a cui viene applicato.
In questo elenco manca ::nth-letter, che ci chiedete da circa vent'anni, quindi sappiamo che si tratta di una richiesta di lunga data da parte degli sviluppatori web.::nth-letter Al CSS Day, sei persone hanno votato
per questa funzionalità, che è l'ultima delle dieci più richieste.
Sei d'accordo con la top 10 del CSS Day?
Ci piacerebbe conoscere l'opinione di un pubblico più ampio su questi problemi. Qualcuno di questi rientra nella tua top 10? In caso contrario, c'è qualcos'altro che vorresti vedere in CSS e HTML? Faccelo sapere compilando questo breve modulo e riassumeremo le risposte in un altro post.