Categoria ‘CSS’


Dynamic Javascript & CSS File

Nel Post Creare un RSS Reader in PHP e Javascript abbiamo indirettamente incontrato una tecnica estremamente interessante che permetteva di creare – in pratica – un file Javascript da PHP.

Continua...

Internet Explorer 7 (IE7): PNG e CSS ancora lontani?

A Redmond devono avere qualche grosso problema di comprendonio! Risulta magnificamente assurdo che sul finire dell’anno 2006 ancora non ci siano le basi per una – anche – approssimata compatibilità tra IE7 e Firefox! Nonostante il rilascio ufficiale – anche se con un set limitato di localizzazioni – di Internet Explorer 7, l’engine di rendering delle pagine soffre ancora di evidenti difetti di programmazione! Senza infierire entrando in numerosi dettagli elenco solo due clamorosi bachi ancora presenti in questo rilascio ufficiale!!

Prima di tutto i PNG vengono resi differentemente dai GIF… e, peggio ancora, in position absolute subiscono strani contorni a seconda di come gira a IE!! Evidente baco? O follia di qualche junior-developer?

Sul fronte CSS la pseudo classe :hover continua a non essere supportata su tutti i TAG, nonostante molti blog la diano per funzionante! Ma su quale sistema? Vedi W3C…
Un semplice p:last-child è praticamente ignorato! Giustamente Microsoft ha supportato p:first-child. Ora, se implementi il first che cosa ti costa implementare anche last? Mistero…

L’apice dell’assurdo, poi, lo si ottiene con le liste puntate! Udite udite! IE7 si comporta esattamente come IE6! Della serie: vi siete portati appresso codice fallato? Troppi copia e incolla evidentemente! Se definitie una lista con i canonici UL LI e un’immagine personalizzata come list-point, non provate ad usare un float sull’elemento LI, l’immagine scomparirà misteriosamente, esattamente come accadeva su IE6!! L’unico, manco a dirlo, a rendere il tutto corretto è il solito – vecchio – FireFox!

Sul blog di IE7 sono numerose le lamentale. Nonostante sia apprezzato lo sforzo del pachiderma Microsoft di aprire un blog durante lo sviluppo di un software come IE7, rimane tuttavia il dubbio dell’efficacia di questa mossa. Hanno davvero ascoltato le richieste degli utenti-sviluppatori? Il blog di IE7 è stato aperto con troppo ritardo?

Ancora una volta non ci resta che attendere una service-pack prossima ventura…

Continua...

Classi e ID nei CSS

Ecco alcuni brevi consigli su come usare class e id nei fogli di stile. Tenete subito in considerazione che l’uso di tecniche Javascript avanzate, come lo stesso uso di motori Ajax, può entrare in conflitto con i consigli esposti qui! E vedremo alla fine il perchè.

Continua...

Le meraviglie del CSS2.0+

A causa forse delle incompatibilità stilistiche e di output – ancora presenti – tra i vari browser, non tutti conoscono le innumerevoli potenzialità dei fogli di stile. Vogliamo mostrare, quindi, alcune caratteristiche della sintassi CSS sconosciute ai più e per ricordarci quanto poco – spesso – sfruttiamo a pieno gli strumenti che abbiamo a disposizione.

Nota: tutti gli esempio sono stati provati su Firefox 1.5.0.5

Selezione per attributi

1
2
3
4
5
<div id="myInput">
<input type="submit" value="invia" />
<input type="button" value="Pulisci" />
<input type="button" value="Annulla" />
</div>
1
2
3
div#myInput input[type=submit] {color:#f00}
div#myInput input[type=button] {color:#0f0}
div#myInput input[value=Annulla] {color:#00f}

Questa caratteristica, spesso indicata cone CSS2 avanzata, permette cose strabiglianti, se ci riflettiamo un attimo. Il maggior vantaggio lo si ottinene lato HTML, dove non sono necessarie classi o id per distinguere i TAG nel CSS. Sono proprio gli attributi – comunque presenti – nel TAG ad indicare quale stile associare. Inoltre qualsiasi attributo del TAG può essere preso come selettore: alt, title, accesskey, ecc…

Selezione per profondità

Questo tipo di selezione è a dir poco spettacolare, se considerate che può essere sommata a quella precedente. Essa permette di definire la gerarchia degli elementi. Guardando l’esempio qui sotto ci si rendo subito conto della straordinaria portata di questo tipo di selezione, che mantiene il codice HTML pulito e senza indicatori superflui.

1
2
3
4
5
6
7
<div id="myBox">
<p>Paragrafo 1</p>
<p>Paragrafo 2</p>
<p>Paragrafo 3</p>
<p>Paragrafo 4</p>
<p>Paragrafo 5</p>
</div>
1
2
3
div#myBox > p       {color:#f00}
div#myBox > p + p {color:#0f0}
div#myBox > p:last-child {color:#00f}

Addirittura, giusto per concludere questo sorvolo, oltre a last-child esiste first-child e – fantastico – first-letter! Provate voi.
Abbiamo ovviamente appena sfiorato l’argomento, alquanto vasto a dire il vero, che vede i CSS come strumento evoluto per la definizione del layput di pagine. Esistono altri selettori e comportamenti e grandi novità per le specifiche dei file CSS di futura generazione.

Continua...



Stop SOPA