CSS

flex-flow-dimensions-row Using the CSS3 flexbox layout on 23 Mar 13 (3 comments)

The CSS flexbox is a future CSS3 layout module that aims to make CSS page layout much simpler. It makes it easy to create flexible, stretchy layouts.

Newspaper columns Using CSS3 multi-column layouts to split a list into columns on 17 Mar 13 (Add comment)

How to use the new CSS multi-column layout feature to split a list across multiple columns.

cement lion Maintainable CSS presentation slides on 31 Jan 11 (2 comments)

A talk that I gave at the Developer, Developer, Developer day in Reading in 2011 about my experiences trying to make CSS easier to maintain. Contains slides and sample downloads.

multiple-background-image CSS3 Multiple background images on 23 Nov 09 (8 comments)

How to use the CSS3 multiple background syntax to create complex, scalable and beautiful backgrounds for HTML elements.

IE6 absolute positioning in parent with odd width on 07 Sep 09 (Add comment)

A small browser quirk for IE6 where absolute positioning with the CSS right property is one pixel out when the parent container has an odd number of pixels.

Building javascript minification into MSBuild scripts on 29 Aug 09 (Add comment)

How to use a tool called Packer.NET to build javascript minification into a MSBuild script.

Why I don't like reset stylesheets on 23 Aug 09 (7 comments)

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.

svg-logo SVG images as CSS backgrounds on 12 Aug 09 (11 comments)

SVG images are an interesting options for CSS backgrounds because they’re small to download, easy to create and have many powerful features that aren’t possible using CSS3 alone.

A great big welcome to inline-block! on 09 Aug 09 (4 comments)

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.

Dust-me selector tool for finding unused CSS selectors on 21 Oct 08 (2 comments)

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 […]

CSS3 box-sizing attribute on 20 Oct 08 (23 comments)

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 […]

Form layout using negative margins on 27 Jul 08 (1 comment)

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.

The bleeding edge of web: media queries on 18 Jul 08 (5 comments)

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 […]

Child and sibling selectors on 20 Jan 07 (Add comment)

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 > […]

Containing floats in block elements on 25 Jan 06 (Add comment)

I just wanted to bookmark a really useful page about how to make block elements in CSS expand to contain floated elements. There are a couple of suggested ways to deal with this on the page but the one I needed today was adding an element to the end of the float that has the […]

IE7 is planned to support CSS attribute selectors! Whee! on 13 Oct 05 (Add comment)

Yay! I’m so happy because I just read a post on the IE blog that says IE7 is going to support attribute selectors! In fact it says that IE7 is going to aim to be CSS 2.1 compliant! They’re also *finally* fixing the problems with rendering transparent png files. I was a bit cynical when […]

Request for comment on the CSS 3 spec on 21 Jul 05 (Add comment)

I saw an article on WASP today asking for comment from web developers on the CSS 3 standard that they’re currently working on. It’s kind of hard to tell how it’s going to be without trying to make a webpage with it, but the idea of being able to use multiple background images in the […]

PNG Alpha transparency code in IE on 19 Oct 04 (Add comment)

Because of incompatibilities between IE and the world, to get PNG transparency to work in IE you need to add this to your stylesheet: img.transparent { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’myimage.png’,sizingMethod=’scale’);} There’s more information at A List Apart and WebFX

CSS2 @font-face threatens to make our pages prettier on 16 Sep 04 (8 comments)

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 […]