Creare un pipe separatore tramite CSS

Martedì 9 Settembre, 2008

Capita spesso di vedere una serie di link distribuiti orizzontalmente separati dal carattere pipe "|", il simbolo grafico dell'asticella verticale. Inoltre, se è presente una buona stesura HTML, ci si accorge che questa serie di link - apparentmente orizzontali - altro non sono che liste puntate UL o OL. Ne deriva che invece di scrivere:

PLAIN TEXT
HTML:
  2.     <a href="#1">Link 1</a> | <a href="#2">Link 2</a> | <a href="#n">Link n</a>
  3. </p>

Sarebbe meglio usare:

PLAIN TEXT
HTML:
  2.     <li><a href="#1">Link 1</a></li>
  3.     <li><a href="#2">Link 2</a></li>
  4.     <li><a href="#n">Link n</a></li>
  5. </ul>

Continua a leggere... »

Post correlati

Tags: , , , , ,
Pubblicato in CSS, Grafica & Design, Internet, Sviluppo | 2 commenti »

Inserire del testo con i CSS: IE7, un pessimo affare

Martedì 10 Giugno, 2008

Ancora una volta, quando mi trovo a scrivere riguardo le capacità dei fogli di stile, sono costretto a porre in disparte Microsoft Internet Explorer! Con i CSS2 è stata introdotta una caratteristica davvero interessante, la proprietà content, usata in congiunzione con gli pseudo-elementi before e after. Tramite questo “stile” è possibile alterare il contenuto di un sito agendo esclusivamente sul file CSS. Ad esempio se scriviamo:

PLAIN TEXT
CSS:
  1. li:before { content: ">>" }

Un elenco puntato (UL, LI) avrà ogni elemento preceduto dai caratteri “>>”! Qualsiasi elemento, ovviamente, può essere trattato in questo modo:

PLAIN TEXT
HTML:
  1. <p>Posso inserire caratteri con i <span>fogli di stile</span></p>

PLAIN TEXT
CSS:
  1. p span:before { content: "-->" }

La versatilità di questo elemento non finisce qui! È infatti possibile utilizzare altri parametri oltre al semplice (ma utilissimo) testo. L’elemento content, infatti, permette anche valori speciali o url:

PLAIN TEXT
CSS:
  1. p:before { content: url(images/quote.gif) }
  2. p:after { content: close-quote }
  3. p:before { content: url(waves/sound.wav) }

Per i dettagli sull’implementazione fare riferimento direttamente a W3C – peccato non lo faccia anche Microsoft!

Post correlati

Tags: , , , , , , ,
Pubblicato in CSS, Internet, Sviluppo | 4 commenti »

Le meraviglie del CSS2.0+

Giovedì 27 Luglio, 2006

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

PLAIN TEXT
HTML:
  1. <div id="myInput">
  2. <input type="submit" value="invia" />
  3. <input type="button" value="Pulisci" />
  4. <input type="button" value="Annulla" />
  5. </div>

PLAIN TEXT
CSS:
  1. div#myInput input[type=submit] {color:#f00}
  2. div#myInput input[type=button] {color:#0f0}
  3. 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.

PLAIN TEXT
HTML:
  1. <div id="myBox">
  2. <p>Paragrafo 1</p>
  3. <p>Paragrafo 2</p>
  4. <p>Paragrafo 3</p>
  5. <p>Paragrafo 4</p>
  6. <p>Paragrafo 5</p>
  7. </div>

PLAIN TEXT
CSS:
  1. div#myBox> p       {color:#f00}
  2. div#myBox> p + p {color:#0f0}
  3. 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.

Post correlati

Tags: , , , , , , ,
Pubblicato in CSS, Internet, Sviluppo | Nessun commento »