Skip to content

Archive

Tag: CSS

Wouldn’t it be great if you could look at the web page you are developing and be able to instantly tell if something is amiss. Say you forgot to add alt tags to your images, or you are using deprecated markup.

This might be a case for Holmes, the CSS Markup Detective.

What Holmes does is add CSS styling to elements in an HTML page that do not conform to standard, and will highlight any markup that is non-compliant, deprecated, or missing required attributes. All you need to do to make it work is to include a single CSS file in your web page, and you can then see the results immediately.

Since Holmes uses the W3C HTML5 standard (as it stands now), it is particularly useful for modernising old websites or existing codebases without too much trouble.

Share

I came across CSS3.com while browsing the internet. This blog/reference site provides a lot of information on what can be done using CSS3.

I have always had a love/hate relationship with CSS. I love what it can do, but to make it behave can sometimes be a chore. Now, at least, here is a great reference for those times I get stuck – especially when exploring the new features of CSS3.

Share

CCS3 has been making a lot of waves over the last several months, and is picking up a lot of support on the internet. It truly simplifies a great deal of things that have historically been major headaches for web developers.

The different browsers still have different implementations until the spec is finalised, but for Firefox, and Webkit based browsers, many of the features are already implemented.

My favourite addition, is the HTML canvas, which I have already used extensively, particularly in my O3D tutorials.

Border radius is another great feature, which does away with the need for cumbersome tables and partial images to create rounded images. All you need now is to add the following style

.roundedcorners {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

Here is an example:
Testing borders

I also like the drop shadows in text, which allow great effects.

.box-shadow {
	box-shadow: 4px 4px 2px #dddddd;
	-moz-box-shadow: 4px 4px 2px #dddddd;
	-webkit-box-shadow: 4px 4px 2px #dddddd;

	text-shadow: 1px 2px 3px #aaaaaa;

}

Here is an example:


Testing shadows



There are many more great additions too, such as better transparency, multiple background images, and multi-column layouts, which will all make web developers lives much, much easier.

Now to find a way to get people to start using these browsers instead of older non-compliant browsers, but that is a different issue entirely….

Share


This book makes it sense of the minefield that is working with CSS.

As a reference to quickly find a solution on how to do something specific, this book does a pretty good job. It is laid out well, and the “recipes”, as a solution is called, are categorised nicely into convenient chapters for easy searching.

The real benefit of this book is that it highlights the difference between all the major browsers, so that cross-browser support moves out of the realm of fantasy, and into the realm of the possible.

I think this book is a must-have for every web developer.



Share