Sviluppo » Internet » CSS

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

Questo articolo ti è stato utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags: , , , , , , ,

4 commenti a: “Inserire del testo con i CSS: IE7, un pessimo affare”

  1. getAvatar 1.0
    10 giu, 2008 Alex:

    Per non parlare dei selettori di attributo dei css3, con li a[lang="en"] puoi creare link differenti in base alla lingua o cose così...

    Rispondi Quota
  2. getAvatar 1.0
    10 giu, 2008 Giovambattista Fazioli:

    @Alex: ottima osservazione! Come anche gli pseudo :hover o :focus, anch'essi non completamente supportati da IE. Penso sia una vero peccato non poter mai sfruttare al 100% le potenzialità dei CSS... spriamo che la situazione migliori in un prossimo futuro! :)

    Rispondi Quota
  3. getAvatar 1.0
    11 giu, 2008 Angelo:

    Si dice che la versione 8 rispetti per buona parte gli elementi css. Speriamo! Spesso mi trovo nella situazione di dover cercare un compromesso del layout in modo da stare bene sia su Firefox e Safari, che su explorer.. A volte mi viene anche la tentazione di lasciar perdere quella baggianata di explorer, e progettare utilizzando pienamente i css..solo che poi ci penso: se non fosse per quel circa 70% di utenti che stanno ancora su Explorer!!

    Complimenti per il blog, ciao a presto!

    Rispondi Quota
  4. getAvatar 1.0
    11 giu, 2008 Giovambattista Fazioli:

    @Angelo: anche a me viene spesso la stessa "tentazione" ;)

    Rispondi Quota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre>         // blocco generico
[code][/code]       // blocco generico
[as][/as]           // Actionscript
[css][/css]         // CSS Style Sheet
[html][/html]       // HTML
[js][/js]           // Javascript
[objc][/objc]       // Objective-C
[php][/php]         // PHP
[sql][/sql]         // SQL