Validation Explanation

Layman's – Developer's

Layman's Explanation

So, you either clicked on the “XHTML” or the “CSS buttons and ended up looking at a scary page full of jibberish, or you didn't even click on them and decided to head straight for this page. Well, have no fear! XHTML is simply the code used to create every webpage in existance – There are certain rules when writing XHTML, and validating it makes sure that the developer didn't write sloppy code (if they write good, valid code, that's better for you – the page will be easier to access, and there's a much lower chance of any glitches occurring).

CSS is the code used to style the website… the code used to make everything pretty, not like those yucky simpleton webpages that existed in the early 90s. If you clicked on the CSS button, you might've noticed that this site's CSS doesn't validate – That's okay, it's not because I wrote sloppy code. It's because I've used some code that is too advanced for the validator… code that's not set for mainstream use until a few years from now. But hey, living on the cutting-edge is worth it. :-)

With the power of XHTML and CSS, this site will load quicker than a comparable invalid site, and is more accessible to those with disabilities (I'm still working on full disability support, but it's partially there).

Web Developer's Explanation

Every single page on this site should always render as valid XHTML… If you happen to find a page that doesn't, please contact me, including the URL of the invalid page.

On the other hand, the CSS validation will always fail. Why, you ask? Well, let's take a look at the errors that are spit out – Three in total (well, five, but two are redundant):

The first one, ::-moz-selection, is a proprietary CSS property that only Gecko-based browsers (Mozilla, Netscape, Firefox, and Camino) can understand. When you select text (to copy and paste, for example), there's always a highlight color behind the text to indicate what you've selected. Normally, this is controlled by the operating system, but you can use ::-moz-selection to change this background color within Gecko browsers. The validation fails, because it's not part of the official W3C specifications.

The second one, ::selection, is a CSS 3 psuedo-element selector. Psuedo-element indicates an element that doesn't actually exist within the flow of a document – For example, it's very easy to construct a selector for a elements, because the a element will actually exist in a document. But how do you define the selection that a user makes when highlighting text? That's what a psuedo-element selector is for, and they are indicated by double colons. Anyway, ::selection functions exactly as -moz-selection, except that it's actually part of the official spec. If the W3C approves of it though, then why doesn't the validator? Simple – Pseudo-element selectors are part of the CSS 3 spec, and the validator only goes up to CSS 2, because CSS 3 is still technically in draft form (it's not finalized, thus there might be future changes to the specs). Nonetheless, some browsers do support it already, so I've decided to use it.

Lastly, the ^= combinator. For those of you who don't know, CSS 2 introduced the extroardinarily useful attribute selector, which allows you to construct a selector based on an element's attribute. For example, let's say you have a link as follows: <a href="http://example.com">Linky</a>. Let's say that you want to give this link a red background – But only to links linking to “example.com”… you want to leave other links in your document untouched. You might think, “Oh, just add a class (like class="example") to the link!” Yes, you could do this, but imagine what a pain that would be if you had hundreds of those links. Instead, you can construct a style rule as so: a[href="http://example.com] {background:red}. You type the element, and within brackets, type the attribute that you want targeted. Makes life so much easier (well, it would anyway, since Internet Explorer's the only one that doens't support attribute selectors).

In the CSS 3 spec, the W3C introduced combinators to give more power over attribute selectors. This allows you to search for a substring within the attribute, instead of matching an exact attribute's string. For example, let's say in our document we also had a link that looked like this: <a href="http://example.com/forum/">Forum<a>. So, since this also links to a part of “example.com”, we also want a red background. using a[href="http://example.com] will not work, because the browser will look for the exact string of "http://example.com"… if anything is different, including more or less letters, then it will be rejected. This is where substring matchers come in handy. The one that I used, ^=, is used to look for prefixes – the beginning part of a string. Thus, we can use a[href^="http://example.com], which will work as we want it to, since it looks for the "http://example.com" part, and doesn't care what comes after that. Here are more attribute and substring selectors. And again, this is part of the CSS 3 spec, which is why it won't validate.