34 messaggi dal 29 gennaio 2011
www.incante.135.it
Premetto che prima di aprire il topic ho cercato, ma non ho trovato nulla che mi pottesse aiutare...sicuramente non avrò utilizzato le giuste keys

Vorrei ricevere più informazioni sull'elemento content.

So che costruendo un css del genere:
codice:

#div1 {content:'Hello';}
#div1:hover {content:'World'}


l'effetto che si otterebbe sarebbe quello di avere la parola Hello nel div1 sin dal caricamento della pagina, ed una volta che si pone il mouse sul div il testo cambia in World fino a quando non esce dal campo d'azione del div.

È molto comodo, però noto che mentre su Opera funziona alla perfezione, su Firefox, ad esempio, non funziona minimamente.

Mi interesserebbe sapere se è possibile forzare il suo funzionamento in qualche modo.
Se poi è possibile fare ciò, sarebbe interessante poter inserire anche collegamenti ipertestuali. So che il content risulta come in InnerText, però mi chiedevo se c'era qualche opzione con i CSS...

Ringraziamenti anticipati,
Lollinos
11.886 messaggi dal 09 febbraio 2002
Contributi
Lollinos ha scritto:
su Firefox, ad esempio, non funziona minimamente.


ciao,
funziona se lo usi in combinazione con :before e :after. Infatti, la tavola di compatibilità indica, appunto, che content va usato solo se nel selettore CSS usi quelle due pseudoclassi.

Ecco un esempio:
#div1:after {content:'>';}
Lo scopo della regola content non è quello di generare del testo o dei link, infatti il CSS dovrebbe occuparsi solo della presentazione e mai per inserire del contenuto nella pagina, ma lo scopo è quello di permetterti l'aggiunta di simboli o di piccoli elementi grafici prima o dopo un elemento html. Ad esempio potresti usarlo per aggiungere un simbolo > dopo un ipotetico link "continua a leggere".

Vedi qui un elenco di possibili modi di utilizzo.
http://www.htmldog.com/reference/cssproperties/content/

Un altro scenario interessante è dato dalla funzione attr che è in grado di attingere il contenuto da un attributo che si trova sul tag stesso. Per esempio potresti usarlo per aggiungere una didascalia dopo un'immagine. Questo utilizzo è ok perché il contenuto si trova già nel markup e con il CSS vai semplicemente a "spostarlo". Quindi, avendo un tag <img così...

<img src="foto.jpg" alt="Caprette su montagna innevata" />
...potresti usare questo CSS...
img:after {content:attr(alt);}
e... peccato, non funziona.
:after, quando la applichi ad img, funziona solo su pochi browser...  e Firefox non è tra questi. Con tutti gli altri tag sembra funzionare correttamente, però.

ciao,
Modificato da BrightSoul il 14 ottobre 2011 21.11 -

Enjoy learning and just keep making
34 messaggi dal 29 gennaio 2011
www.incante.135.it
Innanzi tutto grazie della risposta!

Ho notato il suo funzionamento. Ha di certo il suo senso.

Però come mai Opera accetta anche altre pseudoclassi? In più, ho provato ad usare la funzione url() e sempre su Opera mi aggiunge un'immagine, ma in Firefox no.

Quindi si può dire che sia un "bug" di Opera?
11.886 messaggi dal 09 febbraio 2002
Contributi
Lollinos ha scritto:
Quindi si può dire che sia un "bug" di Opera?


mmh, penso di no, infatti qui sostengono di supportare il content per tutti gli elementi e non solo per le pseudoclassi :after e :before.
http://dev.opera.com/articles/view/css-generated-content-techniques/

Apparentemente in CSS3 quell'utilizzo di content è consentito, seppur sia ancora una bozza pubblicata nel 2003 (fonte), e quando si tratta di bozze ogni vendor decide, di sua iniziativa, se supportare o no (e come) quella funzionalità.

Per una questione di compatibilità, utilizza content solo con :after e :before e tieni presente che anche in questo caso potresti trovare sorprese. Verifica sempre che ogni browser renderizzi correttamente il tuo css, prima di pubblicare il sito. Purtroppo non è ancora una scienza esatta, specie quando vuoi fare in modo che il sito si veda bene anche su vecchie versioni di Internet Explorer.

Lollinos ha scritto:

ho provato ad usare la funzione url() e sempre su Opera mi aggiunge un'immagine, ma in Firefox no.
Su Firefox dovrebbe funzionare. Visita questa pagina, dovresti vedere il loghetto di Quirks Mode subito prima della scritta "This is the test paragraph". Io almeno lo vedo...
http://www.quirksmode.org/css/beforeafter_content.html#t04

ciao,
Modificato da BrightSoul il 16 ottobre 2011 12.49 -

Enjoy learning and just keep making
34 messaggi dal 29 gennaio 2011
www.incante.135.it
Capisco...Pensi che con la futura versione dei css, CSS4, questi "buchi" verranno colmati? Anche perché non è il massimo lasciar stabilire a terzi uno standard proprio...

Si, ora lo vedo anche io. Non so come mai prima non andava...

Grazie della spiegazione!
11.886 messaggi dal 09 febbraio 2002
Contributi
Lollinos ha scritto:
non è il massimo lasciar stabilire a terzi uno standard proprio...


beh, è comprensibile che i vari vendor cerchino di inserire quante più funzionalità possibile nei propri browser. La ratifica degli standard CSS3 è di una lentezza disarmante, hai visto che infatti l'utilizzo del content è sullo stato di "bozza" da ben 8 anni (e viene pure considerato a bassa priorità). Onestamente non conosco i motivi di tale lentezza; magari vogliono evitare di commettere errori nelle specifiche e attendono che i browser vadano in avanscoperta prima di scolpire una funzionalità nella pietra.

Infatti qui si legge:
Typically, W3C now requires two implementations of a specification before allowing it to become a Recommendation


Ci sono ancora molti moduli del CSS3 che devono essere promossi a Raccomandazione dal WC3.
http://www.css3.info/modules/

La maggior parte, infatti ^^'

Enjoy learning and just keep making
34 messaggi dal 29 gennaio 2011
www.incante.135.it
Però...non ero a conoscenza di questi problemi. Onestamente non penso che il [i]content/i] si meriti una bassa priorità, potrebbe sostituire delle inutili righe di codice in javascript che andrebbero ad appesantire la pagina...

Bèh, grazie della spiegazione!

P.S. - Avrei un'altra domanda da fare sui CSS, posso scriverla qui oppure è meglio se ne creo una nuova?
Modificato da Lollinos il 17 ottobre 2011 22.21 -
11.886 messaggi dal 09 febbraio 2002
Contributi
Crea pure un altro thread, così potrai dare un titolo più idoneo alla nuova domanda.

Enjoy learning and just keep making

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.