Mattepuffo.com

In genere siamo abituati a includere i nostri CSS nella pagina senza usare l'attributo media.

In verità è un attributo molto importante perchè ci permette di differenziare i CSS a seconda del dispositivo che accede alla pagina.

Un tipo lo abbimo già visto in questo articolo, ed è quello relativo alla stampa:

<link type="text/css" rel="stylesheet" href="/site/template/css/print.css" media="print" /> 

Come vedete ho usato il media print.

Dopo vari tentativi e guide seguite sono riuscito finalmente ad ottenere quello che volevo: una lista orizzontale centrata dentro a un div.

Cominciamo dall'HTML:

<div id="menu-ita">
 <ul>
 <li><a href="/site/html-css.html?lang=it">Home</a></li>
 <li><a href="/site/storia.php?lang=it">Storia</a></li>
 <li><a href="/site/collezioni.php?lang=it">Collezioni</a></li>
 <li><a href="/site/pv.php?lang=it">Punti vendita</a></li>
 <li><a href="/site/contatti.php?lang=it">Contatti</a></li>
 <li><a href="/site/contatti.php?lang=it">Registrati</a></li>
 <li><a href="/site/backstage.php?lang=it">Backstage</a></li>
 </ul>
</div>

L'esempio ve lo prendo direttamente da un sito che mi è stato commissionato e che sta per essere messo online.

Come vedete ho un div con dentro una lista non ordinata; ogni voce della lista è un link.

In sostanza è un classico menu orizzontale.

Devo dire che Google ne sa sempre una in più del diavolo.

Per usare qualche font alternativo è possibile da un pò usare le Google Font Api.

Queste sono un ottimo strumento per avere dei font aggiuntivi senza preoccuparsi della compatibilità coi browser.

Infatti le Google Font Api sono cross-browser, che al giorno d'oggi è assolutamente fondamentale!

Nel Google Font Directory potete vedere tutti i font presenti.

Come vedete ci stanno sia i classici font che alcuni nuovi.

L'utilizzo delle Api è ovviamente molto semplice: prima scegliamo quello che ci piace, poi linkiamo il CSS che contiene lo stile (che potete prelevare dalle opzioni del font dalla Font Directory di Googe) e poi crearsi una propria classe CSS che per utilizzare quel font.

Eccovi un esempio:

I CSS3 portano con loro molte novità e proprietà che faciliteranno molto il lavoro e abbelliranno l'aspetto delle pagine web.

Accanto ad HTML 5 il ptenziale poi diventa enorme!

Ad oggi però non è ancora standard e quindi non sono ufficialmente supportati da tutti i browser.

In verità tutto ciò che ho porvato ha funzionato su tutti i browser, tranne che su Intenet Explorer ovviamente!

In questo articolo descrivo come ottenere dei semplici angoli arrotondati senza usare immagini o tecniche particolari.

Useremo la proprietà border-radius.

HTML 5 è la nuova versione del popolare linguaggio HTML, e andrà a sosituire proprio HTML 4.1 e XHTML.

Lo standard è ancora in fase di definizione e il rilascio è previsto per la fine dell'anno.

Gli aspetti chiave che caratterizzano il nuovo standard sono 7:

• retrocompatibilità per facilitare chi già lavora con HTML, Javascript, CSS, ecc
• gestione degli errori ben definita
• nuove feature
• lo scripting non va utilizzato: cercare di specificare markup con le stesse funzionalità
• indipendente dal dispositivo
• logica open
• gli utenti non devono essere esposti agli errori di markup

In generale introduce molte funzionalità per rendere ancora più distaccata la struttura del documento dallo stile; ad esempio con i tag <menu>, <footer>, <nav>, <figure>, <article>.

Andiamo a vedere un pò più in dettaglio le novità.