Stampare contenuto con CSS tramite attr()

[pierofix]

Ora, lo so che CSS non ha la funzione di inserire contenuto, ma in termini di accessibilità avevo pensato all'uso di attr() in paio di occasioni.

E' il caso del foglio di stile per la stampa. Spesse volte, quando stampo un articolo o un documento web mi ritrovo delle informazioni mozzate, come ad esempio i link e gli acronimi. Allora ho pensato: perchè non rendere l'URL del primo e il TITLE del secondo quando si stampa?

@media print {

a:after {
   content:" [" attr(href) "]";
}
acronym:after {
   content:" (" attr(title) ")";
}

}

Un esempio funzionante (ovviamente non con IE :rollo: ) lo trovate qui:

- www.re1.it/pierofix/me/bookmarks.htm

Che ne pensate?

[haZe]

In FF, facendo anteprima di stampa, vedo alcuni errori/difetti.

Nell'ordine:

- i link nei primi paragrafi vengono stampati con l'url (cioè #something): oltre a essere molto poco utile (che me ne frega dei link interni) genera anche molta confusione, perchè manco si capisce sia un URL.

- non userei l'italico per gli URL, vedo che molte volte da l'orrendo effetto di sovrapporsi alle parentesi quadre, e a volte è troppo appiccicato al testo antecedente

- se possibile sarebbe molto sexy togliere quel "http://" agli URL

- strano bug (vedere immagine, dove sono evidenziati anche gli effetti del secondo) :master:

[pierofix]

1. Eh, lo so: è fastidioso e non ha senso. Sto provando a usare selettori per escludere i link che hanno per href un'ancora interna, ma ho difficoltà: qualche idea?

2. Nell'anteprima si sovrappongono, ma non so se lo fanno anche in stampa. Qualcuno è così gentile da provare e farmi sapere? Grazie.

3. Dovrei sempre agire via css, ma questo non saprei come farlo.

4. Quello credo sia dato dal fatto che il css inizia con * { margin:0; padding:0; }. Vale lo stesso discorso di prima: qualcuno prova a fare una stampa?

Grazie mille.

[Effepi]

In stampa la parentesi quadra viene bene

Ciaus
F.

[pierofix]

Grazie mille, gentilissimo!

[haZe]

1. in *questo* caso, basta dirgli di stampare l'URL a quelli sotto un li. Ovviamente funzionerà solo in pagine come questa

2. ottimo

3. manco io

4. come il punto 2

[pierofix]

Originariamente inviato da haZe
1. in *questo* caso, basta dirgli di stampare l'URL a quelli sotto un li. Ovviamente funzionerà solo in pagine come questa

In realtà esiste questo, ma mi pare non sia supportato da nessuno:

a[href|="#"]

Dovrebbe puntare a tutti gli a con href che comincia con #:

- http://www.w3.org/TR/CSS21/selector.html

Dico boiate?

Grazie mille.

[Effepi]

Ho provato:

a:after { content: " [" attr(href) "] "; }
a[href|="#"]:after { display:none; }

e mi funge: link normali con a href, link che iniziano con # senza nulla.

unico problemuzzo: vengono le parentesi anche attorno alle ancore. ma forse si rimedia anche a quello.

Bip-bip
F.

EDIT: fretta, pessima consigliera.

[pierofix]

Mmm. Wow... perchè a me a casa non funzionava? Forse era tardi e avevo le allucinazioni.

Forse all'ultimo problema si può ovviare così:

a[href|="#"]:after {
   content:"";
}

ma non ho qui la possibilità di testarlo: qualcuno è così paziente da provare? Grazie ancora.

[Effepi]

a[href|="#"]:after {
   content:"";
}

FireFox 1.0.6 OK
Opera 8 no (neanche il precedente, a dire il vero)

Cià
JK