Archivio per la categoria ‘CSS’

L’immagine che vedete, quella a sinistra per capirci, è il nuovo logo della tecnolgia CSS3, lo riteniamo talmente brutto che, non sappiamo nemmeno noi il perché, ma ci pareva doveroso far cominciare questo articolo da cotanta bruttezza. Il lettore è stato messo alla prova con un incipit ostico, ci faremo perdonare nel proseguo dell’articolo, al momento può cominciare con lo stropicciarsi gli occhi e, se vuole, proseguire con la lettura.

Al di là dello schifo di logo creato per i CSS3, i nuovi fogli di stile sono una tecnologia tutt’altro che brutta, insieme ad HTML5 rappresentano la next big thing e, mentre il mondo aspetta impaziente la nuova release di Internet Explorer i CSS3 hanno cominciato a diffondersi viralmente nel web: dagli ultimi temi di WordPress e Joomla! ai tanti esperimenti che hanno cominciato a farne uso. Noi abbiamo sperimentato queste tecniche in due lavori recenti: http://www.gardenpeticca.it e http://www.alessandroporretti.it (tutt’ora in costruzione). Nell’ultimo lavoro abbiamo esteso un tema di WordPress mediante la tecnica dei child theme ampliandolo con tecniche proprie dei CSS3.

Ma veniamo all’argomento principale: Le media Query, ovvero l’investigatore che tutto sa e tutto redirige:

Le media query dei nuovi CSS3 sono la diretta evoluzione delle media types introdotte in CSS2:

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css" />
<link rel="stylesheet" type="text/css" media="print" href="serif.css" />

I Media Type servivano per definire dei fogli di stile partendo dal tipo di media, nell’esempio di codice appena trascritto, vediamo come abbiamo la possibilità di caricare due diversi fogli di stile, la scelta è legata al tipo di media che carica la pagina, nel primo caso uno schermo, nel secondo una stampante. Per quanto riguarda le media query è stato fatto un passo in più nella definizione del tipo di foglio di stile da caricare. Le media query infatti permettono di differenziare lo stile della pagina per le seguente tipologie:

  • Dimensione minima e massima della larghezza dello schermo.
  • Dimensione minima e massima dell’altezza dello schermo.
  • Colore dello schermo.

Vediamo alcuni esempi di codice:

/* Carica il foglio di stile small.css se il dispositivo che sta caricando la pagina è uno schermo con una larghezza massima di 600px */
<link rel="stylesheet" type="text/css" media="screen and (max-width:600px)" href="small.css" />
/* Carica il foglio di stile new.css se il dispositivo che sta caricando la pagina è uno schermo con un'altezza massima di 380px */
<link rel="stylesheet" type="text/css" media="screen and (max-height:600px)" href="new.css" />
/* Carica il foglio di stile example.css se il dispositivo che sta caricando la pagina è uno schermo con un determinato colore di sfondo */
<link rel="stylesheet" media="screen and (color)" href="example.css" />

Analizzando il codice possiamo vedere come potrebbe essere facilmente esteso il funzionamento della media query per caricare il foglio di stile che ci serve per la visualizzazione del nostro sito. Abbiamo pensato di farvi cosa gradita fornendovi una serie di layout standard (mockup 1024 x 768, iPad, iPhone) per facilitarvi la creazione di applicativi utilizzando CSS3 media query.

E’ possibile utilizzare le media query, ovviamente, anche all’interno di un foglio .css per cambiare uno stile soltanto ad un elemento o ad una classe, vediamone il codice:

@media screen and (max-width:600px) {
.test {background-color: #fff}
}

Chiudiamo la rassegna sulle media query con due link fondamentali:

Documentazione ufficiale CSS3 Media Query

Limiti e potenzialità nello sviluppo di CSS3 Media Query

 

Annunci

CSS3 - Immagine di copertinaBuona giornata marinai questo è un nuovo post in un nuovo blog realizzato mentre sto progettando un nuovo brand alla faccia di chi dice che non c’è nulla di nuovo sotto il sole casomai, come affermava Borges, nulla c’è, ok, ma di antico.

Ma lasciamo Borges, il nuovo, il vecchio, il secolo breve e cominciamo parlando di web design, affrontando uno dei temi più interessanti e discussi di questo ultimo (decennio): i CSS3.

La nuova tecnologia di formattazione dei documenti HTML non è infatti così nuova come vogliono farci credere, il W3C parla di CSS3 già dal lontano 1999, guide, articoli e primi passi (in lingua italiana!) hanno visto la loro prima pubblicazione  già nel 2007. Da circa 11 anni, quindi, la nuova tecnologia stenta ad affermarsi e non tanto perché i webdesigner non vogliono farne uso, ma perché i browser non vogliono farne uso. Googlando sull’argomento ho letto che la colpa era del W3C: troppo lenta nel fare uscire le specifiche per i fogli di stile, macché, ahò, quelli li sponorizzano da dieci anni almeno, la verità è che i nuovi effetti grafici (bellissimi e utilissimi) proposti da questa tecnologia, non sono propriamente facilmente standardizzabili, ci sono alcune regole che usano il prefisso webkit (quelle per il browser Safari) e altre che fanno un po’ di “SPAM” e incominciano per -moz. In tutto ciò Microsoft sta a guardare, stesso atteggiamento utilizzato per l’altra tecnologia rivoluzionaria del momento (ma questa è veramente nuova anche se non sappiamo ancora quanto rivoluzionaria) HTML5. Alcune specifiche, poi, come la tanto attesa ombra dietro gli elementi non fa parte del DOM, provate ad utilizzare due ombreggiature una accanto all’altra: le vedrete magicamente sovrapporsi.

Arrivati a questo punto dopo tanto dire, ho deciso di scartare il design basato su CSS3 per il mio nuovo sito web. Ammetto che ciò che mi ha fermato (oltre a quanto detto prima) è stato soprattutto la mancanza di supporto della tecnologia da parte di Internet Explorer,   che Microsoft piaccia o no, sfido chiunque a proporre ad un proprio cliente un sito non compatibile per il browser più usato nel mondo. C’è qualcuno di voi che ha già utilizzato CSS3? Come ha superato gli scogli di questa tecnologia? Al momento, almeno per me, conviene aspettare, buona navigazione, naviganti.