CSS3 and validation – The headache edition

So for the very small numbers of people that read this, you will know I have recently been updating my personal buisness website in HTML5 and CSS3. As with all sites designed these have to pass through strick validation according to W3C guidelines. However the problem arises when using CSS3 as it’s still in the experiemental phases and therefore will not pass through validation properly.

There is two ways around this, you could either: Hold off from using it, or you could just move all of the CSS3 code to a serperate file, call it something obvious like css3.css.

As long as your normal code is valid (without hacks or errors) then it will pass CSS3 validation. Your css3.css file though will not, and this will continue to be the case until such a time as it is officially supported and released out of experimental phase by the W3c.

Always make sure when using CSS3 that you use fallbacks for unsupported browsers. For example if you have a background gradient, just make sure there is a normal background colour associated with it. For example:

header {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #cecece 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #cecece));
background: -webkit-linear-gradient(top, #ffffff 0%, #cecece 100%);
background: -o-linear-gradient(top, #ffffff 0%, #cecece 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #cecece 100%);
background: linear-gradient(top, #ffffff 0%, #cecece 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cecece', GradientType=0 );
}

Hopefully this will help when you are trying to get your CSS3 to validate at it just won’t play ball.

Website Refresh

Apple Gate Studios screenshot of homepage

Fairly recently I began to update my business website with a new look and feel, using HTML5 and CSS3. This was/is a bit of a challenge to get use to the new tags and all of the new powers that this updated coding language will bring.

I am still updating the site, so there will be a few things that might look odd, esspecially if you are using a non-complient browser like IE, but otherwise you should see something similar to the image in this post.

Let me know your thoughts about the design and if you have any questions, please feel free to ask.

Trying to get around CSS Hacks

Recently I have been playing around with a monster CSS file at my new job. The CSS file has been there for a few years and as had a few junior designers working on it from time to time. The problem is that when they come to edit it seems that no-one decided to check if there was previous tag, they just added in a new one, this then turns in to a monster 1600 + lines of CSS for one site. Granted it’s only 45k in size but when you also have to load the JavaScript and the jQuery and the images, etc, etc, it gets a bit ridiculous.

When I was going through the file I came across endless hacks mixed in with the invalid CSS, the vast majority of the hacks were the good old star hack. Things like *margin-left:20px; for example. Don’t get me wrong these work great for IE6+ if there is a display issue, however this isn’t valid code. W3C will not validate your CSS if you are using hacks.

Not only was there star hacks but there was the older and not much used underscore hack something like: _margin-left:20px; which again targets only anything older than MSIE 5, which is pretty much pointless. Not only is it invalid according to W3C, but it’s also outdated.

First job, strip out all of the invalid code and move to a new CSS file. Fix all 39 other validation errors first and get it valid according to W3C, then recheck to see if the hacks are needed.

If you are at all interested in Web Standards then valid code should be one of your top priorities, this might mean spending several hours going though the code line by line to fix some errors left behind by junior members of the team, but in the end it might save some time in downloading the content and be more readable for editing later on. Once your CSS validates, then look to see what needs hacking further to look good in IE, but what you must do is put the IE specific CSS in its own stylesheet.

Why use conditional stylesheets?

  • You got problems, they need fixing’
  • Keeps your code hack-free and valid
  • Keeps your main stylesheet clean
  • Perfectly acceptable technique, sanctioned by Microsoft

So if you want to add in some IE only stylesheets just add this simple bit of code below into the of your document next to your other CSS call.

Target ALL VERSIONS of IE

<!--[if IE]>         <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> <![endif]-->

Remember kids, Hacks are dirty and should not be used unless you really have to, otherwise just use a separate CSS stylesheet and you will create valid CSS every time. Providing you code it properly and always validate your code.

@Web-fonts

In my previous post I mentioned that I was going to post about @Web-fonts and why I love them. This is that post.

Bored with the standard fonts used for web development? Then look no further! @web-fonts is here to help. Kind of makes it sounds like a superhero…

Anyway, why should you be using @web-fonts when you can just use images? Well, for a start these fonts are readable by the search engines, so they are SEO friendly, plus CSS is able to adjust the fonts to your liking without having to go back to Photoshop (other editors are available) to change the image and re-upload it, those days are now gone!

To start using these new fancy fonts on your designs I would check out Google Web Fonts Here you will find a huge list of font that are available to use, FREE of charge.

First thing is to pick a font, once selected simply click the “use this font” tab and copy the <link href=’http://fonts.googleapis.com/css?family=Redressed&v1&#8242; rel=’stylesheet’ type=’text/css’> line into your <head>

Then all you need to do is call font-family: ‘Redressed’, arial, serif; on any section of your CSS you want to display the font.

Job done.

For a working example I made this site a little while ago, while it’s a work in progress and I’m not fully sure I am happy with the font selection, this page will give you an idea of how it works and displays. Feel free to take a look at the code if you fancy, just don’t nick it, ok?

http://applegatestudios.co.uk/html5/