Making an image gallery with :target
One of the selectors new to CSS3 is the :target pseudo-class, which can be used to apply rules to an element with a fragment identifier; that is, an anchor name or an id. For example, let’s assume you have a section heading with an id of ‘chapter_2′:
<h3 id="chapter_2">The Title of the Chapter</h3>
You could create a direct link to that element by using the fragment identifier at the end of the URL:
http://www.example.com/index.html#chapter_2
And, with the :target selector, apply a background to that element to indicate clearly where you have arrived:
h3:target { background-color: #ff0; }
Pretty useful, right? Not a killer feature, but useful nonetheless. It can be made even more useful, however, with a little bit of ingenuity; how about, for example, a pure CSS image gallery?
Take a look at this example (in a browser which supports :target; Mozilla, Webkit or Opera browsers will do the trick). Clicking the links allows you to browse through the different images, and it’s done with minimal markup and no scripting.
The first step is to create a list, with the image, name, and link in each list item; for example:
<li id="one"> <p><a href="#one">One</a></p> <img src="images/one.jpg"> </li>
Each list item needs an id, which will provide the anchor, and the link href is to its own id; this allows :target to work its magic! All the images are absolutely positioned on top of each other, and using the selector simply changes the z-index value so the targeted image is on top:
img { position: absolute; }
li:target img { z-index: 100; }
Easy! Of course, this is only a very simple example; with even more ingenuity, this could be expanded to become a very useful tool.
Update: I’ve just seen that Daniel Glazman came up with a very similar proposition before I did: CSS-only tabs.
It works in the latest Opera snapshots, too.
Not really a new concept, but the technique is something I haven’t exactly seen before. I like that.
The beauty of CSS3!
Hopefully, gallery apps and other apps can find a way to maximize the use of :target, it is indeed very useful, and hope that it will not become one of the least known features collecting dusts.
Wouldn’t this force browser to download all images beforehand? If images in your gallery are quite big that wouldn’t be a good thing. Maybe visibility/display can help this though (I haven’t tested yet).
@ Haruka: Like most of the quick tutorials I write here, this is really just a concept rather than the finished article! You’re right that it would involve downloading all images, so probably wouldn’t be suitable for large or multiple images.
Nice tutorial.
CSS3 are amazing, considering that there’s no javascript in this example :)
Nice!
I hope the IE team would implement this selector into IE8. I am anctious to use all these new CSS3 techniques in actual client work in the near future, but without IE there is no chance.
I’ve tried something like this before as well. The only problem is if you have the target anchors further down the page, the page will end up “jumping around” due to the target effect. Try throwing 6-8 paragraphs of lorem ipsum above that and see how it works.
I agree with Neal G, the fact that the page will be scrolled is the biggest problem, although this is what :target was originally meant for and mostly used for.
Maybe an extra CSS value for scrolling/unscrolling?
element:target[u] {} or something like that for unscrolling, default would be scrolling. Just a thought.
Hacer una galería de imágenes mediante la pseudo clase :target de css3…
Un ejemplo de la utilización de la pseudo clase :target de la futura especificación CSS3…
Target is indeed quite useful (when it gets implemented). Also think about tabs. At this moment it cannot be used progressive enhanced. However in the future it is possible to clearly link to a part of the content (one of the tabs).
Of course this is possible at this moment with JavaScript. JavaScript can perfectly read out the value of
:target, the name is -however- different: hash. I find it very good that for this and more layout ‘things’ more and more CSS possibilities will work cross browser.The power of this pseudo class is that it is powerful in the hands of a good developer. Sometimes CSS is needed to achieve an effect, sometimes JavaScript. If you have experience you’ll find out when to use them. Did you try to use the back button, for example?
It could be quite useful to use CSS for a gallery, since you can send a link to a friend and say ‘this is a cool photo’. Without having to say how to view the photo. The back button is one of the downsides.
I know, you just show the technique. For a bit better article you could coin the ‘problems’ I addressed. I find it worth to discuss this, anyone?
The only thing i don’t like about this is that after your done clicking through, if you want to do back you have to click “back” 10 times (or so).
Very interesting. As it was said before, this technique is quite simple to operate and has a space for experiments…
About “Back” button I think it won’t be such a trouble, one can place button like this on the page… As usual, there are some disadvantages, I don’t think it’s a big one.
So IE 6/7 are close to be the only browsers that don’t consider :target?
I guess a conditionnal comment with the rule
img { position: static; }
will degrade gracefully in IE (depends on the rest of the page).
[...] Оригинал: Making an image gallery with :target [...]
How useful are those links when CSS is disabled?
Should CSS be used for behavior like this?
@Andreas:
When CSS is turned off, just all images will be displayed. And if there are many images, the browser will ’scroll down’ to the image that would be displayed when CSS was enabled.
@Arjan - I know that, that’s basic HTML.
What I’m asking is “How useful are those links when CSS is disabled?”.
There’s no point in having links next to images that point to the image right next to it. And it’s also probably quite frustrating to hear the link being read out if you’re a screen-reader user.
I believe this sort of functionality should be dealt with using JS and the links should be added using JS. This way it will be completely unobtrusive.
For some tabs it may make sense to have a list of links but mostly they’re just in the way if you don’t have support for one of the layers (JS/CSS).
@ Andreas:
Well, that is true. It doesn’t make much sense to use
:targetto make an image gallery. But that’s wat I said in one of my previous comments here.The annoyances people using text2speech software is a good one, and -as you commented- unobtrusive JavaScript is a good solution in this case.
Reading your comment before hitting ’submit comment’ is better, it should of course read like this:
The annoyances people using text2speech software will get, is a good one. As you commented, unobtrusive JavaScript is a good solution in this case.
:)
By the way… I’ve been trying to use :target for a tab-like system. Everything works fine, apart from one little thing: I wanted to make it so visiting the page with no anchor defined at the end of the URL would still trigger the first tab.
For example, I have:
mypage.php#tab1
mypage.php#tab2
mypage.php#tab3
And I’d like mypage.php (w/o anchor) to show the same thing as mypage.php#tab1.
I tried a couple of things, and nothing worked… Is it even possible? I guess not, but I’d like to be proven wrong.
Ah… CSS3, cant wait till all browsers support it! It has some very handy/interesting stuff!
I really like your site!