Articoli con Tag ‘CSS2’

Creare un pipe separatore tramite CSS

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:

1
2
3
<p>
    <a href="#1">Link 1</a> | <a href="#2">Link 2</a> | <a href="#n">Link n</a>
</p>

Sarebbe meglio usare:

1
2
3
4
5
<ul>
    <li><a href="#1">Link 1</a></li>
    <li><a href="#2">Link 2</a></li>
    <li><a href="#n">Link n</a></li>
</ul>

Continua...

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

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:

1
li:before { content: ">>" }

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

1
<p>Posso inserire caratteri con i <span>fogli di stile</span></p>
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:

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

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

Continua...