Data di pubblicazione: 6 dicembre 2024
I risultati del report State of CSS 2024 e State of HTML 2024 sono ora disponibili. Questo post offre un'analisi preliminare di alcuni dei risultati più interessanti di questi sondaggi.
Ottimismo sulla piattaforma web
Prima di esaminare alcuni dei problemi riscontrati dagli utenti con HTML e CSS, i sondaggi trasmettono un grande ottimismo sulla piattaforma. Alla domanda se la piattaforma web si sta muovendo nella giusta direzione in generale, il 58% degli utenti che hanno partecipato al sondaggio State of HTML ha concordato con questa affermazione, mentre il 18% era totalmente d'accordo.
Per quanto riguarda il CSS, :has() è stata la nuova funzionalità CSS preferita dal 36% degli utenti, che la considera la migliore. Il secondo preferito è
@container con il 17%, a pari merito con il nesting CSS.
Che cosa usi?
I dati CSS hanno riservato alcune sorprese. Ad esempio, oltre il 75% degli utenti ha utilizzato gli effetti di filtro CSS, rendendo questa la funzionalità più utilizzata. Dato il numero di lamentele sulla struttura a cascata nel corso degli anni, è interessante notare che i livelli a cascata vengono utilizzati solo dal 18,9% delle persone. Forse c'è un collegamento all'adozione di strumenti come Tailwind che impediscono alle persone di riscontrare così spesso problemi correlati alla formazione di una serie di problemi.
Elementi di riferimento come <main> e <nav> sono in cima al sondaggio HTML per gli elementi che utilizzi. È fantastico vedere così tante persone che utilizzano il caricamento lento e le tecniche di immagini adattabili.
Problemi principali relativi al supporto dei browser
I problemi di interoperabilità o di supporto del browser per le funzionalità si verificano sempre quando parliamo con gli sviluppatori. Nei sondaggi ti è stato chiesto direttamente di indicare i problemi che hai riscontrato. Di seguito sono riportate le 10 funzionalità più problematiche, classificate in base alla percentuale di utenti che le hanno selezionate.
- API Popover
- Posizionamento dell'ancora
- Query sui container
:has()- Visualizzazione nidificazione CSS
- API Transition
- Sottostruttura
- Griglia
<dialog>- App web progressive
Il posizionamento dell'ancora ha ottenuto un punteggio dell'11% in entrambi i sondaggi, l'API View Transition il 9% in Stato di CSS e l'8% in Stato di HTML, a dimostrazione di quanto queste funzionalità siano ritenute importanti degli sviluppatori.
È interessante notare che molte delle funzionalità sono interoperabili. Le query dei contenitori,:has(), il nesting CSS e la griglia secondaria sono di recente disponibilità come base di riferimento. L'API Popover lo sarebbe, ma per un problema con la dismissione rapida su iOS. L'elemento <dialog> è
ora ampiamente disponibile, così come il layout a griglia CSS. Potrebbe essere utile esaminare questi risultati per scoprire quali problemi stanno riscontrando gli utenti. Le risposte per la tabella, ad esempio, spesso fanno riferimento alla difficoltà di apprendimento, anziché a un effettivo problema di interoperabilità.
Ci auguriamo che Baseline aiuti gli sviluppatori a comprendere lo stato delle cose e a capire se un problema riscontrato è dovuto alla mancata compatibilità del browser o a qualcos'altro. È fantastico vedere che questi sondaggi evidenziano lo stato di riferimento delle funzionalità. Puoi anche visualizzare lo stato di disponibilità su tutti i browser per i principali problemi relativi ai CSS su webstatus.dev.
Mancano delle funzionalità
I sondaggi chiedono anche quali funzionalità e caratteristiche mancano alla piattaforma. Questo ci aiuta a capire cosa è ancora difficile da fare. I tassi di risposta a questa domanda sono stati inferiori, ma nel sondaggio sullo stato del CSS le persone hanno richiesto più spesso mixin, logica condizionale e layout a riquadri.
È interessante notare che le persone hanno anche chiesto un selettore principale (:has() fornisce questa funzionalità) e il nesting, che esiste già ed è disponibile come base di riferimento.
La domanda posta ai partecipanti al sondaggio sullo stato dell'HTML era: "Se potessi aggiungere tre elementi all'HTML, quali sarebbero?" Il 51% delle persone ha chiesto tabelle di dati, mentre altre scelte popolari includono schede ed elementi di attivazione/disattivazione.
Su cosa vuoi saperne di più?
I sondaggi hanno una funzionalità che ti consente di aggiungere elementi a una lista di lettura, se vuoi saperne di più dopo aver completato il sondaggio. Si tratta di dati importanti, soprattutto se ti occupi di creare contenuti per sviluppatori. Il seguente elenco contiene le dieci funzionalità principali dei due sondaggi, messe in ordine in base alla percentuale di chi le ha aggiunte al proprio elenco.
- CSS
hanging-punctuation - CSS
offset-path @scope- Posizionamento dell'ancora
- Seleziona personalizzabile
view-timelinescroll-timelinefocusgroupattributo- Animazione delle proprietà discrete
image()
Dai un'occhiata ai risultati completi con l'elenco di letture CSS e l'elenco di letture HTML.
Un indicatore della community web
Chrome supporta questi sondaggi perché è un modo per ottenere informazioni sui tuoi principali problemi e sugli argomenti che ti interessano di più sulla piattaforma web. Non sono l'unico indicatore che utilizziamo, ma sono un luogo in cui puoi comunicarci direttamente la tua opinione. Se hai compilato uno o entrambi questi sondaggi, ti ringraziamo. Ci stai aiutando a migliorare il web nel modo che preferisci. Se vuoi dare il tuo contributo, c'è ancora tempo per partecipare a The State of JS.