Sesta Parte – Gli ultimi ritocchi

Ultimi ritocchi

Provando ad caricare la pagina del calendario avendo avuto l’attenzione di scrivere tutte le regole sopra menzionate, e tutti i giorni del calendario, così come sono stati presentati nell’esempio, il risultato sarà già dei migliori, ma mancano alcuni particolari: mancano le intestazioni del calendario e manca la sezione di navigazione: quella sezione che ci consentirà di saltare alle varie settimane, ed al primo evento.
Modifichiamo i giorni della prima settimana definendo come classe “intestazione” anzichè “hidden” solo per lo span in cui è integrata l’abbreviazione del giorno. Poi definiamo altre due regole di stile nel nostro foglio di stile.
Quinta regola. L’intestazione sarà visibile:

  1.         #box-calendario .intestazione{
  2.                 display: block;
  3.                 top: 0px;
  4.                 width: 100%;
  5.                 height: 1.90em;
  6.                 text-align: center;
  7.                 float: left;
  8.                 border-bottom : 1px solid #808080;
  9.                 background-color:#f0f0e0;
  10.                 font-weight: bold;
  11.         }

Sesta regola. Le caselle del la prima settimana saranno alte il doppio:

  1.         #box-calendario #settimana-1 .giorno{
  2.                 height: 3.80em;
  3.         }

Compatibilità cross browser

Riprovando a guardare il calendario ci renderemo conto che il risultato è eccezionale: tutti i giorni sono incolonnati, tutte le settimane occupano una sola riga, sono presenti le intestazioni e… Perchè qualcuno alza il dito chiedendo di parlare?… Non ti funziona?… Hai degli spazi incontrollati?… Hai un risultato che non ti soddisfa?
Scusate ma browser state utilizzando? Ah ecco 😛
Ok visto che la compatibilità cross-browser è un requisito fondamentale per la Legge Stanca (ma soprattutto per obbligo morale), siamo obbligati a rendere uguale qualsiasi sia il browser utilizzato. Almeno proviamoci.
Io dico solitamente: per problemi non standard, servono soluzioni non standard.
Quindi consideriamo l’uso dei commenti condizionali per Internet Explorer così da ridefinire alcune regole di stile che altrimenti non funzionerebbero. Eccovi il foglio di stile condizionale:

  1.         <!–[if IE]>
  2.         <style type=“text/css”>
  3.                 #box-calendario{
  4.                         padding-left: 0px;
  5.                         padding-top: 0px;
  6.                         margin-top: 0px;
  7.                         width: 14.1em;
  8.                 }
  9.                 #box-calendario .intestazione{
  10.                         height: 2em;
  11.                         display: block;
  12.                        
  13.                 }
  14.                 #box-calendario .giorno{
  15.                         border: 1px solid;
  16.                         width: 2em;
  17.                         height: 2em;
  18.                         display: block;
  19.                 }                     
  20.                 #box-calendario li ul li{
  21.                         padding-top: 0px;
  22.                         padding-bottom: 0px;
  23.                         margin-bottom: 0px;
  24.                         margin-top: 0px;
  25.                 }
  26.         </style>
  27.         <![endif]–>

Aehm… a quanto pare abbiamo ridefinito un bel po’ di proprietà… ma se a questo punto guardiamo il risultato è perfettamente compatibile con: Firefox, Opera, Internet Explorer 7, Internet Explorer 6, Safari su MAC (almeno sono i browser che sono riuscito a controllare). Ed inoltre è consultabile correttamente anche con uno screen reader.

Potrebbero interessarti anche i seguenti articoli

Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.