Steve Bryant - CSS

A Handful of Code

Fri, 11 Apr 2008 06:00:00-0500

In my last post about page controllers, Jason Holden asked on which pages I use page controllers. This is a great question and speaks to a larger issue of code organization that applies to CSS and JavaScript as well. [More]

CSS Naked Day 2008

Wed, 09 Apr 2008 11:30:00-0500

I just found out that it is CSS Naked Day, so here is my blog... naked.

Attractive Forms

Tue, 08 Apr 2008 06:30:00-0500

I am looking for some attractive form designs. If you have seen any that you like, I would love to have a look at them. I would also like to find attractive data tables and administrative menus.

Opera Sues Microsoft

Fri, 14 Dec 2007 06:00:00-0500

Opera just announced that it is suing Microsoft (open letter, press release) for using its market dominant position to tie its OS to a browser with poor standard support.

[More]

CSS Organization

Fri, 02 Mar 2007 06:00:00-0500

Last month, a discussion popped up on the CSS list about organization of CSS files. This is a discussion that comes up from time to time on that list and in smaller development discussions.

I don't think that my way is necessarily better than any other, but I thought I would share it. If for no other reason than to open up the discussion.

One method that I have seen is to divide up the files into "modules": forms.css, layout.css, tools.css, typo.css. This seems nice, but leads to a few problems.

[More]

Traveling Reference

Fri, 26 Jan 2007 19:29:00-0500

Ben Forta is asking for input on his next CFWACK book. The discussion in the comments reminded of the old CFML Reference that I keep with me. It is one of a few books that I always have near my computer when I travel.

CSS Pocket Reference (outdated, but still handy when I can't remember some bit of syntax)
ColdFusion Quick Reference Guide to CFML (no longer in print, but still handy to jog my memory a bit)
Regular Expressions in 10 Minutes (Forta strikes again!)
SQL Pocket Reference (perhaps the least used of the bunch, but I still like to have it)
The Elements of Style (I don't write the copy, but it has still been handy)

These books taken together weigh less than a pound and take up less space than your average computer book. They have still managed to be tremendously useful when I am working on the road (especially if I am trying to get some work done with no internet connection).

Anyone else have suggestions for books that they don't leave home without?

The Future of Hacks in IE

Thu, 13 Oct 2005 13:39:00-0500

Microsoft is working on Internet Explorer 7 and in an entry on the IEBlog, they mention the possibility of existing hacks for IE breaking pages in IE7.

If you are currently using a doctype that triggers IE's quirks mode, your site won't be affected. If you are using standards mode and hacks for IE, however, it might be.

The reason for this is that IE is trying to make their standard mode more standards compliant. They recommend using conditional comments instead of CSS hacks.

Find out more information at "IEBlog: A Call to action: The demise of CSS hacks and broken pages".

All in all, this is the kind of change that people have long been asking for from Redmond, but if you are using standards mode the transition could be rocky unless you prepare now.

Quick CSS Reference

Fri, 09 Sep 2005 13:58:00-0500

This is a quick reference on how to use CSS. We've no time for long explanations, so I will include a few other resources for that sort of stuff.

For details on CSS properties, see the w3schools CSS Reference or the DevGuru CSS Index.
You can also read An Introduction to CSS on the W3C's site (they are in charge of standards on the web).

Enough of that, We're trying to get some work done here! [More]

Avoid These IDs

Tue, 30 Aug 2005 01:47:00-0500

Eric Meyer has discovered some values that can cause problem in Internet Explorer on Windows, due to the way it handles scripting. His blog entry touches on an explanation and shows some examples.

In case you aren't up to reading any more, just avoid the following values in your id attributes: "tags","urns","item","namedItem" (and maybe "top").

Reserved ID Values?

CSSFactory: Real World CSSZenGarden?

Mon, 13 Jun 2005 13:35:00-0500

I have been a fan of the CSS Zen Garden for a long time. Recently, however, I have noticed that most of the examples are practical for real-world sites where the content changes from page to page and over time. Chris Heilmann has noticed as well.

CSSZenGarden.com is a great example of what CSS can be in an ideal situation. CSS Zen Garden shows what CSS can do for a one-page site whose content never changes. That isn't the world most of us deal with. Most of us deal with sites with multiple pages where the content changes from time to time.

Enter CSS Factory, a real-world alternative to the Zen Garden.

Right now, CSS Factory is just an idea.

While I think it is a great idea, a few points do concern me:

Chris mentions changing content order. So long as the order changes only for the content-area and not the template stuff (navigation, pieces that don't change from page to page), I think that is great.
Chris mentions changing order using JavaScript with a PHP fallback. I think it would be a lot easier to just use straight PHP for that.

These are minor points, however.

I would also offer some suggestions:

Suggest (impose?) a total page-weight of 40K (34K is the suggested page-weight for 10 seconds on 56K modem)
Recognize the specialization of talent in the modern web and give separate credit for design and code. This would allow more entries as designers and coders could collaborate on projects.

The second aspect would, I think, help to make the project a success. I know that I couldn't contribute anything to the project by myself as I have no design talent. Similarly, I know many good designers that couldn't contribute to the project because their CSS-skills aren't that advanced.

I certainly hope CSSFactory comes to fruition. If you have any thoughts, let Chris know on his blog.

Good Luck!

Eyetrack and Zen Garden

Wed, 09 Mar 2005 05:59:00-0500

Eyetools Research is running an eyetracking analysis on CSS Zen Garden. Their eyetracking analysis shows where users actually look on a web page. CSS Zen Garden shows the same content (indeed, the same HTML) with multiple designs.

The nice thing about an eyetrack study of CSS Zen Garden is that it is possible to see how people react to the same exact content in different designs. So far, they have tested the original design and one other. They are taking votes for what designs to test next.

If you haven't done so yet, you might want to check out the Eyetools blog. If you are interested in CSS Zen Garden, you might want to look at the CSS Zen Garden book.

CSS Zen Garden Book

Tue, 01 Mar 2005 13:38:00-0500

I just saw an announcement that a book on CSS Zen Garden has been released. For those of you that don't know, CSS Zen Garden is a very nifty site that can be viewed in several different designs (568 at the time of this writing). All of the designs use the exact same HTML, only the CSS changes. If you haven't been to the site before, I highly recommend you take a look.

The book is written by the founder of CSS Zen Garden, Dave Shea and by popular author, instructor and web designer, Molly E. Holzschlag. Dave Shea has some pictures of the book on his site. Digital Web has a good review of the book.

Common Coding Problems with HTML and CSS

Sat, 26 Feb 2005 05:59:00-0500

Sorry for the lack of posts recently, trying to get caught up on paying work.

Someone recently posted a link an article on the Web Standards Group mail list. The article, "Common Coding Problems with HTML and CSS", does a really good job of summarizing issues the possible issues in CSS/HTML web sites (most of them IE bugs).

Style By Section

Sat, 29 Jan 2005 05:59:00-0500

I have, for some time now, been using CSS to style sites that I have been working on. I typically use a style sheet named "all.css" to indicate that it is for all pages and all media. I then have a "print.css" for the print media.

Occasionally a site has multiple sections that each have slightly different styles. I typically create an additional style sheet for each section and link to the relevant style sheet conditionally.

This technique works well, but seems wasteful in situations where the styling for each section takes very few lines. I have, in the past, included the relevant styles on directly on each page (avoid this as it is a maintenance nightmare). Ideally, I could include styles for a given section in my primary style sheet and have them only apply to the correct pages automatically. Is such a thing even possible in CSS? Yes! (read on)

First thing's first. How does the browser know which page is in which section? For this, I use the often-ignored body tag. Although rarely used, the body tag (like most other tags) does have "class" and "id" attributes.

In this case, I will use the "class" attribute of the body tag (the "id" attribute would work just as well, but I reserve it for a similar use - more on that in a future post). Simply set the class attribute to the name of the section and then use the cascade to apply your styles to children of a body tag with a style matching that section.

Clear as mud? How about we look at some examples.

Let's say that I have a section called "Careers" (keep in mind that if your section names don't work as a valid CSS class that you will have to modify them so that they do - ditch spaces for example).

<body class="Careers"gt;

Now, I want to style the color of every h2 tag on any page in the careers section (without changing the appearance of h2 in any other section):

body.Careers h2 {color:#9b6340;}

Basically, what this tells the browser is that it should apply the given color (#9b6340) to any h2 tag that is enclosed by a body tag with a class of "Careers".

That's it! Let me know how you make out.

UPDATE (3/06/2005)

This technique can also be used to set current menu state.