1 Posted by Lukasz on 13 April 2005 | Permalink

Regargind questions 1: yes, there's nothing wrong in using :after for designating offsite links using this method. Alternatively, one cas use href^=http://example.com selector.

As far as question 2 is being considered: I myself was thinkig of captioning images with :after. However, there are two issues that - IMO - disqulify this technique.

The first things is that I wasn't able to apply a proper style to have the :after message as required. :after is placed *after* the element it was applied to, no matter if the element is displayed as block or inline (at least as far as my experience allows me to state so). This means that you can't actually have the caption displayed below the image, for example.

The second issue is more crucial: alt stand for "alternate" whilst captions are a bit supplementary to the image itself. For example "John Doe (left) and me on Carribean Island" is perfect caption whereas it would make stupid alternative message. So if we want to keep alt as an alternative to be displayed when someone turns images off or image wasn't fetched from the server, we can't really use alt for a caption.

My two cents.

2 Posted by Jacob on 13 April 2005 | Permalink

Q1: Depending on the situation, I would say 'a' (yes), but of course the site must still be useable in browsers that don't support it - perhaps some additional formatting on the link itself would be useful. It would probably be *easier* to not use :after to do this - perhaps JS, for example, might be better (though this is still not 100% supported / enabled). Using JS you need not even give it a special 'external' class as the JS could work that out.

Q2: I would say 'b' here, but I'm not certain. Whether the text is a required part or an extra is up to the designer of the specific page, but I would be wary of using the alt attribute - if the image can't display then the alt attribute will be displayed twice. Apart from that, it would encourage poor use of the alt attribute. Perhaps a custom attribute would be better, or even better (in my opinion) would be to just put the description in the html as normal text (least complications, should work in all browsers).

3 Posted by Steve Tregidgo on 13 April 2005 | Permalink

I don't have an answer, but wonder if displaying the contents of 'title' is more appropriate than 'alt', since showing 'alt' as well as the image is redundant if 'alt' is used to describe what the user can't see. But if the description is adding information ("squint your left eye to make sense of this picture"), maybe that's outside the remit of 'title' too?

4 Posted by minghong on 13 April 2005 | Permalink

1. No. I'd rather use a[href^="http"] as internal links are using relative paths.

2. Yes and No. Should be used in media other than audio stylesheet. For visual browsers, it's nice. But for TTS browsers that obey CSS, it will say the alt text twice.

5 Posted by Shaun O'Connell on 13 April 2005 | Permalink

1: c. No. Information conveyed by the CSS is useless to those mediums that don't understand the CSS. If a screen-reader only assesses a document by its content, then a visually impaired user would not be able to tell the implied difference between this link and any other link. Ideally, markup the "(ext)" with a span (maybe even use the full phrase: "External Link") and in the CSS manipulate that to the visual (and aural) styles you want.

6 Posted by Callek on 13 April 2005 | Permalink

I agree in-most with Comments 1 *and* 5.

The following would be how I would do it.

@media visual{
a.external:after, a[href^=http]:after {
content: "(ext)";
}
}

@media aural {
a.external:after, a[href^=http]:after {
content: "External Link";
}
}

As for Q 2, well I would be against, for already stated reasons.

7 Posted by Federico on 13 April 2005 | Permalink

About Q2: What is the difference between that method and IE display the alt attribute as a tooltip? ;).

8 Posted by Alex Lein on 13 April 2005 | Permalink

Q1) A
Though I would probably add something like this
a.external { padding: 0 15px 0 0; background: url(/external_link_icon.gif) right top no-repeat; }

Q2) B
If the text needs to be there, theyn it should be given it's own DIV or SPAN.
Also, wouldn't this be more appropriate?
img:after{ content: attr(title) }

9 Posted by Thomas Goyne on 14 April 2005 | Permalink

1) No. This results in loss of data, rather than just loss of presentation when CSS is disabled or not supported.

2) No. For the same reason as above, in addition to the fact that good alt text is rarely a good caption. If this approach was to be used, title would be far more appropriate.

10 Posted by Nelson Menezes on 14 April 2005 | Permalink

Oh, all the preaching going on...!

1) A. Yes, it can be a nice addition/nothing is lost if not there, etc. It *really* depends on the site.

2) B. Simply because the alt text is supposed to be something different from a label.

I guess answer C was put there to get the purists' blood boiling. As with everything, the specific answers will vary with specific sites.

11 Posted by Joost Diepenmaat on 14 April 2005 | Permalink

1. Yeah, that's fine, and I agree with using a class here instead of matching the URL with a selector, because the fact that a link starts with 'http://' does not mean it is not pointing to the same site. If you're using a class it's easier to keep it working.

2. Ofcourse not. That's not what alt attributes are for, and it removes content for people without CSS.

C. Well, I agree. Ofcourse, I think that using "(ext)" or an image (see my site for an example) to style an external link isn't content.

12 Posted by Mark Kawakami on 14 April 2005 | Permalink

For me, both of these questions depend greatly on the specifics involved, but I lean toward separate answers for both of them.

1. I think in this case it's all right as a helpful little spiff, as long as it's not essential to navigating the site in any way.

2. This should generally go in the content, as it's probably considered essential. Not, however, that for screenreaders and text-based browser, there will be a redundancy: The text of the alt tag will be displayed in place of the image and in the content. The CSS-based method will avoid this nicely, because the alt text will be displayed in image-less browsers, and the generated content in advanced browser that won't display the alt text. The people who lose are those in between, namely IE users.

13 Posted by Fuzztrek on 16 April 2005 | Permalink

1) c
2) c

Kind of. I'll try and explain:

First of all, a warning: this is entirely ideological (notice many instances of the word "should") and not at all pratical, which is probably cause to skip this comment entirely.

I think this is a flaw in CSS - allowing content to be modifyed. The W3C doesn't seem to embrace the use of scripting as much as it should. I believe "the web" should be a combination of the 3 technologies (javascript, css, and x/html), not "x/html, maybe css, and a very big maybe for javascript". Of course, one could argue (and I do) that javascript is not well enough equipt to handle content modification in it's current state - after all, CSS has superior selectors & medium switchers compared to the DOM. However, when you introduce such tiny content generation capabilities into CSS, the need for conditions arises - conditions which I very much doubt even an advanced regular expression will keep at bay for any amount of time. Also, a regular expression is extremely cryptic and unlike what I think the W3C has been working towards.

At anyrate, I think content generation of either method should be kept at a minimum and (rather ironically) restricted to non-content sections of a site.

Of course, for this to be viable we'd need assurance that Javascript and CSS would always be available to browsers. May as well just laugh as we know that will never happen ;)

So I guess my conclusion is that JavaScript should be a place for conditional content and style, css a place for conditional style, and html the original piece of clay both are left to work with.

14 Posted by Tom on 16 April 2005 | Permalink

1) Yes, for UA's that choose to support after and content its an additional feature. Progressive Enhancement?

2) I would say that captioning and image is part of the content, and therefore should not be generated via CSS, or JavaScript print, echo, write whatever.

If CSS and JavaScript are turned off then the page should still be functional, if the caption is missing then the page isn't functional.

15 Posted by Philip Hazelden on 19 April 2005 | Permalink

If you put the external thing into the content and people find it annoying, they can't turn it off. If you do it in CSS, and if you add an ID to the body so they can do something specifically for your site, they can do anything they want with it.

16 Posted by ppk on 20 April 2005 | Permalink

First of all, my own answer is C in both cases: I don't think we should generate any content in CSS. That's the task of HTML or JavaScript, but not of CSS.

Of the clear votes, question 1 has A: 5 vs. C: 3, question 2 B: 4 vs. C: 4. No one answered 1 by B and 2 by A. The situations are clearly very different.

Many people said that we should use the title attribute, and not alt, to hold the information. I disagree in this specific case. I feel that in the case of news photos a caption could nicely serve as an alt. The alternative text has to be a description of the photo, like "New Pope greets crowd", and that text also serves nicely as a caption.