Iniezione N°3 - Modificare il tag BODY con i Fogli di stile

Come promesso, ecco la seconda iniezione, ed è una panoramica sulla compatibilità cross-browser riguardo proprio i CSS.
Dunque:
C'era una volta Netscape, e per fortuna qualcosa c'è ancora, in realtà come molti di voi sapranno, NN è ormai in netto declino; per carità, il nuovo 7 va bene, ma non riesce a scalzare il predominio di IE, neanche in quelle macchine come iMac, dove un tempo Netscape la faceva davvero da padrone.
Quindi, qualcuno ora starà pensando, a cosa serve parlare di compatibilità, se per il 95% chi naviga, usa un prodotto Microsoft?
E' presto detto, anche tra IE e ... IE ci sono differenze, e poi anche quel 5% va accontentato, bisogna sempre tenere a mente, che non facciamo siti per noi stessi, ma per chi li guarda, e questa è la fregatura.
Quindi vediamo il panorama cosa offre:
IE 5.5 e 6, sono quasi uguali dal punto di vista dei CSS, anzi direi che in questo la Microsoft è rimasta indietro, infatti non hanno voluto implementare le nuove future, consigliate dal consortium.
Netscaper 7, Mozilla 1.1, invece, manco a dirlo, sì, queste riguardano sopratutto la gestione delle tabelle, e sono in particolare, la definizione della dimensione delle stesse, con i CSS rimane tutto uguale, widht e height, rimangono supportati, ma in HTML puro, non viene supportato height, come d'altra parte NN non ha mai fatto.
Altro cambio, e qui merita un discorso a parte, è il supporto per la dimensione dei caratteri.
Usando le impostazioni per punti o pixel, queste risultavano fisse con tutti i browser, ovvero, non si potevano più cambiare, dal menù Visualizza --> Carattere, di Explorer, questo fatto, faceva sì, che da una parte gli sviluppatori avevano la vita facile, perchè si bloccava il layout del sito, e quindi tutto rimaneva dentro i parametri prestabiliti in sede di progetto, però si negava la possibilità a chi aveva problemi di vista, di vedere un sito così fatto; ora il consortium è corso ai ripari, infatti ha stabilito che comunque sia la dimensione del carattere in uso, sia sempre possibile modificarla dal browser, e Mozilla e quindi Netscape, vi hanno aderito, IE no.
Personalmente ritengo buona l'idea dei caratteri fissi, e magari preparare un sito a parte per quelle persone che non vedono bene, ma è solo una mia opinione.
Barre colorate, facile, si vedono colorate solo con IE 5.5 e superiore, per tutti gli altri, no!
Dette queste quattro cose, voglio, che queste iniezioni, rimangano proprio semplici senza addentrarci troppo nella tecnica; quindi detto ciò, resta da dire una cosa, fare siti web oggi, è un ... casino, in effetti il mondo web si sta preparando per qualcosa di grosso, che va ben oltre internet2 come l'avevano chiamato, sperare che i navigatori, siano sempre aggiornati è un errore, come d'altra parte è un errore pensare ancora che c'è molta gente che usa NN 4.7x, qualcuno c'è, ma anche chi naviga con Linux, ormai usa o galeon (ottimo) o Mozilla, ancora meglio, quindi diciamo che le tecnologie sono molto moderne, anzi spesso è proprio con SO Microsoft, che si hanno proprio le carrette più vecchie, molti infatti navigano ancora con IE5, che comunque è anche il browser Microsoft più conforme agli standard.
Quindi, io direi di continuare queste iniezioni, riferendoci alla tecnologia CSS2 del consortium, che va bene per tutti, essendo vecchia di 5 annetti, ma con un occhio alle nuove idee.
La prossima volta riprenderò il discorso sui CSS, magari parlando dall'inizio, ovvero come modificare il tag BODY.
Ciao. :)

Come anticipato nell'iniezione numero 2, eccomi a parlarvi del tag body, forse il più interessante fra tutti i tag modificabili tramite i fogli di stile a cascata.
Perchè dico questo, semplice, le imppostazioni date al tag body, si rifletteranno in tutta la pagina, quindi fatto bene questo, resterà poco a ciu dedicarsi, così da semplificarci la vita in seguito, specie se ci saranno molte pagine da gestire.
Allora, cercherò di essere chiaro, intanto dico subito che le implementazioni presentate qui, si possono inserire in tutti e tre i modi, inline, head line, link a foglio esterno. Ovvio che quest'ultima è la migliore, perchè prevede un solo file per tutte le pagine che compongono il sito, però per semplificare un po la vita a chi mi legge, specie se neofita, presenterò il metodo head line, forse il più intuitivo per chi già conosce javascript.
Per inserire uno stile head line, bisogna mettere l'intestazione proprio tra i tag <head> ed </head>, così:
<style type="text/css"><!-- // il mime type è importante!

// --></script>
Ecco qui in mezzo andremo a porre le modifiche al nostro tag body, in particolare vedremo come, modificare, il colore di sfondo, il colore del testo, il tipo di testo (font), il suo allineamento nella pagina, la sua dimensione, e l'inserimento di un'immagine di sfondo alla pagina, procediamo:

BODY {} è importante definire quale tag si andrà a modificare, sennò ... :)
le parentesi graffe, racchiuderanno gli argomenti di modifica.

Color: (trasparent, #000000 o Black) è lo stesso, come in HTML normale, possiamo definire il colore per nome o per tripletta di valori esadecimali.

Background-color: (trasparent, #FFFFFF o White) la stessa cosa di cui sopra, solo modifica il colore di sfondo.

Background-image : url(./images/barra.jpg) Inserisce un'immagine sullo sfondo.

Background-repeat: (repeat, no-repeat, repeat-x, repeat-y) ripete l'immagine usata come sfondo, in tutta la pagina, non la ripete affatto, solo sull'asse x (orizzontale), solo sull'asse y (verticale)

Background-position: (in pixel, top, bottom, left, right) un'immagine viene posizionata a tot pixel dal bordo sinistro, in alto, in basso, a sinistra o a destra.

Background-attackment: (fixed, scroll) definisce sell'immagine deve essere fissa o scrollare insieme alla pagina.

font-family: Verdana, Sans-Serif eccetera, be che dire, qui dipende dal font che volete installare, è possibile inserirne anche più di uno, separati da una virgola; serve per computer con SO diversi, che non hanno gli stessi font installati, o al limite per tutti quei casi in cui si ha un font, bello ma non standard, e si vuole dare anche un font alternativo.
Considerate che il quartetto: Verdana, Geneva, Arial, Helvetica, sans-serif; va bene su tutti i sistemi operativi, infatti questi font sono presenti sia su windows, che su linux che su mac, al limite usa il primo font sans-serif installato.

Font-size: (pixel, punti, larger, smaller, xx-small, x-small, medium, large, x-large, xx-large, in percentuale) insomma un vero caos, consiglio di usare i pixel, i punti vanno bene se si prevede che la pagina verrà stampata, per gli altri, sostiuiscono i valori degli header (H1, H2, ... H7), considerate che 12 pixel, corrispondono con IE e windows, più o meno alla grafica di questo forum, con NN conviene aumentare di due pixel, con mac poi, è anche peggio, considerate di iniziare a contare da 12 in sù, o vedrete tutto troppo piccolo.

E qui dovrei aprire una parentesi ed entrare in javascript, così da specificare come fare a rilevare il browser, ed anche il SO, ma lo farò più avanti in un'altra iniezione.

Finisco questa breve, e non esauriente lezione, sulla modifica del tag BODY, parlando brevemente dei livelli.
Con i fogli di stile a cascata, si possono definire dei livelli di visualizzazione, cioè un'immagine o del testo, può essere nascosto da un'altra immagine o testo, a seconda del livello a cui viene scritto.
z-index: 1 è il livello di partenza, veramente IE permette anche di definire livelli negativi, ma siccome NN non lo permette e poi sballa il layout del sito, è meglio usare solo valori positivi, tanto il numero di livelli che si possono usare, dipende solo dalla potenza della macchina, ed il numero è indicativo del livello, e possiamo metterlo a piacere, tenete solo presente che a numero basso, corrisponde il livello basso.
Ecco ora la nostra modifica al tag BODY completa:

[code:1:a6d7853b6e]<style type="text/javascript">
BODY { background-color : White;
background-image : url(images/LOGO_CSS.GIF);
background-position : top;
background-repeat : repeat-x;
background-attachment : fixed;
color : Black;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 12px;
z-index : 1;
}
</style>
</head>
<body>[/code:1:a6d7853b6e]
Come si vede, ogni parametro di modifica viene separato da un punto e virgola, i valori possono anche essere messi su una singola riga, qui li ho spezzati per facilitare la lettura.
Se copiate questo semplice "script", modificando solo la posizione del'immagine, vedrete che effetto.
A non l'ho detto, ma rimedio subito, ovvio che così facendo, non dovete scrivere nel tag body, ne l'argomento COLOR e ne BGCOLOR, e ne il riferimento ad un'aimmagine di sfondo, perchè già li avete definiti nel foglio di stile.

mamma mia

mamma mia

ti invito a leggerti il regolamento del forum

mamma mia

hai ragione scusa cancellalo pure e anche questo !

mamma mia

hai ragione scusa cancellalo pure e anche questo !

se hai letto bene il forum nn posso concellarli, altrimenti....

Ma poi perchè "mamma mia"? Credimi è più facile a farsi che a dirsi, ops ... scriversi :D
Ciao. :)