Automatically Reloading Locally Modified CSS Files in the Browser

I’ve been looking for a good live CSS reloader and the Auto Reload extension for Firefox is the best one I’ve found. It doesn’t require any programs or services running outside of the browser, so it’s more self-contained, and doesn’t break when you proxy your outbound traffic or use remote sandboxes. You can use a regular expression for to […]

Automatically Refresh Browser When CSS Changes

LiveReload is an app that will watch files on your local development environment and automatically update the browser when CSS changes are made. I can’t believe I didn’t hear about this years ago.

Making Xdebug Pretty Not Ugly

Xdebug is an essential development tool for me, but, to be blunt, the default output style is kind of hideous. I looked for a way to customize it through xdebug.ini, but there doesn’t appear to be one. You can, however, use a browser extension like Stylish Stylus (FireFox) or Stylebot (Chrome) to override the default styles with CSS. .xdebug-error { width: […]

My First Shot at Adaptive Images

One of the first problems you run into when trying to build an adaptive layout is that images, unlike blocks of text, have fixed widths. Ideally we want to use small images on small screens and full sized ones on larger screens. The browser can resize the image on the fly, but the two problems […]

A Primer on Responsive Web Design

Ben Callahan from Sparkbox shared some good links on responsive web design recently, one of them being this introduction to the subject from A List Apart. One of the things that struck me from the article was that “[mobile] browsing is expected to outpace desktop-based access within three to five years.” Another link to Smashing Magazine was a […]

W3Schools Isn’t Official or Accurate

Divya Manian gave a presentation yesterday at WordCamp Seattle about generating proper markup when creating output from plugins, and she mentioned a site called W3Fools.com, which is basically a protest against W3Schools.com. I didn’t realize until I saw W3Fools, but W3Schools isn’t actually ran by the W3C, and it contains a lot of inaccurate information. […]

Body Classes Instead of Conditional Stylesheets

I’m thinking I should create a, ‘Duh, why didn’t I think of that?’ category for this. Instead of using conditional stylesheets or CSS hacks to fix Internet Explorer’s obnoxious lack of support for standards, you can conditionally set a class on the html or body tag and target that in your normal stylesheet. This is better for […]

Light and Clean CSS Message Box Styles

Here are a couple examples of good colors to use for clean CSS message boxes:

Sub-pixel letter-spacing in CSS

There’s a thread on the Sitepoint forums about the smallest amount of letter-spacing you can use. Most of the responses are useless, annoying and wrong, but #36 finally gives a good answer. Most browsers only support integer pixel values for letter-spacing. This is a problem because, when it comes to letter-spacing, there’s a big difference between […]

Distributing Fonts Via @font-face

Instead of using images, Flash or JavaScript to replace normal text with non-standard fonts, you can now use CSS’s @font-face rule. It will tell the browser to download the fonts and render the text using them. Internet Explorer uses the EOT format and everyone else uses TrueType, so you need to declare the sources in […]

Z-Index Stacking Contexts

One important thing to keep in mind while working with z-index is that multiple stacking orders are created based on the markup hierarchy. This means that an element with a z-index of 30 can actually appear below an element with a z-index of 20, if the z-index of the original element’s parent is 10. Paolo […]

CSS Selector Browser Compatbility

kimblim.dk has a chart showing browser support for various CSS selectors, including pseudo selectors. It includes CSS versions 1 through 3 and all of the major browser versions.

Content Above Anchors Disappear

It turns out there’s a serous problem with the One True Layout method of creating equal height columns. All of the content above an anchor will be shifted up, making it seem like it disappeared. There aren’t any universal or reliable fixes for this, so the Faux Columns method is probably the best choice if […]

Using overflow to Clear Floated Elements

If you have an element whose children are all floated, it won’t have any height to it. I’ve always just put an extra <div style=”clear: both;”> at the bottom of the container to force it to clear, but it looks like there’s been a much better way for a few years now. Alex Walker points […]

Placing an Element In Front of an Object

Here’s how to have a drop-down menu appear on top of a Flash object:

Add a z-index of 0 to the object’s containing div
Add <param name=”wmode” value=”transparent”> inside the object tag
Add wmode=”transparent” to the embed tag

via Sheriar Designs

The Best Way to Define Font Sizes in CSS

Often designers will want fixed font sizes so that the text on the actual size will exactly match their mockups, but The Web is Not Print (see also Pixel Perfect Design Does Not Necessarily Equal Good Web Design). A List Apart has a worked out a good method for sizing text consistently across browsers while […]

Internet Explorer Doesn’t Match PNG Color to CSS Color

All currently available versions of Internet Explorer incorrectly display colors in PNG images. To work around that, instead of setting a background color, you can use create 1×1 pixel image with the color you want, and set it as a repeating background image.

CSS Drop-Down Menus

Tomas Bagdanavicius has created a fast, themeable, cross-browser CSS-based Drop-Down Menu Framework that only uses Javascript for IE6.

Preloading Images

UPDATE: Now that all modern browsers (that is, everything except IE8 and older) have support for multiple background images via CSS3, that is my preferred method. It’s detailed by Jeff Starr in his post, Better Image Preloading with CSS3. * * * * I’ve been looking for a good way to preload images for rollovers, […]

Clearing a Browser’s default CSS stylesheet

Clear a browser’s default CSS stylesheet Update: After working with it for a little while I prefer using Yahoo’s Reset CSS, Base CSS and a few custom values to Meyer’s version. I think he takes it too far (almost to the point of absurdity) with things like stripping the weight from the strong tag. /* […]

Ian Dunn

WordPress Developer

Category Archives: CSS

Automatically Reloading Locally Modified CSS Files in the Browser

Automatically Refresh Browser When CSS Changes

Making Xdebug Pretty Not Ugly

My First Shot at Adaptive Images

A Primer on Responsive Web Design

W3Schools Isn’t Official or Accurate

Body Classes Instead of Conditional Stylesheets

Light and Clean CSS Message Box Styles

Sub-pixel letter-spacing in CSS

Distributing Fonts Via @font-face

Z-Index Stacking Contexts

CSS Selector Browser Compatbility

Content Above Anchors Disappear

Using overflow to Clear Floated Elements

Placing an Element In Front of an Object

The Best Way to Define Font Sizes in CSS

Internet Explorer Doesn’t Match PNG Color to CSS Color

CSS Drop-Down Menus

Preloading Images

Clearing a Browser’s default CSS stylesheet