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.

Advertisements

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.

@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/