Home > Pagina 1 > Progettare per due stylesheets pag. 2

Menu

Progettare per due stylesheets pag.2

Documento originale di propietà del Sito web http://www.edgeofmyseat.com .

Traduzione a cura di Zeli Marco.

---

Progettare per due stylesheets Pagina 2

Ora questo è dove possiamo un metodo un po' intelligente per rendere la nostra vita più facile... se, quando codifichiamo la pagina HTML strutturiamo logicamente il nostro contenuto possiamo fare un minimo (se anche) posizionamento nel stylesheet per i più vecchi browsers.

Che cosa è la cosa più importante alla mia pagina?

Per me questo è tutto il mio contenuto, in modo da rendere questo articolo il primo nella pagina, quindi gli aggiungo il mio contenuto di menu di lato al di sotto di esso.

In un sito più complesso potrei avere molti elementi posizionati, così con un po' di meditazione circa l'ordine in cui sono scritti nella pagina HTML può fare risparmiare molto lavoro successivamente.

Una nota a proposito di questo è che gli utenti del vostro sito che passano in rassegna con i browsers non tradizionali (per esempio lettori di braille) leggano il contenuto importante prima, e il resto dalla parte superiore in giù.

---

Sono perfettamente felice se il mio contenuto viene in primo luogo e la navigazione nelle mie barre laterali appena sotto nei più vecchi browsers, cosi ho questo stylesheet per i più vecchi browsers.

body, p { margin: 10px 0px 0px 0px; padding:0px; background-color:#ffffff; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: Black; font-size: 11px; } #content { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; } #rightcontent { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; } h1 { background-color: White; font-size:14px; color: #996699; padding-top:10px; } a, a:link, a:visited, a:active { background-color: White; color: #996699; text-decoration: none; }

come potete vedere non c'é qui affatto nessun posizionamento, compaiono appena gli elementi che controllano la dimensione del testo e i font.

Questo é quello che si vede in Netscape 4.7

non bello ma perfettamente leggibile.

---

Così, ora voi avete due stylesheets, ma come convincere i browsers a guardare lo stylesheet corretto progettato per per loro?

Questo metodo non cerca il nome o user-agent del browser, ma bensì controlla il supporto del W3C DOM. Di conseguenza dovete assicurarvi che il vostro stylesheet funzioni per i più nuovi browsers dell'ultima lista dei browsers compatibili del W3C DOM, vedete per la lista , questa include IE5.1/5.5, NS6, l'opera 5, IE5 per il mac e Konqueror.

---

Tra gli head del vostro documento dovete inserire questo Javascript.

<script language="javascript" type="text/javascript">
if (!document.getElementById) {
document.write('<link rel="stylesheet" href="noncomply.css" type="text/css">');
} else {
document.write('<link rel="stylesheet" href="comply.css" type="text/css">');
}
</script>

Il primo stylesheet è quello per i più vecchi browsers ed il secondo è il vostro per i recenti browser. Ora , se state usando Dreamweaver ho generato un comando che aggiungerà questo script per voi. download the .mxp file

N.B.: se state usando Dreamweaver da questo punto smetterà di visualizzare il vostro stylesheet poichè non saprà che cosa fare con esso, se siete andati con un ordine preciso nella stesura del vostro codice potrete ancora usarlo per aggiungere i contenuti , per i comportamenti dell'assistente in Dreamweaver UltraDev ecc. dovrete passare più tempo prima di vedere l' anteprima del vostro obiettivo sui vostri browsers.

Controlli le vostre pagine in vari browsers -

la pagina usata in questo esempio è qui

---

Una volta appresa questa tecnica la troverete di una flessibilità enorme in come potete progettare. Per cambiare l'aspetto del vostro sito semplicemente riscrivendo uno stylesheet senza lavorare attraverso pagina dopo la pagina di tabelle.

Se, come me per gli anni avete codificato tabelle e layout , posizionare con i CSS è come partire ancora dall'inizio , ma il suo valore più grande, lo potete vedere soprattutto dalla lista dei browsers anche i più nuovi browsers hanno un buon supporto - guardate al futuro!

<< Indietro