This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > July 2007 > Automatic captions: img:after { content:attr(alt) }
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
Automatic captions: img:after { content:attr(alt) }
|
|
| Christoph 2007-06-22, 6:20 pm |
| This CSS declaration doesn't do anything on my page, for some reason.
I've made heavy use of this technique in other places, and it works.
It's not a problem with the alt value, either. This shows nothing:
img:after {
content:"Test";
}
While this shows "Test" after all div elements:
div:after {
content:"Test";
}
I've fiddled around with setting visibility, display and other
properties, but for some reason img elements seem not to support
content in their :before and :after pseudo-elements.
Since this is in fact a tip mentioned by W3 (http://www.w3.org/TR/
WCAG10-CSS-TECHS/#Alt ), and shown there almost verbatim, that's
somewhat confusing to me. Any experience with getting this to work?
| |
|
|
| Jukka K. Korpela 2007-06-22, 6:20 pm |
| Scripsit Christoph:
> for some reason img elements seem not to support
> content in their :before and :after pseudo-elements.
That's strange enough. I've only tested it on Firefox 2, but it seems to
fail to support it for input elements, too. Maybe that's because they are
replaced elements that are empty elements in markup terms.
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
| |
| Christoph B 2007-06-25, 3:26 am |
| On Jun 22, 10:08 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
> Scripsit Christoph:
>
>
> That's strange enough. I've only tested it on Firefox 2, but it seems to
> fail to support it for input elements, too. Maybe that's because they are
> replaced elements that are empty elements in markup terms.
>
> --
> Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/
I've tried testing <img></img> instead of <img />, but of course the
element has to be empty for valid XHTML, so that didn't work. I'll try
it with Opera and Firefox 3.0alpha - if the W3C recommends it, I'm
more apt to think it might just be a problem of the browsers not
implementing the standard properly yet.
If that doesn't work, I guess it's time for <div class="figure">.
Unfortunately, I'll probably have to fill in the caption text again,
unless there is some way to access "first child of type img's alt
attribute" from within a div selector. So far, I've only seen attr()
used for the element's own attributes.
--
cb
| |
| Christoph B 2007-06-25, 6:24 pm |
| Opera 9.21 shows the caption properly:
http://ermarian.net/html/img
Looks like it's time to file a bug on Bugzilla again... or, well, more
of a feature request, given how bleeding-edge CSS 2 is.
--
cb
| |
|
|
| Christoph B 2007-06-26, 3:17 am |
| On Jun 25, 9:18 pm, Bergamot <berga...@visi.com> wrote:
> Christoph B wrote:
>
>
>
> Good luck with thathttps://bugzilla.mozilla.org/show_bug.cgi?id=245633
>
> --
> Berg
Mh. In that case, I wonder if it's possible to access the attribute of
a child element from a selector?
Say,
div.figure:after
{
content: {attribute "alt" of first child element of type "img"}
}
div.figure
{
padding:10px;
border:1px solid #888;
margin:10px;
}
| |
| Christoph B 2007-06-26, 3:17 am |
| > Note. In CSS 2.1, it is not possible to refer to attribute values for other elements than the subject of the selector.
Apparently not. So I guess this approach is not going to work at all,
and I'm going to end up with a bunch of divs and copying content
multiple times:
<div class="figure">
<img src="" alt="Image Caption" />
<div class="caption">
Image Caption
</div>
</div>
The problem with divs, of course, is that they cannot inherit the
natural width of the contained image. The img solution would have kept
the figure as small as the image, but this way, the div will fill the
screen. An explicit width, of course, will never quite match the
image, so the image needs to be told to fill the width of the parent
("width:100%").
This, in turn, will mean that the image will be either stretched or
squashed, unless the figure element is exactly the proper width.
Oh well...
| |
|
| On 2007-06-26, Christoph B <christoph.burschka@XXXXXXXXXX> wrote:
>
> Apparently not. So I guess this approach is not going to work at all,
> and I'm going to end up with a bunch of divs and copying content
> multiple times:
>
><div class="figure">
> <img src="" alt="Image Caption" />
> <div class="caption">
> Image Caption
> </div>
></div>
>
> The problem with divs, of course, is that they cannot inherit the
> natural width of the contained image. The img solution would have kept
> the figure as small as the image, but this way, the div will fill the
> screen. An explicit width, of course, will never quite match the
> image, so the image needs to be told to fill the width of the parent
> ("width:100%").
You can contrive to give the divs "shrink to fit" widths by making
them floats, display: inline-block or display: table, although the
latter two options are not widely supported by browsers.
| |
| Christoph 2007-06-27, 6:18 pm |
| > You can contrive to give the divs "shrink to fit" widths by making
> them floats, display: inline-block or display: table, although the
> latter two options are not widely supported by browsers.
Thanks, float did it.
http://ermarian.net/html/img
(The approach that works in Firefox is the second one on the page)
I guess this isn't so bad, since the CMS will automatically duplicate
the alt attribute for the caption. And if it needs to be hidden, it
can just be set to display:none.
--
cb
| |
| Christoph 2007-06-27, 6:18 pm |
| On Jun 27, 12:33 pm, Christoph <christoph.bursc...@XXXXXXXXXX> wrote:
>
> Thanks, float did it.
>
> http://ermarian.net/html/img
>
> (The approach that works in Firefox is the second one on the page)
>
> I guess this isn't so bad, since the CMS will automatically duplicate
> the alt attribute for the caption. And if it needs to be hidden, it
> can just be set to display:none.
>
> --
> cb
Short note: It is necessary for the text below the graphic to have the
"clear:both" property, because otherwise it will wrap around the
image.
--
cb
| |
| Jukka K. Korpela 2007-07-05, 6:18 pm |
| Scripsit Bergamot:
> Christoph B wrote:
>
> Good luck with that
> https://bugzilla.mozilla.org/show_bug.cgi?id=245633
That page explains that :before and :after won't be supported for img by
Firefox, since "'::before' and/or '::after' don't apply to replaced
elements". That means that they treat the CSS 2.1 draft as authoritative
and, moreover, read more in it than there is in it. At least at present, the
CSS 2.1 draft says:
"Note. This specification does not fully define the interaction of :before
and :after with replaced elements (such as IMG in HTML). This will be
defined in more detail in a future specification."
http://www.w3.org/TR/CSS21/generate.html
The bottom line, however, is that we can't expect browsers to support the
pseudo-elements for "replaced elements" like img, input, etc. (whatever the
full list is - the CSS specifications and drafts are obscure in this area).
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
| |
| Alexander Clauss 2007-07-05, 6:18 pm |
| Jukka K. Korpela <jkorpela@cs.tut.fi> wrote:
>
> That page explains that :before and :after won't be supported for img by
> Firefox, since "'::before' and/or '::after' don't apply to replaced
> elements". That means that they treat the CSS 2.1 draft as authoritative
The big problem for replaced elements is, where should the generated
content be displayed?
According to the CSS specification the generated content is inserted
before (::before) the first child or after (::after) the last child of
the element (or if there're no children, theses pseudo elements become
the fist or last child element).
But for replaced elements like IMG the "content" area of the IMG element
is replaced by the image itself. And so the image would also replace
or at least cover the "::before" and "::after" pseudo elements, which
would be therefore invisible.
--
Alexander
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|