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]

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]