Le pagine web vengono visualizzate in modo diverso a seconda del browser: è proprio cosà¬, ed è una delle cose più comuni ma anche più difficili da far capire all’utente medio: ogni browser interpreta o ignora gli elementi della pagina, bloccandone alcuni e cercando di rendere al meglio gli altri. A livello visuale, questo può comportare proporzioni diverse, linee più o meno dense e cosଠvia. Dettagli spesso impercettibili o minimali che fanno la differenza, e che ogni web designer dovrebbe conoscere.
Pure CSS Francine è un’opera d’arte realizzata interamente in markup HTML e CSS, e decisamente spettacolare: a seconda del browser con cui si apre l’immagine, infatti, è possibile apprezzare dettagli differenti e resa visiva molto simile, per quanto non identica. Per apprezzare l’effetto, è necessario scaricare il codice in formato ZIP da Github, e poi aprire il file index.html all’interno dello stesso con più browser.
Io ci ho provato stasera, e questo è il risultato ottenuto: ho fatto tre screenshot coi principali browser che uso.
Firefox
Questa è la resa di base su Firefox: ricordiamo che si tratta di un’immagine realizzata dall’esperta di UI e sviluppatrice Diana Smith, tutta in HTML e CSS. Fate caso soprattutto, in questa fase, a come vengono resi gli occhi e le ciglia.
Chrome
In questo caso la resa visuale è abbastanza simile, per quanto l’espressività del viso sembri leggermente più marcata. Anche l’illuminazione della figura sembra seguire un percorso differente. La linea tratteggiata della cintura, ad esempio, qui sembra più sottile del caso precedente. Ma non è tutto: addirittura le proporzioni del viso sembrano molto diverse dagli altri due rendering che ho provato.
Safari
Qui le differenze sembrano essere leggermente più marcate: la resa è diversa come è possibile vedere dal glitch sulla spalla destra della donna, e da come sono visualizzati occhi e ciglia: qui sono decisamente più marcati. La resa grafica, in generale, sembrerebbe meno di qualità dei due casi precedenti.
Per testare l’effetto potete scaricare il progetto da Github e provare ad aprirlo con vari browser.
👇 Da non perdere 👇
- Gratis 🎉
- Lavoro 🔧
- Marketing & SEO 🌪
- Programmare 🖥
- Reti 💻
- Sicurezza & Privacy 👁
- 💬 Il nostro canale Telegram: iscriviti
- 🔵 Slash finale negli URL del sito: meglio con o senza?
- 🔴 Come si ottimizza il PageSpeed Insights di un sito [GUIDA]
- 🔴 Guida pratica ai principali tipi di certificati SSL
