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

Condividi:

Informazioni sull'autore

Diego La Monica
Diego La Monica
Programmatore esperto nei linguaggi del Web, ha scritto diversi articoli di carattere tecnico. Ha partecipato allo sviluppo di alcuni progetti OpenSource e ha tenuto diversi corsi per lo sviluppo di applicazioni web con strumenti Open Source. Le sue competenze in materia di analisi e sviluppo software gli hanno consentito di sviluppare un Framework Javascript per rendere più agevole lo sviluppo di applicazioni e siti web di ultima generazione cross-browser e multi piattaforma. La sua membership in IWA, gli ha consentito di partecipare ad alcuni gruppi di lavoro del W3C: HTML5 Working Group e Protocols and Formats Working Group al quale attualmente partecipa attivamente. Inoltre per IWA ha incarichi di responsabilità per la gestione e coordinamento delle Mailinglist tecniche e supporto alla manutenzione dei siti web.  Grazie alle sue competenza in materia di Standards, Usabilità ed Accessibilità ha avuto incarichi da diverse PA per lo  sviluppo e la resa di accessibilità dei siti istituzionali oltre ad avere incarichi per la manutenzione di software orientato al Web.

Commenti

Nessun commento

    Rispondi

    Link e informazioni