display: block

Web font: nuova sintassi

Francesco — Mon, 11 Apr 2011 14:32:46 +0000

Uno dei problemi di cui si sente spesso molta gente lamentarsi è che “non passa giorno senza che cambi qualche sintassi”.

Naturalmente non è vero, ma effettivamente ogni tanto qualcosa cambia e tenersi aggiornati è una buona idea… come in questo caso.

La sintassi “a prova di proiettile” per l’inclusione dei web font che vi avevo riportato qualche tempo fa… non ha resistito ai proiettili di Android e di Internet Explorer 9 in modalità compatibile 7 e 8, ecco quindi la nuova sintassi!

Questa volta dobbiamo ringraziare Fontspring che in una serie di due articoli ha aggiornato la sintassi di Paul Irish in una che a oggi funziona davvero ovunque.

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot');
	src: url('myfont-webfont.eot?iefix') format('eot'),
	     url('myfont-webfont.woff') format('woff'),
	     url('myfont-webfont.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
}

Vediamo in breve le modifiche.

IE cerca di leggere tutti i formati (fallendo) e a questo si rimedia aggiungendo un “?” nella dichiarazione del suo formato (.eot). La doppia dichiarazione .eot serve per la modalità compatibile 7 e 8 di Internet Explorer 9. Inoltre, il formato corretto dell’.eot sarebbe “embedded-opentype”, ma cambiandolo in qualsiasi altra cosa (per esempio proprio “eot”) Internet Explorer 9 lo salta… giungendo quindi al .woff che supporta (e che è indubbiamente migliore dell’.eot). Tutto sistemato per IE.

Per Android il problema era la “faccina” (o meglio, il “local”) che è quindi stato rimosso. Chi preferisse non far caricare i web-font ad Android (per motivi di banda) può tranquillamente reintrodurla.

Lo stesso discorso vale per iPhone/iPad/iPod: l’ultima riga, quella con l’svg, serve per i dispositivi Apple con vecchie versioni del software (l’ultima versione supporta .ttf) e molti preferiscono rimuoverla sia per motivi di banda, sia per la scarsezza dell’svg come formato di font.

Menù con le linguette

Francesco — Wed, 09 Feb 2011 19:26:59 +0000

Come realizzare quei triangolini che compaiono sotto i menù quando sono selezionati? Ci sono sicuramente diversi tutorial in rete, ma non sono riuscito a trovarne nemmeno uno quando mi serviva. Ecco quindi in poche righe la soluzione che ho trovato.

L’ispirazione viene dall’unione di due tecniche molto comuni: la possibilità di creare delle forme geometriche con le pseudoclassi CSS e il metodo per centrare gli elementi posizionati in maniera assoluta.

Il tutto, ovviamente, senza introdurre immagini o elementi aggiuntivi senza alcun significato semantico.

Tipicamente abbiamo un menù fatto così:

      ul {
         list-style-type: none;
         background-color: #339;
         height: 36px;
       }

      li {
         float: left;
      }

      li a {
         display: block;
         padding: 10px 20px;
         color: #fff;
         text-decoration: none;
      }

      li a:hover,
      li .current {
         background-color: #69c;
      }

Per aggiungere i triangolini sull’:hover e/o quando siamo nella sezione interessata, basta rendere relative la posizione del link:

    li a {
         display: block;
         padding: 10px 20px;
         color: #fff;
         text-decoration: none;
         position: relative;
      }

e aggiungere una pseudo classe :after posizionata in maniera assoluta:

      li a:hover:after,
      li .current:after {
         content: "";
         position: absolute;
         bottom: -10px;
         left: 50%;
         margin-left: -10px;
         width: 0;
         height: 0;
         border-left: 10px solid transparent;
         border-right: 10px solid transparent;
         border-top: 10px solid #69c;
      }

Analizziamo quest’ultima voce.

:after è appunto la pseudo classe che aggiunge del contenuto dopo l’elemento indicato.
Non c’è content perché non abbiamo del reale contenuto aggiunto.
La posizione è assoluta, come già detto, e centrata a metà del link. Qui sorge il problema principale: siccome le voci del menù sono di larghezza variabile, posizionando in maniera assoluta a metà elemento il triangolino, questo resterà sempre spostato verso destra, perché sarà il suo vertice destro a partire esattamente a metà dello spazio a sua disposizione. Diminuire leggermente il valore percentuale non aiuta, perché il triangolino ha dimensione fissa mentre il link che lo contiene varia. Viene in nostro soccorso il margine sinistro: fissandolo dello stesso valore della larghezza del triangolino, in negativo, quest’ultimo verrà “trascinato” a sinistra esattamente quando basta per centrarlo perfettamente a prescindere dalla larghezza del link.
Le ultime righe di codice sono il solito trucchetto per creare i triangoli, giocando con le proprietà dei bordi.

(Se al posto di :after avessimo usato :before sarebbe stata la stessa cosa. Risulta più intuitivo usare :after visto che la linguetta viene… dopo!)

Qui potete trovare una demo.

Naturalmente su Internet Explorer 6 e 7 non si vedranno le linguette perché nessuno dei due supporta :after. Tutti gli altri browser (Internet Explorer 8 incluso) invece sì, quindi la cosa non è un problema, perché le linguette sono un semplice miglioramento estetico; siccome forniamo comunque all’utente un metodo per capire in quale sezione siamo e/o che stiamo passando sopra a un link con il mouse (con il colore di sfondo che cambia).

N.B.: In generale, visto che i li hanno un float: left per poter stare uno di fianco all’altro, il loro container (ul) tipicamente non ha altezza se non la si dichiara esplicitamente (come in questo caso). In alternativa si può dichiarare anch’esso come float, oppure assegnargli una classe clearfix (di cui riparleremo, si può trovare nel CSS del Boilerplate, intanto). Altra alternativa è aggiungere overflow: hidden o overflow: auto al container… ma in questo caso attenzione perché le linguette, siccome sforerebbero, potrebbero essere troncate (se hidden) o far comparire una barra di scorrimento (se auto).

L’HTML5Boilerplate – parte 2 – Reset CSS

Francesco — Wed, 08 Dec 2010 15:35:12 +0000

Torniamo a parlare del Boilerplate HTML5. L’altra volta avevo parlato delle dichiarazioni condizionali del tag per poter capire se stiamo usando Internet Explorer, oggi invece parliamo di un argomento di cui si è discusso parecchio ultimamente grazie a un articolo che ne racconta la storia: Il reset CSS. Il Boilerplate include un reset CSS come prima parte del suo foglio di stile e, come giustamente ricordato nei commenti all’inizio del CSS, il codice in questione è comunque un aggiornamento della versione “storica” di Eric Meyer. Se vi interessa sapere come si è giunti al reset attuale vi consiglio l’articolo di cui sopra.

Un reset CSS serve ad azzerare tutti i valori che i vari browser applicano di default ai vari tag. Questo perché ogni browser applica valori differenti e rimane quindi più comodo azzerare tutto per poter decidere poi noi questi valori. In alternativa si può sempre ridefinire questi valori ogni singola volta che si aggiunge una regola a un tag, un id o una classe, ma personalmente (e come me molti altri) lo ritengo più scomodo e fonte di errori.

Principalmente nel reset si parla di margini, padding, bordi e allineamenti. Di questo si occupa la prima delle voci, azzerandoli in tutti i tag che fanno attualmente parte dell’HTML5:

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent
}

Essendo poi questo un reset per una pagina in HTML5, bisogna forzare a “block” i nuovi elementi semantici che devono essere block per definizione (non tutti, naturalmente… per esempio no):

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block
}

Si procede poi ad azzerare l’aspetto delle liste. Tenendo conto che la maggior parte delle volte le liste vengono utilizzate per menù e altri elementi simili di navigazione, è naturale rimuovere il comportamento di default in questi casi (da cui la regola nav ul) e riaggiungerlo nei casi particolari in cui servissero davvero delle liste puntate/numerate. Allo stesso modo azzeriamo le eventuali decorazioni (virgolette) che alcuni browser aggiungono ai tag

e :
nav ul { list-style:none }
blockquote, q { quotes:none }
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none
}
Nell’elenco generale di prima, non c’era il tag . Questo perché è giusto, per motivi di usabilità, che non perda il suo outline. Dobbiamo però azzerare tutti gli altri valori, quindi:

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent }

Ci sono poi tre tag (due vecchi, e e uno nuovo, ) che non hanno tanto bisogno di un azzeramento quanto di uno stile specifico. A assegniamo normalmente una bella “riga sopra”, mentre per gli altri diamo colori e/o stili diversi di visualizzazione. Quelli indicati qui, in questo caso, sono solo degli esempi, ognuno li può personalizzare come crede!

ins { background-color: #ff9; color: #000; text-decoration:none } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold } del { text-decoration: line-through }

E per far vedere ai nostri utenti che abbiamo una spiegazione per i valori degli e dei che usiamo, mettiamoci una sottolineatura a trattini (anche qui, si può mettere quello che ci pare) e un cursore con il punto di domanda. La regola si applica solo quando è presente l’attributo title:

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help }

Se usiamo le tabelle (per dati tabulari, non per il layout del sito, non siamo nel 1820! ) e vogliamo liberarci del loro orribile aspetto di default, basta usare:

table { border-collapse: collapse; border-spacing: 0 }

Infine, se vogliamo usare degli
, diamo loro l’aspetto di “riga” e un minimo di spaziatura. E allineamo al testo circostante gli e i le