Question

I want to make a CSS stylesheet that allows completely inexperienced users (using WYSIWYG editors) to have PDF icons next to PDF links. However, this can lead to unwanted stretching of the image with different font sizes. Is there any way I can tell what font size the user has applied to these anchors to then apply the correct icon?

I’m hoping for something as simple as this:

:link[href$=".pdf"]::after,
:visited[href$=".pdf"]::after{
    background-size: 1em !important;
    background-repeat: no-repeat !important;
    background-position: 100% 50% !important;
    color:inherit !important;
    content:" " !important;
    padding-right:1.5em !important;
    text-decoration:inherit !important;
}
:link[href$=".pdf"]::after,
:visited[href$=".pdf"]::after{
    background-image:url('/images/MIME_PDF_16px.png');
}
:link[href$=".pdf"][style.line-height>16px]::after,
:visited[href$=".pdf"][style.line-height>16px]::after{
    background-image:url('/images/MIME_PDF_32px.png');
}
:link[href$=".pdf"][style.line-height>32px]::after,
:visited[href$=".pdf"][style.line-height>32px]::after{
    background-image:url('/images/MIME_PDF_48px.png');
}
:link[href$=".pdf"][style.line-height>48px]::after,
:visited[href$=".pdf"][style.line-height>48px]::after{
    background-image:url('/images/MIME_PDF_64px.png');
}
:link[href$=".pdf"][style.line-height>64px]::after,
:visited[href$=".pdf"][style.line-height>64px]::after{
    background-image:url('/images/MIME_PDF_128px.png');
}

Alternatively, something like this would be nice:

:link[href$=".pdf"]::after,
:visited[href$=".pdf"]::after{
    background-size: 1em !important;
    background-repeat: no-repeat !important;
    background-position: 100% 50% !important;
    color:inherit !important;
    content:" " !important;
    padding-right:1.5em !important;
    text-decoration:inherit !important;
}
:link[href$=".pdf"]::after,
:visited[href$=".pdf"]::after{
    background-image:16px 16px url('/images/MIME_PDF_16px.png'),
                     32px 32px url('/images/MIME_PDF_32px.png'),
                     48px 48px url('/images/MIME_PDF_48px.png'),
                     64px 64px url('/images/MIME_PDF_64px.png'),
                     url('/images/MIME_PDF_128px.png');
}

If no such selector or value exists, then should I propose it to the W3C? Would this go against the philosophy of CSS?

Answer 1

The problem with a selector that selects by a style property, it is often said, is that it can lead to infinite loops. For example, a selector with a property that attempts to set that same property to another value and back:

[display=block] { display: none; }
[display=none] { display: block; }

It’s been proposed several times, I think, and met with rejection. There are of course several counter-arguments and points, such as forbidding the same property from being set in the rule at all, etc, but those are outside the scope of your question so I shan’t elaborate. If you search the mailing list archives, you should be able to find numerous discussions on this matter.

FWIW, Image Values level 4 actually makes mention of an image-set() function that allows you to specify different images for different resolutions, and I believe some semblance of an implementation can be found in WebKit browsers (naturally, as -webkit-image-set()). However, I don’t think it’s designed to scale with font sizes per se; it’s meant for scaling with resolution from what I can see, which may or may not be a different issue.

I suppose the safest bet here is to use a vector image format, like SVG, that scales down gracefully yet retains its integrity in large sizes. That way, the image worries about scaling itself so you don’t have to. Judging from your code, I gather that browser support won’t be much of a concern: IE9 supports SVG images just as well as the rest of your CSS code.

---

Oh and, since we’re talking about selectors here, :link and :visited will only ever be satisfied by a[href] in HTML. You can make your selectors less redundant by removing those pseudo-classes altogether if you don’t need the pseudo-class specificity, since you already have the appropriate href attribute selector. So instead of this:

:link[href$=".pdf"]::after, :visited[href$=".pdf"]::after

You can simply do this:

a[href$=".pdf"]::after

Or even this:

[href$=".pdf"]::after