Native CSS nesting is coming to browsers soon. With nesting, that you might be familiar with from Sass or Less, you can greatly cut down on writing repetitive selectors. But you can also really work yourself into a corner if you’re not careful. This is an overview of how you can already use it today, […]
Forward thinking image copyrighting
Derek Powazek recently described a method of cleverly hiding a copyright message embedded in the image itself by using it as a background on a div
and clipping the message at the bottom. However, There are some drawbacks regarding semantics and users without CSS. Daniel Sandler came to the same conclusion and posted an improved method using an image and a surrounding div
. I’ve found a way to use just an image tag and some CSS.
The original method
The original method was unsemantic and the image is not visible when CSS is not available. The idea however, was very clever: The image that gets downloaded has the copyright message, but a regular viewer doesn’t get bothered by it. Daniel’s improvement has the same benefits but has added semantics and no problems when CSS is not available, because there actually is an image tag in the source. However it uses an additional div
. Which isn’t much of a problem, but it’s slightly superfluous (pedantically slightly, but work with me here).
Using just an image element
CSS has one property specifically for hiding sides of an image: clip
. It’s syntax is like this: clip:rect(5px 10px 5px 10px);
. This clips the images, hiding 5px of the image at the top and bottom, and 10px at both sides. Unfortunately, clip only works on absolutely positioned elements so it’s of little use with elements in content. You can read more about it in this article: misunderstood CSS clip.
Another option is using a negative bottom margin, and that does work. However, we still have to hide the bottom part of the image because while the objects height is less, the full image is still visible. By using the adjacent selector we can tell the element right after the image to have a solid background, hiding the bottom part of the image. We also add position:relative
to make sure the background actually gets rendered. The CSS:
img {
margin-bottom:-61px;
}
img + * {
position:relative;background:#fff;
}
And an example:
As you can see the copyright message is hidden and all it took were 3 CSS properties. That’s not half bad, is it? You can copy and paste the image, read the alt
attribute and it’s just like any other image in your page. Except, you know, with a hidden copyright message.
Downsides
Of course, this method has some downsides as well. Every Front-end developer’s best friend, IE6, doesn’t understand the adjacent CSS selector. So for IE6 support you’d need an extra class or extra CSS on the element itself. The background colour used to overlap the image is sub optimal as well, because it doesn’t allow for backgrounds using images.
Update: As Robert O’Rourke (below) mentioned, the element following the image needs to be high enough to hide the entire copyright message. This can be solved with a min-height
on the img + *
selector.
All in all
All in all I think there are a number of scenarios for each method. On a site such as this one or Derek’s one, The method above would be best. On a site with background images or small content directly following the image (and thus unable to cover the entire bottom of the image) it’s better to use Daniel’s method.
Whenever it’s possible to absolutely position the image, clipping is without a doubt the best and cleanest solution available.