Tagged with CSS

CSS3 Multiple background images

Firefox 3.6 supports multiple background images so I thought it was time to give them a go and figure out how they work. May contain small rant about beautiful markup.
Published in CSS on Monday, November 23rd, 2009

Why I don't like reset stylesheets

I don't much like reset stylesheets. They make extra work when creating CSS and are an extra request for the browser to make to build a page.
Published in CSS on Sunday, August 23rd, 2009

SVG images as CSS backgrounds

Experimenting with using an SVG image as a CSS background image.
Published in CSS on Wednesday, August 12th, 2009

A great big welcome to inline-block!

Inline-block is a halfway point between setting an element's display to inline or to block. It keeps the element in the inline flow of the document like display:inline does, but you can manipulate the element's box attributes (width, height and vertical margins) like you can with display:block.
Published in CSS on Sunday, August 9th, 2009

Dust-me selector tool for finding unused CSS selectors

My find for today was a Firefox extension called Dust-Me Selectors from the SitePoint guys that scans a web site looking for unused selectors in the CSS. It extracts the style references for the current page and then looks at the page to see where they are used. It can look at the current page [...]
Published in CSS, Tools on Tuesday, October 21st, 2008

CSS3 box-sizing attribute

CSS3 is going to include a new attribute called box-sizing so we can choose whether the width set on an element will include borders and padding or whether borders and paddings will be added to the width. The difference is basically the difference between the IE5 and W3C box models. The default will still be [...]
Published in CSS on Monday, October 20th, 2008

Form layout using negative margins

Use negative margins and light weight semantic markup to display a form with the labels on one side and form elements on the other. No tables or divs needed at all. Works in all browsers. Noone who wasn't a web developer would believe what a pain it is finding a good solution to this little problem.
Published in CSS on Sunday, July 27th, 2008

The bleeding edge of web: media queries

Media queries are extra params for the CSS @media types that you can use to target styles for different devices based the device’s capabilities like dimensions and colour depth. They are part of the W3C CSS3 standard and are supported in the latest vesion of Opera (desktop and mini versions), Firefox and Safari. Media queries [...]
Published in CSS on Friday, July 18th, 2008

The bleeding edge of web: querySelector() and querySelectorAll()

One thing coming up in the W3C selectors api spec are a couple of new methods for retrieving DOM elements called querySelector() and querySelectorAll() that take a css selector and return a node or list of nodes that match. They basically do the same thing as the css query features of JQuery or Dean Edward’s [...]
Published in Javascript on Saturday, July 12th, 2008

Child and sibling selectors

I was trying to style a bit of html without having to add a new class into the markup and came across two types of CSS selectors that I haven’t used before called child and sibling selectors. You can use child selectors to target the direct children of an element. The syntax is parent > [...]
Published in CSS on Saturday, January 20th, 2007

Measuring element dimensions and placement in javascript

I found a really useful page on the MSN site that explains how measuring element dimensions and locations work in javascript. There’s a great image that shows you how to measure any of the different areas using the different javsacript width, height and placement properties.
Published in Javascript on Thursday, August 11th, 2005

CSS2 @font-face threatens to make our pages prettier

It’s funny the way the universe echos sometimes. While I was walking to lunch yesterday I was thinking that it was high time developers got more choice about the fonts that their webpages display in. I mean we live in an age where bandwidth restrictions have relaxed so much there’s video linked from the homepage [...]
Published in CSS on Thursday, September 16th, 2004