Fogli di stile alternativi e CSS condizionali – parte terza

Rafael Lima Siamo quasi giunti alla fine del nostro viaggio. In quest’ultima tappa, prima delle conclusioni finali vogliamo illustrarvi un […]
Fogli di stile alternativi e CSS condizionali – parte terza

Rafael Lima

Siamo quasi giunti alla fine del nostro viaggio. In quest’ultima tappa, prima delle conclusioni finali vogliamo illustrarvi un ultimo metodo che ci consente di implementare regole alternative in relazione al browser che stiamo usando, questa volta tutto basato su uno script javascript che non fa altro che intercettare il browser che state utilizzando e passargli le regole css collegate. Il sito di riferimento dell’autore (Rafael Lima) è questo.

Il codice può essere implentato direttamente tra i tag head del nostro sito web:

/*
CSS Browser Selector v0.3.5 (Feb 05, 2010)
Rafael Lima (http://rafael.adm.br)
http://rafael.adm.br/css_browser_selector
License: http://creativecommons.org/licenses/by/2.5/
Contributors: http://rafael.adm.br/css_browser_selector#contributors
*/
function css_browser_selector(u){var ua = u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1;},g='gecko',w='webkit',s='safari',o='opera',h=document.documentElement,b=[(!(/opera|webtv/i.test(ua))&&/msies(d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/2')?g+' ff2':is('firefox/3.5')?g+' ff3 ff3_5':is('firefox/3')?g+' ff3':is('gecko/')?g:is('opera')?o+(/version/(d+)/.test(ua)?' '+o+RegExp.$1:(/opera(s|/)(d+)/.test(ua)?' '+o+RegExp.$2:'')):is('konqueror')?'konqueror':is('chrome')?w+' chrome':is('iron')?w+' iron':is('applewebkit/')?w+' '+s+(/version/(d+)/.test(ua)?' '+s+RegExp.$1:''):is('mozilla/')?g:'',is('j2me')?'mobile':is('iphone')?'iphone':is('ipod')?'ipod':is('mac')?'mac':is('darwin')?'mac':is('webtv')?'webtv':is('win')?'win':is('freebsd')?'freebsd':(is('x11')||is('linux'))?'linux':'','js']; c = b.join(' '); h.className += ' '+c; return c;}; css_browser_selector(navigator.userAgent);

Oppure è possibile inserirlo in un file con estensione .js e includerlo nella pagina o nelle pagine in cui è utile richiamarlo:

<script src="css_browser_selector.js" type="text/javascript"></script>

Le Key

I Sistemi Operativi supportati e le relative key per richiamarli sono quelli elencati qui di seguito:

  • win – Microsoft Windows
  • linux – Linux (x11 and linux)
  • mac – Mac OS
  • freebsd – FreeBSD
  • ipod – iPod Touch
  • iphone – iPhone
  • webtv – WebTV
  • mobile – J2ME Devices (ex: Opera mini)

I Browser supportati e le relative key per richiamarli sono quelli elencati qui di seguito:

  • ie – Internet Explorer (All versions)
  • ie8 – Internet Explorer 8.x
  • ie7 – Internet Explorer 7.x
  • ie6 – Internet Explorer 6.x
  • ie5 – Internet Explorer 5.x
  • gecko – Mozilla, Firefox (all versions), Camino
  • ff2 – Firefox 2
  • ff3 – Firefox 3
  • ff3_5 – Firefox 3.5 new
  • opera – Opera (All versions)
  • opera8 – Opera 8.x
  • opera9 – Opera 9.x
  • opera10 – Opera 10.x
  • konqueror – Konqueror
  • webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • safari3 – Safari 3.x
  • chrome – Google Chrome
  • iron – SRWare Iron new

Alcuni esempi

Segnaliamo alcuni esempi di codice css da poter implementare nelle nostre pagine affinchè lo script funzioni correttamente.

.ie body {
  background-color: yellow
}
.ie7 body {
  background-color: orange
}
.gecko body {
  background-color: gray
}
.win.gecko body {
  background-color: red
}
.linux.gecko body {
  background-color: pink
}
.opera body {
  background-color: green
}
.konqueror body {
  background-color: blue
}
.webkit body {
  background-color: black
}

Conclusioni:

Abbiamo analizzato prima di tutto il sistema dei fogli di stile alternativi definiti da regole condizionali. Il sistema classico di gestione della compatibilità tra i browser, nulla da eccepire sulla pulizia del codice, ma per gli amanti di un unico css non è il massimo in quanto necessita la creazione di uno o piu fogli di stile per gestire le varie eccezioni.

Abbiamo optato per un hack CSS basato su uno script in php che gestisce le varie eccezioni dei browser nello stesso foglio css in cui si scrivono le regole generiche tramite prefissi appositi da anteporre ai selettori. Hai sotto mano immediatamente tutto, è sicuramente veloce e piu organizzato ma non è assolutamente validato. Ogni prefisso genera un errore di parse in quanto ci sono ovvi caratteri non consentiti.

Infine un altro hack css basato unicamente su javascript, stesso discorso per il precedente, veloce e organizzato ma stavolta anche validato in quanto per identificare i browser e/o il sistema operativo utilizza il puntino prima dell’identificatore.

Codice sporco, codice pulito, validato e non. Ognuno avrà i suoi dubbi le sue perplessità e le sue necessità al riguardo. Noi preferiamo sicuramente soluzioni pulite che rispettino gli standard e i canoni del consorzio. Gli hack css di contro esistono ci sono, ci aiutano e a volte fanno il loro “sporco” lavoro nel garantire l’accessibilita dei siti anche a coloro che non ne hanno la possibilità perche relegati a browser vecchi e datati.

  • questa mi mancava!
    😛

  • Meno male che sei capitato su questo blog!!! :mrgreen: e questo sistema non inficia neanche la validazione. E’ sicuramente interessante.

  • Angelo

    Purtroppo io il problema non riesco a risolverlo 🙁
    tutto regolare sugl’altri browser ma nulla su firefox!
    il sito funziona, tutto bene tranne una slide di immagini scorrevoli nella home la quale è spostata tutta a destra!!!
    Mi potete dare qualche altro suggerimento???
    Grazie mille in anticipo 🙂

  • Angelo

    Ciao Stefano e grazie per la risposta.
    Scusami innanzitutto per non aver messo il sito, me ne sono dimenticato 🙂
    il sito in questione è http://www.fingenius.it
    vedrai che nella Home c’è una slide di immagini che in firefox risulta spostata tutta a destra!!
    Grazie mille ancora in anticipo!!! 🙂

  • Ciao Angelo, il problema credo sia legato al menu, che ha una struttura che non mi è troppo chiara in quanto c’è questo div class=”black” che contiene il menu ed è alto 350px, altezza che viene presa da un div style=”height:350″ posto subito dopo la chiusura dell’ul. Quel div class black, essendo a priori cosi alto impedisce al contenuto sucessivo di posizionarsi correttamente.

    Potresti risolvere velocemente il problema modificando nel tuo css questa regola, e poi con calma rivedere il tutto.

    .demo-container {
    left: 50%;
    margin: 0 0 0 -480px;
    position: absolute;
    top: 119px;
    width: 800px;
    }

    Ci sono alcune cose che dovresti rivedere che non vanno; la cosa fondamentale è che l’intero codice html deve essere il più semplice e lineare possibile. Quando noti che tra browser moderni ci sono discrepanze di visualizzazione hai sicuramente commesso qualche errore grave di struttura html o css.

    • Angelo

      Grazie mille Stefano 🙂
      Hai rgione…spesso uso una sintassi poco ortodossa ed è una cosa che devo cominciare a fare bene 🙂
      Proverò il tuo suggerimento e ti farò sapere sperando che non mi si sballino gl’altri browser 😮

      Una domanda sulla sintassi corretta: sai indirizzarmi a qualche manuale oppure tutorial che mi spieghi per bene come ovviare il problema tra browser e che rispetti il w3c???
      Grazie mille ancora e buon fine settimana 🙂

      • Angelo

        Stefano Grazie al tuo aiuto il problema della slide è risolto 🙂
        Mi hai fatto notare anche una serie di conflitti che inevitabilmente portano problemi.
        L’ultimo problema che sto risolvendo sempre per firefox è un margine che va oltre il footer e che mi sta facendo impazzire perchè non riesco a capire dove rettificare il tutto(negl’altri browser il problema non esiste)
        Comunque grazie mille ancora e Buon Lavoro 🙂

  • Ciao angelo, mi fa piacere che tu abbia risolto il problema e mi scuso con te per il ritardo con cui ti rispondo ma sono fuori e casa e scrivo da iphone. Appena ho davanti un pc ti indirizzo per bene a qualche lettura e risolviamo insieme il problema del footer…

    Saluti
    Stefano 😉

    • Angelo

      Figurati Stefano e Grazie mille ancora :)Sei davvero gentile e disponibile!!! 🙂

      Buon inizio di settimana e Buon Lavoro!!!

  • Parlando per il momento solo di CSS, come per ogni settore ci sono libri più o meno facili. Il cosiddetto mattone che ogni developer dovrebbe aver letto almeno una volta nella vita è questo:

    http://www.librinformatica.com/3983-cascading-style-sheets-la-guida-completa-terza-edizione-css-2-e-css-21-9788848120739.html

    Con un approccio piu semplice c’è quello di giancluca troiani:

    http://www.librinformatica.com/4978-css-guida-completa-terza-edizione-css2-e-css3-9788850330256.html

    Infine se non vuoi spendere soldi, un ottima guida online che parte dai fondamenti.

    http://css.html.it/guide/leggi/2/guida-css-di-base/

    Tutti partono da zero analizzando i fondamenti dei CSS senza fronzoli inutili. Il primo soprattutto è molto tecnico e analizza nel dettaglio i meccanismi alla base del rendering dei browser.

    ====================

    Per quanto riguarda l’html è di fondamentale importanza, prima ancora che tu ti avventuri nell’html5, capire come seguire gli standard e capire quando utilizzare e come tutti i tag che il linguaggio mette a disposizione. Niente di meglio che studiare direttamente dalle traduzioni della documentazione ufficiale di Diodati

    http://www.diodati.org/w3c/html401/cover.html

    La cosa importtante è quella di non correre subito ad imparare i CSS3 e HTML5 … per arrivare a loro dei partire dalle fondamenta, altrimenti non serve a nulla e non capiresnti nulla!

    Qui invece c’è la documentazione ufficiale inerente invece all’XHTML, una versione piu rigida dell’HTML normale. http://www.w3.org/TR/xhtml1/

    Le differenze tra HTML e XHTML sono conntenute qui:
    http://xhtml.html.it/guide/leggi/52/guida-xhtml/

    Il problema del footer che mi hai sottoposto è causato, almeno per le pagine interne, dal div “lineaverticale”. Il problema di fondo però è un uso non corretto che fai dei CSS. C’è un interessantissimo articolo di Nicole Sullivan che stiamo finendo di tradurre che comincia cosi: “Lavora con i CSS, non contro di loro.” Proprio lei sottolinea il fatto che se hai un buon approccio alle regole e su come esse debbano essere usate secondo la loro NATURA, non incorrerai mai in discrepanze cosi evidenti tra browser moderni. Gli unici bug potranno emergere al massimo con IE6 / 7.
    Per prima cosa quindi, comincia a lavorare meno con i position relative e absolute togliendo da mezzo strani margini negativi ed evitando di dare le altezze agli elementi, e impara bene i fondamenti del BOX MODEL, sul quale si basa tutto il nostro lavoro.
    Vedrai che con i manuali che ti ho consigliato (soprattutto il primo) e molta pratica, il tuo codice html diventerà più snello e le regole CSS saranno ben mirate e assolveranno bene al loro scopo.

    Un trucco mentre studi? Analizza con firebug il codice degli altri siti web che reputi siano fatti meglio e vedi loro come fanno e come strutturano il tutto. Se devi realizzare ad esempio un footer, oppure un layout a due colonne, naviga tra i siti web e sbircia tra le loro linee di codice… imparerai moltissime cose. questo potrebbe essere un ottimo spunto per imparare http://www.cssmania.com/

    spero di non essermi dilungato troppo!!!

    Ciao e in bocca al lupo.

    • Angelo

      Stefano…che dire…sei stato preciso ed esaustivo!!!
      Un Grazie servirebbe a poco per la cortese attenzione che mi hai rivolto.
      Mi hai fatto un’ottima analisi di ciò che mi serviva.
      Seguirò i tuoi consigli alla lettera!!!
      GRAZIE di vero cuore…Buon Lavoro e Crepi il Lupo 😉

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github