I really like the :target pseudo-selector. It enables you to style the target of a so called skip-link. For instance when you link to a section in an article: you could highlight the header of that section. Or you can use it for toggling simple drop-down menus — the ones you see a lot on small screens. But you can also use it to create a completely different layout.

I used this technique on my Daily Rectangle site. As you can see (if your browser supports the vh unit) all the images are as high as the viewport. That’s nice, it enables me to enjoy one single image. But sometimes I want to see all the images on a grid. I could have created a PHP script that responded to a querystring. Or a small JavaScript. But instead I used the :target pseudo-selector. It’s very simple. First I did this:

<html lang="en" id="g">

Then I wrote this

#g:target body { columns: 15em; column-gap: 0; } /* and some other styles, you can look at the code: view-source:http://ghehehe.nl/the-daily-rectangle/ */

Now if you add #g to the end of the URL , the layout changes. The site now looks like this.

Update

Of course you could add two more alternative layouts by giving both the head and the body element an id. The following CSS would do the trick:

head:target + body { /* alternative styles here */ } body:target { /* alternative styles here */ }