This post will focus on the different ways to format CSS, which differs from the different ways to organize CSS. Definitely related concepts, but I think organization has more to do with how things are grouped and ordered while formatting has to do with spacing and indenting.

Formatting has nothing whatsoever to do with how the CSS functions. These are merely aesthetic choices by the coder. But that’s not to say formatting isn’t important. That would be like saying the choice of canvas isn’t important to a painter. It affects how it feels to write CSS, how easy it is to read, how easy it is to navigate, and how easy it is to revisit and reacquaint yourself with previously written CSS.

Read Article / Comment »

Recently renowned usability expert Jakob Nielsen wrote an article Stop Password Masking in which he claims that hiding users passwords as they input them is bad practice. What he is referring to is the default browser behavior of <input type=password … /> elements, where text entered into them turns into bullets rather than showing the real characters typed. He says it reduces user confidence in what they type and thus beginning a string of problems like more typing errors, users choosing overly-simple passwords or copying and pasting complex ones (less secure). The effect is ultimately less user satisfaction and ponentially less profit for you.

Of course he is right about all that, but masking passwords isn’t something that was developed and made default just for shits and giggles. It is to keep prying eyes away from looking at your screen and learning your passwords. This fact isn’t lost on Jakob who suggests making it a checkbox-style option.

Admittedly, someone peeking at your screen to capture a password is pretty rare. I’m alone in my office right now, like I am most of the time, and I bet that plant in the corner doesn’t have any secret cameras in it. I’m sure a lot of you are in similar environments. But I’m of the opinion that leaving important security up to users is typically not a good choice. Gruber linked to Jakob’s article, noting that the iPhone has an interesting solution to this already in use.

Read Article / Comment »

What is “Float”?

Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called “text wrap”. Here is an example of that.

In page layout programs, the boxes that hold the text can be told to honor the text wrap, or to ignore it. Ignoring the text wrap will allow the words to flow right over the image like it wasn’t even there. This is the difference between that image being part of the flow of the page (or not). Web design is very similar.

In web design, page elements with the CSS float property applied to them are just like the images in the print layout where the text flows around them. Floated elements remain a part of the flow of the web page. This is distinctly different than page elements that use absolute positioning. Absolutely positioned page elements are removed from the flow of the webpage, like when the text box in the print layout was told to ignore the page wrap. Absolutely positioned page elements will not affect the position of other elements and other elements will not affect them, whether they touch each other or not.

Read Article / Comment »

Happy Fourth of July all! A lovely day filled with fireworks and usually a day off of work (in the US, anyway). It’s also the anniversary of CSS-Tricks. It’s been two years now. It actually feels like it’s been longer than that sometimes, just because of how far the site and myself have come. Last year we didn’t do anything special, but I thought this year we’d kick it up a notch and celebrate a little harder. That’s right, it’s giveaway time!

Check out the prizes below. If you want to enter, the only requirement is to fill out this survey. (Notice the form is a Wufoo form, one of the prizes!). Winners will be picked totally at random. Of course provide your real name and real email address on the form so I can reach you if you win.

Today, I am literally on the road in a UHAUL truck moving from Portland, OR to Chicago, IL. Portland is an incredible city, I’m just moving to be a bit closer to family and friends and for a change of scenery. Please forgive me if the posts are light for the next few weeks while I settle in.

Read Article / Comment »

Just a couple of quick tricks, from scratch, on coding up tables. We use the proper semantic tags for a table header and then set it to a fixed position so when scrolling the table the header is always visible. Then we implement row AND column highlighting with a bit of semi-clever JavaScript.