Variable fonts are a brilliant idea. They embed in a single file the many styles they can have. In this way, the resulting size is much smaller, and they provide increased versatility. For example, you are not limited to regular, bold, light, condensed, expanded stretches, etc. Instead, you can specify numeric values with higher granularity.

They are quite recent: they started being supported by operating systems and libraries around 2017.

Later, also web browsers started supporting them. But, at the moment of writing, the support has not been standardized yet. In other words: use at your own risk 🤐️.

And I tried to. Six months ago, I switched to variable fonts. Lately, however, I have noticed some nasty problems.

Chrome and the faux italic

I love the Inconsolata font. I have been using it as my system-wide monospace and for my site for the latest years. It has only a defect: it does not have an italic variant.

But this is not a real issue because browsers can fake it by slanting the font… or can they?

Sure, if you are using Firefox. But if you are using Chrome, it will not do it. And this includes Chrome on desktop, mobile, and all the browsers based on Android’s WebView. … [Leggi il resto]

Ho appena scoperto una cosa che tutti i webmaster/webdesigner ameranno.

Si chiama CSS3 PIE.

È uno script htc, cioè del formato proprietario di Internet Explorer che permette di introdurre nelle versioni 6-7-8 i CSS3.

Tuttavia sarà un lavoraccio usarlo perché dovete introdurlo in ogni elemento con la proprietà non-standard behavior in un foglio di stile sotto commento condizionale perché altrimenti non otterrete un risultato positivo nel validatore CSS.

Poi la cosa che lo rende ancora meglio è che è software libero (Apache License 2.0 o GPL 2.0), così lo potrete usare nei vostri progetti senza limitazioni.

Io amo il layout con dimensione percentuale, detto anche layout liquido.

La soluzione più semplice e che magari è adottata da coloro che fanno da poco pagine web è usare un layout a tabella ma ciò è sbagliato semanticamente e dal punto di vista dell’accessibilità: la tabella indica dati, non layout!

Fino ad oggi ho usato Equal Height Columns with Cross-Browser CSS di Matthew James Taylor ma purtroppo non va bene in un caso che mi è proprio necessario: usare le PNG trasparenti rispetto a un container di livello superiore.

Infatti questo web designer sposta verso sinistra i div se vedete la descrizione, mentre io voglio spostare verso destra.

In realtà il mio obiettivo sarebbe riuscire a fare n colonne non influenzate tra loro ma mi sono accorto che con questo trucchetto che comunque mi va bene non ce la faccio, magari in futuro arriverà anche per questo la soluzione.

Ma veniamo alla soluzione: mantenendo lo stesso codice HTML (o meglio, rimuovendo col3 e container3 visto che lo faccio a due colonne) ho adottato i margini negativi. … [Leggi il resto]

Possono essere una soluzione ai problemi di font?

Non so come si chiamano veramente ma io li chiamo così.

In pratica dei siti mettono a disposizione dei font richiamati grazie al CSS.

Non è che sia una cosa così rivoluzionaria in quanto da tempo è possibile però sono interessanti, soprattutto perché con la banda larga non è un problema scaricarsi un font.

I pro secondo me sono che finalmente si può ottenere l’effetto desiderato con ogni piattaforma.

Tuttavia i contro sono più di uno: intanto serve una licenza per l’uso (intendo tipo chiave servizio Google Maps) e poi certi siti magari non lasciano usare il font in ogni tipo di sito, cosa che sarebbe bella.

Purtroppo questo è il lato debole anche dei plugin e dei temi in generale: possono essere rilasciati con licenza diversa per esempio dagli altri progetti (vedi jQuery e Wordpress¹) e lo sviluppatore non può contare su del software che sarebbe utile.

Penso che però sia così in generale con la grafica: chi è bravo spesso non rilascia oppure rilascia con troppe restrizioni.

In questi giorni ho pensato a dei post sul web design e grafica da fare.

Apro con questo post sugli input che riguarda i tag HTML input, textarea e select e correlati, “visivamente” caselle di testo, bottoni etc.

Non so che sistema operativo usiate o browser ma ognuno ha le sue dichiarazioni grafiche di default.

Purtroppo mi è capitato di vedere alcuni siti o CMS o temi grafici che hanno personalizzato l’input senza tenere conto delle loro dichiarazioni di default.

Su Windows (almeno fino alla versione XP, Vista penso di averlo usato sì e no un’ora in totale e Seven mai usato) questo non è un problema e neanche su Mac da quanto ne so (neanche questo l’ho usato molto, al massimo iOS di iPod Touch).

Invece lo stesso non può essere detto dei Browser dei S.O. che usano un server X11, tra i quali si può citare GNU Linux.

Il problema è che ci sono moltissime combinazioni per esempio Gecko/GTK (es Firefox) o Webkit/GTK o Webkit/QT e non esiste un tema di default su cui contare o su un tema di default a maggioranza altrimenti (cosa comunque sbagliata).

Per esempio io ho provato un tema GTK chiamato Nodka Dark che personalizza anche gli input, rendendoli marroni/neri con il colore del testo grigio. … [Leggi il resto]