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 👇
- 📈 Analizza Cellulari 📱
- 🔐 AI che dolor, Chat
- 🎯 Targetizza Database SQL 🗄
- 📊 Analizza Errori più comuni 📛
- 🚧 Costruisci Evergreen 📟
- 👩💻 Programma Gratis 🎉
- 💻 Configura Hosting a confronto 💑
- 🔒 Conosci Hosting reti e domini 💻
- 👩💻 Tapioca Informatica 🖥
- 💻 Iconizza Internet 💻
- 🔒 Gestisci Lavoro 🔧
- 💡 Mostra Marketing & SEO 🌪
- 🔑 Apprendi Meteo ⛅
- 🤯 Visiona Mondo Apple 🍎
- 🔍 Supervisiona Mondo Domini 🌐
- 🚀 Metti in cloud monitoraggio servizi online 📈
- 🔮 Anatomizza Nuove tecnologie 🖥
- 🔒 Antani PEC e firma digitale 📩
- 👀 Prematura Programmare 🖥
- 🎮 Lonfa Scrivere 🖋
- 🔒 Conosci Servizi di SMS 📶
- 👀 Guarda Sicurezza informatica e privacy digitale 🖥
- 🎮 Ricorda Siti web 🌎
- 🤖 Ottimizza Spiegoni 🎓
- 🧠 Neuralizza Svago 🎈
- 📡 Quantizza Usare Excel 🌀
- 🤖 Sovrascrivi Windows 😲
- 🎨 Personalizza Wireless 🚁
- 🔑 Decifra WordPress 🤵
- 💬 Il nostro canale Telegram: iscriviti
- 🔵 Cambiare DNS: come trasferire un sito da un hosting all’altro
- 🟡 Perchè nella SEO non bisogna usare i tag di WordPress come fossero parole chiave
- 🟢 Errore del server (5xx): cosa significa in Google Search Console (e come risolverlo)
