Scacci, Flex, Flash e ActionScript

In questo breve tutorial vedremo alcuni workaround e filtri per creare dichiarazioni specifiche per i browser.

Il primo esempio mostra come creare una regola specifica solo per IE7 (internet explorer 7):

*:first-child+html .textformt {font-size: 20px;}

Nel secondo esempio vedremo come creare una regola specifica solo per IE6(internet explorer 6):

* html .textformt {font-size: 15px;}

Nel terzo esempio vedremo come creare una regola specifica solo per IE5(internet explorer 5):

.textformt {font-size /**/: 12px;}

Nell’ultimo esempio vedremo come creare una regola che escluda IE e che venga applicata invece a tutti gli altri browser (Safari, Firefox, Opera):

*|html .textformt {font-size: 10px;}

Alcuni link:

• Tabella - CSS Filters/Hacks
• CSS e Hacks

CSS Animation permette di ottenere vere e proprie animazioni all’interno di pagine web, senza ricorrere a tecnologie come JavaScript o Flash. C’è da dire che il supporto delle animazioni non avviene su tutti gli browser, infatti il supporto di queste specifiche sono state introdotte nelle ultime build di Safari il cui cuore è basato su WebKit (un motore di rendering opensource).

Le Transitions specificate usano le seguenti proprietà:

• transition-property
• transition-duration
• transition-timing-function
• transition

Ecco un semplice esempio di codice:

div {
  opacity: 1;
  -webkit-transition: opacity 1s linear;
}
 
div:hover {
  opacity: 0;
}

questa semplice transition permette di effettuare un fade-out all’hover sulla div.

Clicca su CSS Animation per altri esempi. Si raccomanda di usare Safari di Apple per una corretta visualizzazione delle animazioni.

Un piccolo Tips su un bug di IE6 sulla duplicazione dei caratteri, dovuta al fatto che IE6 non digerisce bene i commenti <!– End of the body pagina –>, da qui il problema della duplicazione dei caratteri.

Attraverso delle porzioni di codice vedremo la soluzione e il problema.

Problema:

<!-- End of the body pagina -->
<p id="footer">
<p id="right_clm">
 
Lorem impsum amet 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit
 
<!-- CLEAR -->
 
<div class="clear_left"></div>

Con questa porzione di codice si dovrebbe verificare l’effetto indesiderato della duplicazione dei caratteri.

Adesso vediamo le strade percorribili per la soluzione:

• La prima soluzione ed è quella più semplice è quella dei commenti condizioniali, es: <!–[if !IE]> End of the body pagina <![endif]–> in questo modo si dovrebbe risolvere il bug;
• La seconda soluzione è quella di dare -3px di margin-right sull’ultimo float:left;

Soluzione:

Commento condizionale:

<!–[if !IE]> End of the body pagina <![endif]–>
<div id=”footer”>
<div id=”right_clm”>
<p>P.IVA.: </p>
<p>Copyright Pronto Mutui © 2008 - All rights reserved</p>
</div>
</div>
<!– CLEAR –>
<div class=”clear_left”></div>
 
Seconda soluzione -3px:
 
#footer
{
background-image: url(../images/bg_footer.jpg);
background-repeat: no-repeat;
float: left;
height: 69px;
width: 750px;
margin-bottom: 2px;
margin-top: 9px;
margin-right: -3px;
}
… altre regole
 
#right_clm
{
float: right;
margin-right: 18px;
margin-top: 23px;
}
#right_clm p
{
font-family: Verdana, Geneva, sans-serif;
font-size: 9px;
color: #111;
margin: 0px;
padding: 0px;
line-height: 19px;
text-align: right;
}
 
Codice (X)HTML:
 
<!– End of the body pagina –>
<div id=”footer”>
<div id=”right_clm”>
<p>P.IVA.: </p>
<p>Copyright Pronto Mutui © 2008 - All rights reserved</p>
</div>
</div>
<!– CLEAR –>
<div class=”clear_left”></div>