Web font: nuova sintassi

Categorie: CSS3. Tag: , .

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!
continua a leggere »

Post Info

Menù con le linguette

Categorie: CSS3. Tag: , , , .

Triangolo sotto il menù.

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.

continua a leggere »

Post Info

L’HTML5Boilerplate – parte 2 – Reset CSS

Categorie: CSS, HTML5. Tag: , , , .

Torniamo a parlare del Boilerplate HTML5. L’altra volta avevo parlato delle dichiarazioni condizionali del tag <html> 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.
continua a leggere »

Post Info

Border-radius per Safari e Chrome

Categorie: CSS3. Tag: , , , , , .

Veloce post, per segnalare un aggiornamento di Webkit (sia Safari che Chrome) di qualche mese fa, ma che ho notato non essere stato segnalato praticamente da nessuna parte, tanto da vedere usato il vecchio metodo come esempio in un paio di libri pubblicati questo mese. In realtà la cosa è già valida da marzo per Chrome e da luglio per Safari.

Attualmente questi browser supportano la dichiarazione standard CSS3 per i bordi arrotondati, senza più bisogno di aggiungere il prefisso -webkit-. Il che significa che invece di dover usare per forza:
continua a leggere »

Post Info

Web font, ovvero il ritorno di @font-face

Categorie: CSS3. Tag: , , , .

Ormai non passa giorno senza che qualcuno mi chieda come includere i font in una pagina web, cosa che un tempo risultava impossibile e costringeva controvoglia a usare delle immagini quando si doveva assolutamente usare un determinato font.

Partendo dai due fondamentali post del solito Paul Irish, vediamo come funziona @font-face e perché funzioni così.
continua a leggere »

Post Info

L’HTML5Boilerplate spiegato – parte 1

Categorie: HTML5. Tag: , .

L’HTML5boilerplate è un “template” HTML5 con cui può essere comodo iniziare a progettare un sito. La parola “template” può però trarre in inganno, facendo magari pensare a un qualcosa di complesso e completo come potrebbe essere per esempio un template di WordPress. Niente di più fuorviante. In realtà sarebbe forse meglio definire il Boilerplate come una semplice raccolta di codice HTML (e non solo) dal quale andare a prendere le cose che servono e ignorare tranquillamente le altre.

Nello specifico il Boilerplate è composto blocchi di codice HTML e CSS, con in più alcuni suggerimenti su come configurare al meglio i file .htaccess sotto Apache e web.config sotto IIS e altri dettagli. In questo e in (diversi) futuri post cercherò di spiegare alcune tecniche all’apparenza strane, ma in realtà molto utili.
continua a leggere »

Post Info

L’HTML5, chi era costui?

Categorie: HTML5. Tag: , , .

Apriamo questo blog con due parole sull’HTML5. Cos’è questa strana bestia di cui si parla tanto ultimamente? Non tutti lo sanno con precisione e soprattutto non tutti sanno che l’HTML5 si può e si deve usare fin da ora, senza aspettare il 2012 o il 2022 (2022?!? Seriously?).

Il punto è che l’HTML5 è composto da tantissimi moduli indipendenti fra loro e mentre alcuni di questi hanno ancora scarso supporto e non ha molto senso usarli (se non magari per web app dedicati a device specifici come l’iPad), altri sono ben supportati o quantomeno supportati da tutti i browser tranne IE e non è un problema se ci sono metodi vari per far fare giudizio anche a IE.
continua a leggere »

Post Info