Fogli di stile alternativi e CSS condizionali – parte seconda

Un altro metodo basato sul linguaggio php Nel precedente articolo abbiamo analizzato come dichiarare fogli si stile alternativi che contengono […]
Fogli di stile alternativi e CSS condizionali – parte seconda

Un altro metodo basato sul linguaggio php

Nel precedente articolo abbiamo analizzato come dichiarare fogli si stile alternativi che contengono regole solo per alcuni browser utilizzando il classico metodo dei commenti condizionali. In questa seconda parte analizziamo un un altro metodo basato sul linguaggio php, conditional-css, il cui sito ufficiale è questo. Il sito, in lingua inglese, offre una paromamica dettagliata sul loro utilizzo con demo, spiegazioni e quant’altro. La differenza sostanziale rispetto alla prima metodologia di applicazione è che adesso non dobbiamo includere un nuovo foglio di stile ma le regole valide solo per alcuni browser verranno inserire direttamente nel foglio di stile principale all’interno di commenti condizionali.

All’opera

Andiamo subito online sul sito di riferimento e compiliamo il form sulla destra.

  1. Selezioniamo il linguaggio (php – c# – c), in questa guida facciamo riferimento al linguaggio php
  2. Inseriamo il nome o i nomi dei css che devono essere collegati allo script
  3. Inseriamo i nostri dati se vogliamo inserirli e clicchiamo su sul tasto Go

Il sito web vi farà scaricare il file c-cc.php da includere tra i tag head -> style del vostro sito tramite la direttiva import, mentre all’interno del file c-css.php ci sarà già il collegamento al vostro file stile.css, per controllare basta andare alla linea 125. Analizziamo entrambe le porzioni di codice.

<!--
@import url('c-css.php');
-->
public $aCssFiles = array(
    "stile.css"
);

Fino a questo momento non dvrebbe esserci alcun problema, per fare un breve riepilogo, basta andare online sul sito web ufficiale, compilare i campi del form, scaricare il file php e includerlo tra i tag head del vostro sito. Ora analizziamo invece la parte piu interessante dell’articolo. Come redigere le dichiarazioni all’interno del nostro css affinchè si abbiano visualizzazioni diverse in base al browser.

Le alternative

Le dichiarazioni css devono essere precedute da una dichiarazione condizionale che puo essere scritta in tre modi diversi:

Tipologia 1 -> [if browser]
Dichiaro in via generica il tipo di browser

Tipologia 2 -> [if browser version]
Dichiaro in maniera specifica la versione e il tipo di browser

Tipologia 3 -> [if condition browser version]
Dichiaro anche un operatore di confronto

I browser supportati sono quelli elencati qui di seguito:

  • ‘IE’ – Internet Explorer
  • ‘Gecko’ – Gecko based browsers (Firefox, Camino etc)
  • ‘Webkit’ – Webkit based browsers (Safari, Chrome, Shiira etc)
  • ‘SafMob’ – Mobile Safari (iPhone / iPod Touch)
  • ‘Opera’ – Opera’s browser
  • ‘IEMac’ – Internet Explorer for the Mac
  • ‘Konq’ – Konqueror
  • ‘IEmob’ – IE mobile
  • ‘PSP’ – Playstation Portable
  • ‘NetF’ – Net Front

Gli operatori di confronto esistenti

  • lt – Minore di
  • lte – Minore o uguale di
  • eq – Uguale a
  • gte – Maggiore o uguale di
  • gt – Maggiore di

Alcuni esempi

Vediamo adesso alcuni esempi esplicativi all’interno del nostro file stile.css

/* Dichiaro in maniera indistinta per tutti i browser queste 
3 dichiarazioni */
#div {
	width:600px;
	height:100px;
	background:green;
}

/* Se il browser in questione appartione alla famiglia Gecko 
mostrami l'elemento #div con lo sfondo rosso */
[if Gecko]#div {
	background:red;
}

/* Differenzio la visualizzazione per i browser IE in generale 
e all'interno differenzio anche in base alla versione. 
In questo caso abbiamo definito uno sfondo giallo per tutti 
i browser IE uguali e/o successivi alla versione 7 e uno sfondo 
viola per tutti i browser IE uguali e/o precedenti alla versione 6 */
[if IE]#div {
	[if gte IE 7]background:yellow;
	[if lte IE 6]background:purple;
}

Poco sforzo massimo risultato

Come abbiamo potuto vedere insieme, utilizzare questo script in php richiede davvero poco tempo e poco sforzo. Restate collegati, nel prossimo post analizziamo un altro sistema (CSS Browser Selector di Rafael Lima) per includere i css condizionali basato sull’uso di javascript.

  • molto interessante questo approccio ai fogli di stile alternativi. Devo approfondire.

    ciao

  • LaboratorioCSS

    Ciao!!
    si è sicuramente un sistema veloce e pratico per gestire fogli di stile alternativi, anche se non è del tutto validato in quanto si utilizzano caratteri non consentiti. Il metodo in javascript dell’articolo successivo aggira questo problema, è migliore da questo punto di vista!

  • Andrea Lomonaco

    Ciao [if Gecko] non sembra funzionare più su firefox, sapresti dirmi come fare? Grazie

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github