Filtri e note importanti

Argomento Correlato: -

Sì, mi rendo conto che il titolo non ha un cavolo di senso, ma pressapoco riassume il tema che tratterò in questa lezione. Parlerò infatti di "filtri", ovvero delle restrizioni nel codice volutamente introdotte dal circuito e parlerò anche di altre note importanti che sostanzialmente riassumono le caratteristiche del codice stesso, di come reagisce in determinate situazioni.

È sensibile

Il codice è sensibile: se sbagli a compilarlo - nella maggior parte dei casi - reagirà di conseguenza, assorbendo l'errore e ignorando l'istruzione. Questa è una nota importante, sia per chi è alle prime armi, sia per chi è già esperto. Può capitare di lasciarsi sfuggire qualche errore di compilazione, come un punto e virgola fuori posto o una scritta sbagliata, la sensibilità agli errori del nuovo layout permette di non perdersi in un bicchiere d'acqua per sciocche disattenzioni e allo stesso modo aiuta i meno esperti a rivalutare il proprio operato. Inoltre - come succede nel vecchio layout - elimina in automatico tutti gli eventuali punti e virgola finali, subito prima della graffa di chiusura.

È un anti-maiuscole

Il codice non supporta le maiuscole se non per i semplici commenti, esso infatti trasforma tutte le maiuscole in minuscole. Questo serve sostanzialmente per proibire la possibilità di toccare alcune classi sistematiche del layout, che possiedono per l'appunto delle maiuscole e che servono per impartire direttive essenziali al layout stesso (.Fixed e .Item per esempio).

È attinente al box-model

Il box model comporta il dimensionamento degli elementi blocco (div, tabelle etc.) tenendo conto non solo delle dimensioni specificate, ma anche dello spessore dei bordi, del padding e dei margini ad essi applicati. La differenza? Quando nel vecchio layout i valori di margin, padding e border non influivano sulle dimensioni dei blocchi, nel nuovo layout questi valori vengono sommati alle dimensioni dei blocchi stessi. Esempio? Un blocco di larghezza (width) 100px e altezza (height) 100px con un padding di 10px e un bordo di 3px misurerà in larghezza 100+(10*2)+(3*2)=126px e in altezza 100+(10*2)+(3*2)=126px.

È un CSS3 fast-browsers

Che detto molto più semplicemente semplifica le meccaniche CSS3 per i vari browsers. Non c'è infatti il bisogno di scrivere ogni istruzione con i relativi prefissi del browser di appartenenza (-moz, -khtml, -o, -webkit), ma è sufficiente scriverne la base, ed il codice aggiungerà automaticamente anche gli altri prefissati.

Per fare un esempio, se si vuole aggiungere la proprietà box-shadow scriveremo semplicemente:

CODICE

.elemento {box-shadow: istruzioni}

tenendo conto che sarà (in automatico) una cosa così:

CODICE

.elemento {box-shadow: istruzioni; -moz-box-shadow: istruzioni; -webkit-box-shadow: istruzioni}

ovviamente possono anche essere specificati, ma se (e solo SE) le istruzioni saranno diverse da quelle indicate nell'istruzione base.

Es.

CODICE

.elemento {box-shadow: 1px 0 1px #000; -moz-box-shadow: 1px 0 1px #000}

se scriveremo una cosa così, al prossimo refresh del colori e stili troveremo così:

CODICE

.elemento {box-shadow: 1px 0 1px #000}

se invece scriviamo per esempio così:

CODICE

.elemento {box-shadow: 1px 0 1px #000; -moz-box-shadow: 1px 1px 1px #FFF}

resterà esattamente come l'abbiamo scritta.

I filtri

Ed eccoci finalmente ai filtri. Quali sono le parti filtrate nel nuovo layout? Cosa NON possiamo fare? Di seguito i comandi e le funzioni che sono state volutamente proibite (filtrate) dal circuito:

Non è possibile spostare/nascondere/rimuovere il .footer. Di conseguenza molte proprietà non funzioneranno. Questo per evitare di rendere in qualche modo inaccessibile la pubblicità (contenuta appunto nel .footer, che vedremo più avanti nelle lezioni);

Non è possibile utilizzare javascript nei post, nei titoli e nelle descrizioni, proprietà che rimandano a funzioni verranno automaticamente rimosse. Allo stesso modo non è possibile utilizzare javascript complesso. Effetti jquery e altra roba possono essere caricati solo tramite iframe;

Non è possibile nascondere/rimuovere .edit nei post, ma è possibile utilizzare l'istruzione "font-size: 0";

Non è possibile utilizzare la proprietà del css @import che permette appunto di richiamare fogli di stile esterni, questo per chiari motivi di sicurezza. Lo stesso non è possibile richiamare fogli esterni tramite HTML;