Gli sms sono ancora rilevanti?

La mia comprensione dalla lettura di thread come questo è che il punto di ems è definire tutte le misurazioni nella tua pagina Web, in base alla dimensione del carattere di base , che può essere impostata dal tuo browser.

Ad esempio, in Chrome puoi farlo andando settings -> show advanced settings -> web content -> font size: very large. Potrei farlo se stavo usando un monitor grande e ad alta risoluzione, che era molto lontano.

Ho creato un plunker che dimostra la differenza tra ems e px nel dimensionamento.

#div1 {
  width: 320px
}

#div2 {

  width: 20em;
}

Se nel mio browser ho impostato la dimensione del carattere su media, questi div avranno la stessa dimensione, la dimensione del carattere di base è 16px, quindi 20em = 320px.

Tuttavia, quando cambio la dimensione del carattere del mio browser su molto grande, possiamo vedere che il div misurato in ems ha una dimensione maggiore.

Tuttavia, questo effetto verrà annullato se, ad esempio, definisco la dimensione del carattere nel tag body.

body {
  font-size: 16px;
}

Perché ora il mio CSS sta sovrascrivendo la dimensione del carattere impostata dal browser.

Capisco che gli sms sarebbero stati importanti ai tempi dei browser più vecchi, dove lo zoom sulla pagina avrebbe solo ridimensionato i caratteri. Ma in questi giorni i browser moderni scalano sia i pixel che i caratteri, rendendo discutibile il problema dello zoom.

Guardando tutto il web - un sacco di siti web fanno insieme la dimensione del carattere nella loro tag body.

Stack Overflow, ad esempio, imposta la dimensione del carattere su 13px nel tag body. L'impostazione della dimensione del carattere nel mio browser non influisce minimamente sul layout di Stack Overflow.

I risultati di ricerca di Google non lo fanno.

(entrambi questi screenshot sono stati presi con dimensioni del carattere cromate impostate su dimensioni molto grandi e zoom al 100%).

Quindi forse potresti obiettare che l'impostazione della dimensione del carattere nel tag body è una cattiva idea perché impedisce le impostazioni di accessibilità di un utente. Ma dato che l'utente può ingrandire per aumentare le dimensioni (che aumenteranno proporzionalmente anche tutti i pixel) - questo non sembra un vero problema.

Tuttavia, questo effetto verrà annullato se, ad esempio, definisco la dimensione del carattere nel tag body.

body {
  font-size: 16px;
}

Perché ora il mio CSS sta sovrascrivendo la dimensione del carattere impostata dal browser.

Ti stai dimenticando dell'accessibilità .

Vedi C14: Uso delle unità em per le dimensioni dei caratteri dalle Linee guida sull'accessibilità dei contenuti Web (WCAG 2.0).

Impostare l'opzione della dimensione del carattere del browser su Molto grande . Ora vai a un sito Web come W3C . Come appare il testo?

Questa è questa opzione. Gli sviluppatori di StackExchange e molti altri siti Web hanno deciso che le loro scelte sono più importanti delle scelte degli utenti che potrebbero essere ipovedenti. Se questa scelta è giusta o sbagliata non rientra nell'ambito di questa domanda e la risposta non è necessaria direttamente.

Tuttavia, potresti essere obbligato (anche per legge ad alcuni siti Web) a prendere decisioni diverse e a consentire agli utenti di selezionare la dimensione del carattere. Da lì, hai una scelta: o specifichi la dimensione delle immagini e le diverse zone della pagina in pixel, nel qual caso l'opzione dimensione del carattere del browser avrà effetti divertenti sul layout, o usi emper quegli elementi come bene.

Si noti inoltre che se non si specifica la dimensione del carattere in pixel a livello del corpo, attenersi emalmeno alla dimensione del carattere ovunque. Ad esempio, Google ha specificato le dimensioni del carattere in modo incoerente e la loro pagina di ricerca sembra strana, specialmente con titoli che appaiono più piccoli del normale testo. Wikipedia, d'altra parte, ha fatto un ottimo lavoro usando emogni volta che veniva specificata la dimensione del carattere. Di seguito sono riportati gli screenshot di entrambi i siti resi da Chromium con l'opzione Dimensione carattere impostata su Molto grande :

Quindi forse potresti argomentare che l'impostazione della dimensione del carattere nel tag body è una cattiva idea perché impedisce le impostazioni di accessibilità dell'utente. Ma dato che l'utente può ingrandire per aumentare le dimensioni (che aumenteranno proporzionalmente anche tutti i pixel) - questo non sembra un vero problema.

Questo è un vero problema per due motivi.

Innanzitutto, la maggior parte dei browser memorizza il fattore di zoom sito per sito. Se hai una disabilità visiva, sarai costretto a zoomare, ancora e ancora, su ogni sito che visiti. Che schifo Data l'attuale indifferenza dei web designer e degli sviluppatori verso l'accessibilità, le persone non vedenti devono farlo comunque, ma ciò non significa che dovrebbe rimanere così.

In secondo luogo, troppi siti Web non si comportano bene visivamente neanche quando vengono ingranditi. I siti Web reattivi funzionano bene, ma quelli non reattivi presentano uno scorrimento orizzontale o una sorta di comportamento "lo schermo è troppo piccolo".

C'è anche una differenza fondamentale tra zoom e scala del testo per uno sviluppatore. Mentre emsignifica "adegualo alle preferenze relative alle dimensioni del testo dell'utente", lo zoom consiste nel ridimensionare l'intera pagina verso l'alto o verso il basso, non solo il testo.

Prendi un esempio del menu del sito (nella parte superiore della pagina, con i collegamenti posizionati in una riga). Con lo zoom, sai che l'altezza del menu cambierà proporzionalmente agli altri elementi. Con l'opzione Dimensione testo, spetta a te determinare il comportamento. Puoi presumere che una persona non vedente sarà in grado di vedere il tuo 50pxmenu dell'altezza in tutti i casi: a nessuno mancherà un menu nero su sfondo bianco. Oppure potresti decidere che la sua altezza dovrebbe rimanere proporzionale al testo, per esempio 1.5em.

il punto di ems è definire tutte le misure nella tua pagina web, in base alla dimensione del carattere di base

Questo può essere un fraintendimento di termini da parte mia, ma per chiarire: emè relativo alla dimensione del carattere "dell'elemento corrente". remè relativo alla dimensione del carattere radice.

Capisco che gli sms sarebbero stati importanti ai tempi dei browser più vecchi, dove lo zoom sulla pagina avrebbe solo ridimensionato i caratteri.

Non è per questo che io uso em. In effetti, la tua esperienza di zoom è l'ultima cosa che penso quando uso unità di misura relative. La mia preoccupazione è duplice.

In primo luogo, di solito sono interessato a definire semplicemente i miei layout in termini relativi. La mia preoccupazione è che i miei contenitori abbiano un bell'aspetto l'uno rispetto all'altro e il testo al loro interno. E quando cambio carattere o ottimizzo le cose nella catena, non voglio ricalcolare e aggiornare tutto manualmente per mantenere le proporzioni per le quali sto scattando. Lascia che il browser faccia i calcoli ...

In secondo luogo, voglio solo esprimere le dimensioni dei caratteri in termini semplici che posso capire. Se esprimo i miei caratteri di base in pt'' e tutto il resto in rem'' o em'', è più facile per me. Non devo conoscere la risoluzione del tuo dispositivo e non devi zoomare. Il tuo browser sa quanti pixel usare; nessuno di noi dovrebbe pensarci.