CSS

Il browser determina quali stili mostrare su un elemento in base alla specificità delle regole CSS. Partiamo dal presupposto che il browser abbia già determinato le regole che corrispondono a un particolare elemento. Tra le regole corrispondenti, la specificità, quattro valori separati da virgola, 'a, b, c, d' vengono calcolati per ogni regola in base a quanto segue:

1. 'a' indica se vengono utilizzati stili in linea. Se la dichiarazione della proprietà è uno stile in linea sull'elemento, 'a' è 1, altrimenti 0.
2. 'b' è il numero di selettori ID.
3. 'c' è il numero di selettori di classi, attributi e pseudo-classi.
4. 'd' è il numero di selettori di tag e pseudo-elementi.

La specificità risultante non è un punteggio, ma una matrice di valori che possono essere confrontati colonna per colonna. Quando si confrontano i selettori per determinare quale ha la specificità più alta, si guarda da sinistra a destra e si confronta il valore più alto in ogni colonna. Quindi un valore nella colonna 'b' sovrascriverà i valori nelle colonne 'c' e 'd', qualunque essi siano. Pertanto, una specificità di '0,1,0,0' sarà maggiore di una di '0,0,10,10'.

Nei casi di specificità uguale: la regola più recente è quella che conta. Se hai scritto la stessa regola nel tuo foglio di stile (indipendentemente dal fatto che sia interno o esterno) due volte, allora la regola inferiore nel tuo foglio di stile è più vicina all'elemento da stilizzare, si ritiene che sia più specifica e quindi verrà applicata.

Scriverei regole CSS con bassa specificità in modo che possano essere facilmente sovrascritte se necessario. Quando si scrive codice per una libreria di componenti UI CSS, è importante che abbiano basse specificità in modo che gli utenti della libreria possano sovrascriverle senza utilizzare regole CSS troppo complicate solo per il gusto di aumentare la specificità o ricorrere a '!important'.

• Resetting - Il resetting mira a eliminare tutti gli stili predefiniti del browser dagli elementi. Ad esempio, 'margin', 'padding', 'font-size' di tutti gli elementi vengono resettati per essere uguali. Dovrai ridefinire lo stile per gli elementi tipografici comuni.
• Normalizing - La normalizzazione preserva gli stili predefiniti utili piuttosto che 'annullare lo stile' di tutto. Corregge anche i bug per le dipendenze comuni del browser.

Sceglierei il resetting quando ho un design del sito molto personalizzato o non convenzionale, in modo da dover fare molto del mio stile e non ho bisogno che venga preservato alcuno stile predefinito.

Float è una proprietà di posizionamento CSS. Gli elementi 'float' rimangono parte del flusso della pagina e influenzeranno il posizionamento di altri elementi (ad esempio, il testo scorrerà attorno agli elementi 'float'), a differenza degli elementi con 'position: absolute', che vengono rimossi dal flusso della pagina.

La proprietà CSS 'clear' può essere utilizzata per posizionare un elemento sotto elementi 'float' 'left'/'right'/'both'.

Se un elemento genitore contiene solo elementi 'float', la sua altezza si ridurrà a zero. Può essere risolto annullando il 'float' dopo gli elementi 'float' nel contenitore ma prima della chiusura del contenitore.

L'hack '.clearfix' utilizza un astuto pseudo selettore CSS ('::after') per annullare i 'float'. Invece di impostare l''overflow' sul genitore, gli si applica una classe aggiuntiva 'clearfix'. Quindi si applica questo CSS:

.clearfix::after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

In alternativa, dare la proprietà 'overflow: auto' o 'overflow: hidden' all'elemento genitore che stabilirà un nuovo contesto di formattazione del blocco all'interno dei figli e si espanderà per contenerli.

La proprietà 'z-index' in CSS controlla l'ordine di impilamento verticale degli elementi che si sovrappongono. 'z-index' influenza solo gli elementi che hanno un valore 'position' non 'static'.

Senza alcun valore 'z-index', gli elementi si impilano nell'ordine in cui appaiono nel DOM (quello più in basso allo stesso livello di gerarchia appare in cima). Gli elementi con posizionamento non statico (e i loro figli) appariranno sempre sopra gli elementi con posizionamento statico predefinito, indipendentemente dalla gerarchia HTML.

Un contesto di stacking è un elemento che contiene un insieme di livelli. All'interno di un contesto di stacking locale, i valori 'z-index' dei suoi figli sono impostati rispetto a quell'elemento piuttosto che alla radice del documento. I livelli al di fuori di quel contesto - cioè gli elementi fratelli di un contesto di stacking locale - non possono stare tra i livelli al suo interno. Se un elemento B si trova sopra l'elemento A, un elemento figlio dell'elemento A, l'elemento C, non può mai essere più in alto dell'elemento B anche se l'elemento C ha un 'z-index' più alto dell'elemento B.

Ogni contesto di stacking è autocontenuto - dopo che il contenuto dell'elemento è impilato, l'intero elemento è considerato nell'ordine di stacking del contesto di stacking genitore. Una manciata di proprietà CSS attivano un nuovo contesto di stacking, come 'opacity' inferiore a 1, 'filter' che non è 'none', e 'transform' che non è 'none'.

_Nota: Ciò che esattamente qualifica un elemento per creare un contesto di stacking è elencato in questo lungo set di [regole].

Un Block Formatting Context (BFC) è parte del rendering visivo CSS di una pagina web in cui vengono disposti i box a blocco. I float, gli elementi posizionati assolutamente, gli 'inline-blocks', i 'table-cells', i 'table-caption' e gli elementi con 'overflow' diverso da 'visible' (tranne quando quel valore è stato propagato alla viewport) stabiliscono nuovi contesti di formattazione a blocco.

Sapere come stabilire un contesto di formattazione a blocco è importante, perché senza farlo, la scatola contenitrice non [conterrà i figli float]. Questo è simile ai margini che collassano, ma più insidioso in quanto si troveranno intere scatole che collassano in modi strani.

Un BFC è una scatola HTML che soddisfa almeno una delle seguenti condizioni:

• Il valore di 'float' non è 'none'.
• Il valore di 'position' non è né 'static' né 'relative'.
• Il valore di 'display' è 'table-cell', 'table-caption', 'inline-block', 'flex', o 'inline-flex', 'grid', o 'inline-grid'.
• Il valore di 'overflow' non è 'visible'.

In un BFC, il bordo esterno sinistro di ogni scatola tocca il bordo sinistro del blocco contenitore (per la formattazione da destra a sinistra, i bordi destri si toccano).

I margini verticali tra le scatole adiacenti a livello di blocco in un BFC collassano. Per saperne di più sui [margini che collassano].

• Metodo 'div' vuoto - '<div style="clear:both;"></div>'.
• Metodo Clearfix - Fare riferimento alla classe '.clearfix' sopra.
• Metodo 'overflow: auto' o 'overflow: hidden' - Il genitore stabilirà un nuovo contesto di formattazione del blocco e si espanderà per contenere i suoi figli 'float'.

In progetti di grandi dimensioni, scriverei una classe utility '.clearfix' e la userei nei punti in cui ne ho bisogno. 'overflow: hidden' potrebbe tagliare i figli se i figli sono più alti del genitore e non è molto ideale.

Gli sprite CSS combinano più immagini in un'unica immagine più grande. È una tecnica comunemente usata per le icone (Gmail la usa). Come implementarla:

1. Usa un generatore di sprite che raggruppa più immagini in una e genera il CSS appropriato per essa.
2. Ogni immagine avrebbe una classe CSS corrispondente con le proprietà 'background-image', 'background-position' e 'background-size' definite.
3. Per usare quell'immagine, aggiungi la classe corrispondente al tuo elemento.

Vantaggi:

• Ridurre il numero di richieste HTTP per più immagini (è richiesta solo una singola richiesta per foglio sprite). Ma con HTTP2, il caricamento di più immagini non è più un problema.
• Download anticipato di risorse che non verrebbero scaricate fino a quando non necessarie, come le immagini che appaiono solo negli pseudo-stati ':hover'. Il lampeggiamento non sarebbe visibile.

• Dopo aver identificato il problema e il browser incriminato, usa un foglio di stile separato che si carica solo quando quel browser specifico è in uso. Questa tecnica richiede però il rendering lato server.
• Usa librerie come Bootstrap che gestiscono già questi problemi di stile per te.
• Usa 'autoprefixer' per aggiungere automaticamente i prefissi dei vendor al tuo codice.
• Usa Reset CSS o Normalize.css.
• Se stai usando Postcss (o una libreria di transpilazione simile), potrebbero esserci plugin che ti consentono di scegliere di utilizzare la sintassi CSS moderna (e persino le proposte W3C) che trasformeranno quelle sezioni del tuo codice in codice sicuro corrispondente che funzionerà nei target che hai usato.

• Degradazione aggraziata - La pratica di costruire un'applicazione per browser moderni garantendo che rimanga funzionale nei browser più vecchi.
• Miglioramento progressivo - La pratica di costruire un'applicazione per un livello base di esperienza utente, ma aggiungendo miglioramenti funzionali quando un browser lo supporta.
• Usa [caniuse.com] per controllare il supporto delle funzionalità.
• Autoprefixer per l'inserimento automatico dei prefissi dei vendor.
• Rilevamento delle funzionalità tramite [Modernizr].
• Usa le query sulle funzionalità CSS [@support]

Queste tecniche sono legate all'accessibilità (a11y).

• 'width: 0; height: 0'. Fa in modo che l'elemento non occupi alcuno spazio sullo schermo, risultando invisibile.
• 'position: absolute; left: -99999px'. Lo posiziona fuori dallo schermo.
• 'text-indent: -9999px'. Questo funziona solo sul testo all'interno degli elementi 'block'. Questo è un trucco molto usato e famoso, ma presenta [alcuni svantaggi] come causare problemi di prestazioni, quindi potresti considerare di usare 'text-indent: 100%' invece.
• Meta tag. Ad esempio, utilizzando Schema.org, RDF e JSON-LD.
• WAI-ARIA. Una specifica tecnica del W3C che specifica come aumentare l'accessibilità delle pagine web.

Anche se WAI-ARIA è la soluzione ideale, opterei per l'approccio con posizionamento 'absolute', in quanto ha il minor numero di avvertenze, funziona per la maggior parte degli elementi ed è una tecnica facile.

Prima che Flex diventasse popolare (intorno al 2014), il sistema a griglia basato su 'float' era il più affidabile perché aveva ancora il maggior supporto browser tra i sistemi alternativi esistenti (flex, grid). Bootstrap usava l'approccio 'float' fino a Bootstrap 4 che è passato all'approccio basato su 'flex'. Al momento della stesura (2020), 'flex' è l'approccio raccomandato per la costruzione di sistemi a griglia e ha un [decente supporto browser].

Per gli avventurosi, possono esaminare [CSS Grid Layout], che utilizza la nuova proprietà 'grid'; è anche meglio di 'flex' per la costruzione di layout a griglia e sarà il modo di fatto per farlo in futuro.

Sì. Un esempio sarebbe la trasformazione di una navigazione a pillole impilate in una navigazione a schede fisse in basso oltre un certo breakpoint.

Sì, ci sono diversi modi per colorare le forme (incluso specificare attributi sull'oggetto) usando CSS inline, una sezione CSS incorporata o un file CSS esterno. La maggior parte degli SVG che trovi sul web usano CSS inline, ma ci sono vantaggi e svantaggi associati a ogni tipo.

La colorazione di base può essere fatta impostando due attributi sul nodo: 'fill' e 'stroke'. 'fill' imposta il colore all'interno dell'oggetto e 'stroke' imposta il colore della linea tracciata attorno all'oggetto. Puoi usare gli stessi schemi di denominazione dei colori CSS che usi in HTML, che siano nomi di colore (cioè 'red'), valori RGB (cioè 'rgb(255,0,0)'), valori esadecimali, valori RGBA, ecc.

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />

Il 'fill="purple"' di cui sopra è un esempio di attributo presentazionale. È interessante notare che, a differenza degli stili inline come 'style="fill: purple"' che è anche un attributo, gli attributi presentazionali possono essere [sovrascritti dagli stili CSS] definiti in un foglio di stile. Quindi, se facessi qualcosa come 'svg { fill: blue; }' sovrascriverebbe il riempimento viola che abbiamo definito.

Sì, ci sono quattro tipi di proprietà @media (incluso screen):

• 'all' - per tutti i tipi di dispositivi multimediali
• 'print' - per le stampanti
• 'speech' - per i lettori di schermo che 'leggono' la pagina ad alta voce
• 'screen' - per schermi di computer, tablet, smartphone ecc.

Ecco un esempio di utilizzo del tipo di media 'print':

@media print {
  body {
    color: black;
  }
}

Innanzitutto, capisci che i browser associano i selettori da destra (selettore chiave) a sinistra. I browser filtrano gli elementi nel DOM in base al selettore chiave e attraversano gli elementi padre per determinare le corrispondenze. Più corta è la lunghezza della catena del selettore, più velocemente il browser può determinare se quell'elemento corrisponde al selettore. Quindi evita i selettori chiave che sono tag e selettori universali. Essi corrispondono a un gran numero di elementi e i browser dovranno fare più lavoro per determinare se i genitori corrispondono.

La metodologia [BEM (Block Element Modifier)] raccomanda che tutto abbia una singola classe, e, dove hai bisogno di gerarchia, essa viene incorporata anche nel nome della classe, questo rende naturalmente il selettore efficiente e facile da sovrascrivere.

Sii consapevole di quali proprietà CSS [attivano] reflow, repaint e compositing. Evita di scrivere stili che modificano il layout (attivano reflow) dove possibile.

Vantaggi:

• Il CSS diventa più manutenibile.
• Facile da scrivere selettori annidati.
• Variabili per un'organizzazione coerente. Possono condividere file di tema tra diversi progetti.
• Mixin per generare CSS ripetuti.
• Funzionalità Sass come cicli, liste e mappe possono rendere la configurazione più semplice e meno verbosa.
• Suddivisione del codice in più file. I file CSS possono essere suddivisi anche, ma ciò richiederà una richiesta HTTP per scaricare ogni file CSS.

Svantaggi:

• Richiede strumenti per la preelaborazione. Il tempo di ricompilazione può essere lento.
• Non scrivere CSS attualmente e potenzialmente utilizzabile. Ad esempio, utilizzando qualcosa come [postcss-loader] con [webpack], è possibile scrivere CSS potenzialmente compatibile con il futuro, consentendo di utilizzare cose come le variabili CSS invece delle variabili Sass. Pertanto, si stanno imparando nuove competenze che potrebbero ripagare se/quando diventeranno standardizzate.

Mi piace:

• Principalmente i vantaggi menzionati sopra.
• Meno codice scritto in JavaScript, il che si abbina bene con Node.

Non mi piace:

• Uso Sass tramite 'node-sass', che è un binding per LibSass scritto in C++. Devo ricompilarlo frequentemente quando passo tra le versioni di Node.
• In Less, i nomi delle variabili sono prefissati con '@', il che può essere confuso con parole chiave CSS native come '@media', '@import' e la regola '@font-face'.

Usa '@font-face' e definisci 'font-family' per diversi 'font-weight'.

Questa parte è correlata a quanto sopra riguardo scrivere CSS efficiente. I browser abbinano i selettori da destra (selettore chiave) a sinistra. I browser filtrano gli elementi nel DOM in base al selettore chiave e risalgono gli elementi padre per determinare le corrispondenze. Più corta è la lunghezza della catena del selettore, più velocemente il browser può determinare se quell'elemento corrisponde al selettore.

Ad esempio, con questo selettore 'p span', i browser trovano prima tutti gli elementi '<span>' e risalgono i loro genitori fino alla radice per trovare l'elemento '<p>'. Per un particolare '<span>', non appena trova un '<p>', sa che lo '<span>' corrisponde e può interrompere la sua corrispondenza.

Uno pseudo-elemento CSS è una parola chiave aggiunta a un selettore che ti consente di stilizzare una parte specifica degli elementi selezionati. Possono essere usati per la decorazione (':first-line', ':first-letter') o per aggiungere elementi al markup (combinati con 'content: ...') senza dover modificare il markup (':before', ':after').

• ':first-line' e ':first-letter' possono essere usati per decorare il testo.
• Utilizzato nell'hack '.clearfix' come mostrato sopra per aggiungere un elemento a zero spazio con 'clear: both'.
• Le frecce triangolari nelle finestre di suggerimento usano ':before' e ':after'. Incoraggia la separazione delle preoccupazioni perché il triangolo è considerato parte dello stile e non realmente del DOM.

Il 'box model' CSS descrive le scatole rettangolari che vengono generate per gli elementi nell'albero del documento e disposte secondo il modello di formattazione visiva. Ogni scatola ha un'area di contenuto (ad esempio testo, un'immagine, ecc.) e aree opzionali di 'padding', 'border' e 'margin' circostanti.

Il 'box model' CSS è responsabile del calcolo di:

• Quanto spazio occupa un elemento di blocco.
• Se i bordi e/o i margini si sovrappongono o collassano.
• Le dimensioni di una scatola.

Il 'box model' ha le seguenti regole:

• Le dimensioni di un elemento di blocco sono calcolate da 'width', 'height', 'padding', 'border's e 'margin's.
• Se non è specificata nessuna 'height', un elemento di blocco sarà alto quanto il contenuto che contiene, più il 'padding' (a meno che non ci siano float, per i quali vedi sotto).
• Se non è specificata nessuna 'width', un elemento di blocco non 'float' si espanderà per adattarsi alla larghezza del suo genitore meno il 'padding'.
• La 'height' di un elemento è calcolata dalla 'height' del contenuto.
• La 'width' di un elemento è calcolata dalla 'width' del contenuto.
• Per impostazione predefinita, i 'padding' e i 'border' non fanno parte della 'width' e della 'height' di un elemento.

• Per impostazione predefinita, agli elementi viene applicato 'box-sizing: content-box', e viene considerata solo la dimensione del contenuto.
• 'box-sizing: border-box' cambia il modo in cui vengono calcolate la 'width' e la 'height' degli elementi; anche 'border' e 'padding' sono inclusi nel calcolo.
• L''height' di un elemento è ora calcolata dalla 'height' del contenuto + 'padding' verticale + 'border' verticale.
• La 'width' di un elemento è ora calcolata dalla 'width' del contenuto + 'padding' orizzontale + 'border' orizzontale.
• Tenere conto dei 'padding' e dei 'border' come parte del nostro 'box model' risuona meglio con il modo in cui i designer immaginano effettivamente il contenuto nelle griglie.

• 'none', 'block', 'inline', 'inline-block', 'flex', 'grid', 'table', 'table-row', 'table-cell', 'list-item'.

| 'display' | Descrizione | | :-- | :-- | | 'none' | Non visualizza un elemento (l'elemento non influenza più il layout del documento). Tutti gli elementi figli non vengono più visualizzati. Il documento viene renderizzato come se l'elemento non esistesse nell'albero del documento | | 'block' | L'elemento occupa l'intera riga nella direzione del blocco (che di solito è orizzontale) | | 'inline' | Gli elementi possono essere disposti uno accanto all'altro | | 'inline-block' | Simile a 'inline', ma consente alcune proprietà 'block' come l'impostazione di 'width' e 'height' | | 'table' | Si comporta come l'elemento '<table>' | | 'table-row' | Si comporta come l'elemento '<tr>' | | 'table-cell' | Si comporta come l'elemento '<td>' | | 'list-item' | Si comporta come un elemento '<li>' che gli consente di definire 'list-style-type' e 'list-style-position' |

Aggiungo un confronto con 'block' per completezza.

| | 'block' | 'inline-block' | 'inline' | | --- | --- | --- | --- | | Dimensioni | Riempie la larghezza del suo contenitore genitore. | Dipende dal contenuto. | Dipende dal contenuto. | | Posizionamento | Inizia su una nuova riga e non tollera elementi HTML accanto (tranne quando si aggiunge 'float') | Scorre insieme ad altri contenuti e consente altri elementi accanto. | Scorre insieme ad altri contenuti e consente altri elementi accanto. | | Può specificare 'width' e 'height' | Sì | Sì | No. Verrà ignorato se impostato. | | Può essere allineato con 'vertical-align' | No | Sì | Sì | | Margini e padding | Tutti i lati rispettati. | Tutti i lati rispettati. | Solo i lati orizzontali rispettati. I lati verticali, se specificati, non influenzano il layout. Lo spazio verticale che occupa dipende da 'line-height', anche se il 'border' e il 'padding' appaiono visivamente attorno al contenuto. | | Float | - | - | Diventa come un elemento 'block' dove è possibile impostare margini e padding verticali. |

Un elemento posizionato è un elemento la cui proprietà 'position' calcolata è 'relative', 'absolute', 'fixed' o 'sticky'.

• 'static' - La posizione predefinita; l'elemento scorrerà nella pagina come farebbe normalmente. Le proprietà 'top', 'right', 'bottom', 'left' e 'z-index' non si applicano.
• 'relative' - La posizione dell'elemento viene regolata rispetto a se stesso, senza modificare il layout (e quindi lasciando uno spazio per l'elemento dove si sarebbe trovato se non fosse stato posizionato).
• 'absolute' - L'elemento viene rimosso dal flusso della pagina e posizionato in una posizione specificata rispetto al suo antenato posizionato più vicino, se presente, o altrimenti rispetto al blocco contenitore iniziale. I box posizionati assolutamente possono avere margini, e non collassano con altri margini. Questi elementi non influenzano la posizione di altri elementi.
• 'fixed' - L'elemento viene rimosso dal flusso della pagina e posizionato in una posizione specificata rispetto alla viewport e non si muove quando si scorre.
• 'sticky' - Il posizionamento 'sticky' è un ibrido di posizionamento 'relative' e 'fixed'. L'elemento è trattato come posizionato 'relative' finché non supera una soglia specificata, a quel punto viene trattato come posizionato 'fixed'.

• Bootstrap - Ciclo di rilascio lento. Bootstrap 4 è stato in alpha per quasi 2 anni. Aggiungere un componente pulsante spinner, poiché è ampiamente utilizzato.
• Semantic UI - La struttura del codice sorgente rende la personalizzazione del tema estremamente difficile da comprendere. Il suo sistema di temi non convenzionale è un dolore da personalizzare. Percorso di configurazione codificato all'interno della libreria del fornitore. Non ben progettato per la sovrascrittura delle variabili a differenza di Bootstrap.
• Bulma - Molte classi e markup non semantici e superflui richiesti. Non retrocompatibile. L'aggiornamento delle versioni rompe l'app in modi sottili.

Sì. Flexbox è principalmente destinato a layout 1-dimensionali mentre Grid è destinato a layout 2-dimensionali.

Flexbox risolve molti problemi comuni in CSS, come la centratura verticale degli elementi all'interno di un contenitore, il footer appiccicoso, ecc. Bootstrap e Bulma sono basati su Flexbox, ed è probabilmente il modo consigliato per creare layout al giorno d'oggi. Ho provato Flexbox in passato ma ho riscontrato alcuni problemi di incompatibilità del browser (Safari) nell'uso di 'flex-grow', e ho dovuto riscrivere il mio codice usando 'inline-blocks' e la matematica per calcolare le larghezze in percentuale, non è stata una bella esperienza.

Grid è di gran lunga l'approccio più intuitivo per creare layout basati su griglia (è meglio che lo sia!) ma il supporto del browser non è ampio al momento.

Si noti che questi due approcci non sono esclusivi.

Rendere un sito web responsive significa che alcuni elementi risponderanno adattando le loro dimensioni o altre funzionalità in base alle dimensioni dello schermo del dispositivo, tipicamente la larghezza della viewport, tramite le media query CSS, ad esempio, rendendo la dimensione del carattere più piccola sui dispositivi più piccoli.

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

Una strategia mobile-first è anch'essa responsive, tuttavia concorda sul fatto che dovremmo impostare e definire tutti gli stili per i dispositivi mobili, e solo in seguito aggiungere regole responsive specifiche per altri dispositivi. Seguendo l'esempio precedente:

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

Una strategia mobile-first ha due vantaggi principali:

• È più performante sui dispositivi mobili, poiché tutte le regole applicate per essi non devono essere validate rispetto a nessuna media query.
• Costringe a scrivere codice più pulito rispetto alle regole CSS responsive.

Sia il design responsive che quello adattivo tentano di ottimizzare l'esperienza utente su diversi dispositivi, adattandosi a diverse dimensioni della viewport, risoluzioni, contesti di utilizzo, meccanismi di controllo e così via.

Il design responsive funziona sul principio della flessibilità: un unico sito web fluido che può apparire bene su qualsiasi dispositivo. I siti web responsive utilizzano media query, griglie flessibili e immagini responsive per creare un'esperienza utente che si flette e cambia in base a una moltitudine di fattori. Come una singola palla che cresce o si restringe per passare attraverso diversi cerchi.

Il design adattivo è più simile alla definizione moderna di miglioramento progressivo. Invece di un unico design flessibile, il design adattivo rileva il dispositivo e altre caratteristiche e quindi fornisce la funzionalità e il layout appropriati in base a un set predefinito di dimensioni della viewport e altre caratteristiche. Il sito rileva il tipo di dispositivo utilizzato e fornisce il layout preimpostato per quel dispositivo. Invece di una singola palla che attraversa diversi cerchi di dimensioni diverse, avresti diverse palle da usare a seconda della dimensione del cerchio.

Entrambi questi metodi presentano alcuni problemi che devono essere valutati:

• Il design responsive può essere piuttosto impegnativo, poiché stai essenzialmente utilizzando un unico layout, sebbene responsive, per adattarsi a tutte le situazioni. Come impostare i punti di interruzione delle media query è una di queste sfide. Utilizzi valori di punti di interruzione standardizzati? Oppure utilizzi punti di interruzione che hanno senso per il tuo particolare layout? E se quel layout cambia?
• Il design adattivo generalmente richiede il rilevamento dell'agente utente o il rilevamento DPI, ecc., tutti elementi che possono rivelarsi inaffidabili.

Retina è solo un termine di marketing per riferirsi a schermi ad alta risoluzione con un rapporto pixel superiore a 1. La cosa fondamentale da sapere è che l'uso di un rapporto pixel significa che questi display emulano uno schermo a risoluzione inferiore per mostrare gli elementi con la stessa dimensione. Al giorno d'oggi consideriamo tutti i dispositivi mobili display retina di fatto.

I browser, per impostazione predefinita, rendono gli elementi DOM in base alla risoluzione del dispositivo, ad eccezione delle immagini.

Per avere una grafica nitida e bella che sfrutti al meglio i display retina, dobbiamo usare immagini ad alta risoluzione quando possibile. Tuttavia, l'uso sempre di immagini con la massima risoluzione avrà un impatto sulle prestazioni, poiché dovranno essere inviati più byte attraverso la rete.

Per superare questo problema, possiamo usare immagini responsive, come specificato in HTML5. Richiede di rendere disponibili al browser file di risoluzione diversa della stessa immagine e lasciargli decidere quale immagine è migliore, usando l'attributo html 'srcset' e opzionalmente 'sizes', ad esempio:

<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>

È importante notare che i browser che non supportano 'srcset' di HTML5 (cioè IE11) lo ignoreranno e useranno 'src' invece. Se abbiamo davvero bisogno di supportare IE11 e vogliamo fornire questa funzionalità per motivi di prestazioni, possiamo usare un polyfill JavaScript, ad esempio.

Per le icone, opterei anche per l'uso di SVG e font di icone quando possibile, poiché vengono renderizzati in modo molto nitido indipendentemente dalla risoluzione.

'translate()' è un valore di CSS 'transform'. La modifica di 'transform' o 'opacity' non attiva il 'reflow' o il 'repaint' del browser, ma attiva le composizioni; mentre la modifica delle proprietà di posizionamento assoluto attiva il 'reflow'. 'transform' fa sì che il browser crei un livello GPU per l'elemento, ma la modifica delle proprietà di posizionamento assoluto utilizza la CPU. Quindi 'translate()' è più efficiente e si tradurrà in tempi di pittura più brevi per animazioni più fluide.

Quando si usa 'translate()', l'elemento occupa ancora il suo spazio originale (un po' come 'position: relative'), a differenza di quando si modifica il posizionamento assoluto.