CSS :target

HTML & CSS
1

Hi.

I’m doing my best to build my first HTML5 site :shifty:. Struggling.

Anyway, I have a sidebar on each page that contains quick links to individual parts of another page. Rather than use the depreciated <a name=“”></a> tag to do this I decided to use the id to link to these individual parts of another page.

Well and good, it works well, however to further aid the user to locate the part of a page that they had linked to I decided to use a visual aid by using the :target selector. So that when they hit the link not only does the page position the area in the viewport but has the added benefit of having a red border or different background colour to attract their attention.

HTML
<li><a href=“individual.html#candle”>Hopi Ear Candles</a></li>

CSS
section:target {background-color: red;}

However, the :target selector only ever worked when it was in the head of the target document…

individual.html
…
<style>
section:target {background-color: red;}
</style>
</head>
<body>
…

But never when I put it in my external css style sheet. I have a control.css sheet and sheets that are imported into that sheet…

@import url(“reset.css”);
@import url(“layout.css”);
@import url(“elements.css”);

It doesn’t matter which external style sheet I place the :target rule in, it just ignores it and only ever works when located in the head of the linked to document (individual.html). I have to add that all my other css from my external css style sheets work fine.

My question then is…does the :target selector only ever work when in the <style></style> tag within the head of the linked document?

I hope that makes some sense, thanks in advance, Karl.

2

Thanks Paul O’B
Lest I got it to work by moving it up. :slight_smile:
Only just realised that IE doesn’t like rgba colours, have to use the usual colours on a conditional commented style sheet. Then I’ve got to use my first time ‘media queries’ to get it to look OK on portable devices. Knowing that I was going to use media queries for mobile devices made me have to think long and hard when coding the html. :eek:. I realised then that you ‘could’ make things very difficult for the media queries if you code the html too rigid. Hope I got it right, well…I’ll soon find out! :slight_smile:

Regards Karl.

3

Hi Paul O’B.
No link, I have it on my hard drive while building…it is working now but only when above some @font-face {} rules. Rather odd.


@import url("reset.css");
@import url("layout.css");
@import url("elements.css");


section:target {border: 1px solid red;}

/* Font Packs */ 

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on October 22, 2010 12:12:38 PM America/New_York */



@font-face {
	font-family: 'ForelleRegular';
	src: url('fonts/header/Forelle-webfont.eot');
	src: local('&#9786;'), url('fonts/header/Forelle-webfont.woff') format('woff'), url('fonts/header/Forelle-webfont.ttf') format('truetype'), url('fonts/header/Forelle-webfont.svg#webfontRyAXJoKb') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Andika';
	src: url('fonts/andika/AndBasR-webfont.eot');
	src: local('&#9786;'), url('fonts/andika/AndBasR-webfont.woff') format('woff'), url('fonts/andika/AndBasR-webfont.ttf') format('truetype'), url('fonts/andika/AndBasR-webfont.svg#webfont2mFIUUJ4') format('svg');
	font-weight: normal;
	font-style: normal;
}

Thanks Karl.

4

Hi,

It should work form your stylesheet as usual. You may have specificity conflicts perhaps if you there are similar weighted rules.

Do you have a link to the page?

5

It’s now working :shifty:
I moved the…

section:target {background-color: red;}

above some @font-face {} rules but under my @imports url {} rules that as I understand it, must be at the very top. But anyway, now it works…I don’t have any idea why though. :nono:

Thanks, Karl.

6

I just tried that code locally and it still seemed to work but of course I wasn’t linking to the real fonts so there may be a timing issue there. Not sure what’s going on there unless the little smiley face trips up some browsers but then you would assume that rules before would be ok.

7

Did you see the link that Stomme poes posted which shows how we should be coding for mobiles. It’s in fact the reverse of what most are doing now. Code for mobiles first and then use media queries for more capable browsers.

8

Wow…thanks for the link, that has given me plenty to think about. There were somethings I didn’t ‘get’ but much that I did. I shall have to go through it again and again until more sinks in…there’s an awful lot of info in that.

The big shock for me was that ‘most’ mobile devices don’t handle media queries very well or even at all! But then, if I have understood correctly…because of that we are to build a site for mobile devices and so feed them the pure code adding media queries only to feed extra code to more able devices, such as computers.

However, where I came unglued with that was when thinking…surely we need to feed all mobile devices with some media queries because of the many varying screen sizes and orientations? :open_mouth:
For if we were to feed all mobile devices with pure code giving a screen width of say 480px, what would happen to the browser with a smaller screens resolution? Or are we to return to fluid layouts?

As I said, I’ve got allot to think about! :slight_smile:

Thanks again, Karl.

9

But then, if I have understood correctly…because of that we are to build a site for mobile devices and so feed them the pure code adding media queries only to feed extra code to more able devices, such as computers.

Yes that’s basically it. You make a basic version that works on mobiles (e.g fluid and with small images) and then using progressive enhancement you make it better for more capable browers and devices.

10

Unbelievable…I got something right! :slight_smile:
I’m guessing that sooner or later browsers for mobile devices will catch-up but still, since the majority of viewers in the very near future will be viewing our sites via a mobile device I guess we may as well write code for them first, and as suggested always add extra via media queries for computers etc. However, once mobile browsers do fully support media queries I’m guessing many who stuck to the original format will simply continue. I just wonder how long it will take for browsers to get up to speed.

It is rather odd that having completed numerous Sitepoint tutorials, where taught, media queries are only directed at mobile devices, why would Sitepoint be making tutorial, even today that teach this seemingly older format?

Thanks again, Karl.

11

Everyone has their own ideas but the basis of web development has always been progressive enhancement.

e.g. Start with a page of well structured html containing text that everyone can access. Then improve it only for more capable devices.

The mobile web is awkward though because it is rapidly changing and no one really knows whether to create specific mobile sites or to adapt existing ones to fit specific devices.

Smashing magazine has a list of resources here.

Only time will tell:)