Conflicting :after content attributes

Hi,

I found some advice on how to style ‘user-friendly hyperlinks’:

/* provide info about non-html links, following
http://www.euronet.nl/~tekelenb/WWW/userfriendlierhyperlinks/ */
a[type="application/pdf"]:after {
content: "(pdf)";
font-size: 80%;
vertical-align: super
}

a[type="application/java-archive"]:after {
content: "(jar)";
font-size: 80%;
vertical-align: super
}

I thought to extend this to language types as well:

a[hreflang="en"]:after {
content: "(en)";
font-size: 80%;
vertical-align: super
}

a[hreflang="nl"]:after {
content: "(nl)";
font-size: 80%;
vertical-align: super
}

a[hreflang="de"]:after {
content: "(de)";
font-size: 80%;
vertical-align: super
}

As a sidenote: is there an easier way, where I can tell the content
attribute to take the value of the hreflang, so that I can collapse
these three into one?

Now the problem is: these conflict, if I have a link like the following:

<a href="CVs/cv-nl.pdf"
title="My curriculum vitae in Dutch" type="application/pdf"
hreflang="nl">Dutch</a>

it is rendered as Dutch^(nl), as you can see at
http://tcl.sfs.uni-tuebingen.de/~hendrik/#CV. So the (pdf) is lost. Is
there a way to reconcile these two and have both?

TIA, H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
Ask smart questions, get good answers:
http://www.catb.org/~esr/faqs/smart-questions.html

Hendrik Maryns wrote:

I found some advice on how to style ‘user-friendly hyperlinks’:

/* provide info about non-html links, following
http://www.euronet.nl/~tekelenb/WWW/userfriendlierhyperlinks/ */

It's nice in theory but it still fails in most browsing situations. However,
it fails gracefully (no harm done, the effect is just missing).

a[type="application/pdf"]:after {
content: "(pdf)";
font-size: 80%;
vertical-align: super
}
[...]
a[hreflang="nl"]:after {
content: "(nl)";
font-size: 80%;
vertical-align: super
}
[...]
As a sidenote: is there an easier way, where I can tell the content
attribute to take the value of the hreflang, so that I can collapse
these three into one?

You can use

a[hreflang]:after {
content: "(" attr(hreflang) ")";
font-size: 80%;
vertical-align: super
}

Now the problem is: these conflict, if I have a link like the
following:

a href="CVs/cv-nl.pdf"
title="My curriculum vitae in Dutch" type="application/pdf"
hreflang="nl">Dutch</a

Technically, they don't conflict, they just dance in the cascade. :-)

Both the type-related and the hreflang-related rules apply to the element.
The effect on a property is never cumulative. Instead, at most one rule
affects a property.

it is rendered as Dutch^(nl),

In this case yes. Other things being equal - and they are equal here, the
rules have selectors with the same specificity etc. - the latter rule wins.
If you moved the type-related rule at the end of the style sheet, then the
text indicating the type would appear.

This is an inherent limitation in CSS. You could circumvent it in a clumsy
manner: using several rules of the form

a[type="application/pdf"][hreflang]:after {
content: "(pdf)" "(" attr(hreflang) ")";
font-size: 80%;
vertical-align: super; }

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Hendrik Maryns wrote:

a[hreflang="en"]:after {
content: "(en)";
}

a[hreflang="nl"]:after {
content: "(nl)";
}

As a sidenote: is there an easier way, where I can tell the content
attribute to take the value of the hreflang, so that I can collapse
these three into one?

http://www.w3.org/TR/CSS21/generate.html#propdef-content

a href="CVs/cv-nl.pdf"
title="My curriculum vitae in Dutch" type="application/pdf"
hreflang="nl">Dutch</a

it is rendered as Dutch^(nl), as you can see at
http://tcl.sfs.uni-tuebingen.de/~hendrik/#CV. So the (pdf) is lost. Is
there a way to reconcile these two and have both?

Add another selector that checks for both attributes and set the content
property accordingly.
http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

--
Berg

Op 10-12-08 20:01 heeft Jukka K. Korpela als volgt van zich laten horen:

Hendrik Maryns wrote:

I found some advice on how to style ‘user-friendly hyperlinks’:

/* provide info about non-html links, following
http://www.euronet.nl/~tekelenb/WWW/userfriendlierhyperlinks/ */

It's nice in theory but it still fails in most browsing situations.
However, it fails gracefully (no harm done, the effect is just missing).

I know, but I think this prefectly illustrates the point of using a
proper browser, innit? You get the goodies others don’t.

a[type="application/pdf"]:after {
content: "(pdf)";
font-size: 80%;
vertical-align: super
}
[...]
a[hreflang="nl"]:after {
content: "(nl)";
font-size: 80%;
vertical-align: super
}
[...]
As a sidenote: is there an easier way, where I can tell the content
attribute to take the value of the hreflang, so that I can collapse
these three into one?

You can use

a[hreflang]:after {
content: "(" attr(hreflang) ")";
font-size: 80%;
vertical-align: super
}

Ah, I knew there had to be something like this, great, thanks!

Now the problem is: these conflict, if I have a link like the
following:

a href="CVs/cv-nl.pdf"
title="My curriculum vitae in Dutch" type="application/pdf"
hreflang="nl">Dutch</a

Technically, they don't conflict, they just dance in the cascade. :-)

Both the type-related and the hreflang-related rules apply to the
element. The effect on a property is never cumulative. Instead, at most
one rule affects a property.

it is rendered as Dutch^(nl),

In this case yes. Other things being equal - and they are equal here,
the rules have selectors with the same specificity etc. - the latter
rule wins. If you moved the type-related rule at the end of the style
sheet, then the text indicating the type would appear.

I suspected so yes.

This is an inherent limitation in CSS. You could circumvent it in a
clumsy manner: using several rules of the form

a[type="application/pdf"][hreflang]:after {
content: "(pdf)" "(" attr(hreflang) ")";
font-size: 80%;
vertical-align: super; }

Clumsy indeed. I will consider it. The other “solution”would be to
consider which I find more important and put that one lower in the style
sheet. That would be the type information, rather than language, since
most of the times, the links already say so.

Also thanks to Berg for pointing out the relevant links. (Though it
helps to see an example, really.)

Thanks, H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
www.lieverleven.be
http://catb.org/~esr/faqs/smart-questions.html


-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.9 (GNU/Linux)
Comment: Using GnuPG with SUSE - http://enigmail.mozdev.org

iEYEARECAAYFAklA32sACgkQBGFP0CTku6NynwCgwCYAOK5P6a Xf83lJb8GRLRyd
LwUAnjktce/gKpRPawnXcu+5wJNd6mpl
=Q1yY
-----END PGP SIGNATURE-----

Hendrik Maryns wrote:

Op 10-12-08 20:01 heeft Jukka K. Korpela als volgt van zich laten horen:

You can use

a[hreflang]:after {
content: "(" attr(hreflang) ")";
font-size: 80%;
vertical-align: super
}

Ah, I knew there had to be something like this, great, thanks!

Really elegant with no extra markup required....maybe IE10 will support
it! ;-)

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com