Cerotto N°1 - Collegamento di CSS

Bene ho deciso di tornare nel forum di AV e lo faccio a mio modo con un aiuto per la comunità.

Su cosa è e sopratutto a cosa serva un foglio di stile a cascata (da adesso e per sempre CSS) non mi dilungo più che tanto, per chi non li conoscesse ancora, rimando ad un link: constile per tutti gli altri do una semplice dritta che ai più sarà già nota.

Iniziamo col dire che nel mondo di internet ci sono troppi browser ed ognuno fa un pò come gli pare, su tutti troneggia il discusso Internet Explorer ma la scalata di nuovi e più efficienti browser si fa ogni giorno più semplice e quindi non è raro doversi cimentare nei problemi derivanti dalle difformità di gestione di uno standard tra l'altro vecchiotto oramai, ovvero il CSS2.

Detto questo, aggiungo soltanto che qualcuno vorrebbe abilitare alla lettura del proprio sito anche utenti con browser obsoleti e che hanno problemi di interpretazione dei CSS come il famigerato Netscape Navigator serie 4.
Sono molti i problemi che da questo browser ancora purtroppo molto usato, una fra tutte il posizionamento assoluto degli oggetti sul foglio, per non parlare di alcune future come la possibilità di nascondere gli oggetti, che ha implementate in modo differente dagli standard o che proprio non ha. Che fare?

Se nelle specifiche del nostro progetto è assolutamente necessario sviluppare una versione del sito anche per questo browser, un sistema per "fregarlo" c'è, se il server su cui viene supportato il nostro sito non suporta nessun linguaggio di script lato server e/o non si vule usare neanche il javascript per il riconoscimento del browser, il sistema più rapido è l'uso degli hack ovvero l'uso di un trucchetto che sfrutta la vetustà di Navigator 4.

Come qualcuno di voi saprà collegare un CSS esterno ad una pagina HTML è semlicissimo, e di solito si usa il seguente costrutto:

<link rel="stylesheet" href="stile.css" type="text/css">

Ebbene questo è il trucco che sfrutteremo, in pratica questo sistema di collegamento è visibile anche da Navigator 4, mentre il nuovo "sistema" implementato nelle specifiche CSS2 non lo è, quindi una volta "inventati" sia il foglio di stile adatto per NN4 che quello generico per gli altri browser, possiamo giocare d'astuzia:

<link rel="stylesheet" href="stileNN4.css" type="text/css">
<style type='text/css' media='screen'>
@import url(generico.css);
</style>

Ecco fatto: lo standard CSS2 imlementa la possibilità di richiamare il foglio di stile esterno tramite la clausola @import non supportata da Navigator 4.
In pratica, NN4 leggerà la clausola link rel saltando il resto che non "capisce", mentre un browser moderno sfrutterà proprio la modalità dei fogli di stile, cioè di essere a cascata, ovvero quello dopo modifica lo stile precedente.
In questo caso dopo aver letto e caricato in memoria il foglio di sitle chiamato stileNN4.css caricherà in memoria anche il foglio generico.css che sostituirà il primo.

Ecco che con semplicità e senza usare script complessi abbiamo usato un hack per risolvere un problema che si può presentare difficile da risolvere se nn si conoscono i trucchi giusti.

Nella prossima puntata presenterò un metodo classico per risolvere lo stesso problema usando il riconoscimento del browser client.
Tenete presente che questa tecnica non sempre da i risultati voluti perchè spesso il client fa brutti scherzetti, pensate ad Opera ;)

Ciao, ciao. Marcolino.

Perfetto.
C'é però una cosa che non capisco: il media=screen a che caxxo server??

Perfetto.
C'é però una cosa che non capisco: il media=screen a che caxxo server??

Non lo sai perchè non studi ma io i links che li passo a fare

media=screen serve a dire che il foglio di stile è per lo screen, cioè il video.
In una prossima lezione lo spiegherò mettendo in risalto il modo di stampare una pagina dal web mettendoci solo ciò che serve usando proprio i media.
Tu intanto studia :p