CSS

CSS Tutorials

Here’s Something Interesting About the CSS Color Property

CSS ColorAs anyone who codes CSS knows, the color property in CSS defines the color of the text in a specified element. I’ve often wondered why this property was not named text-color or something similar.

A comment that was posted today on one of my older articles by someone named Stu Goymer actually instigated my research into this, but he raised an interesting point: Why doesn’t the font shorthand property allow the color to be defined?

Well, according to the spec, here’s what the color property is supposed to do:

What’s the Difference Between “:before” and “::before”?

Pseudo-FruitsWhen using or researching CSS pseudo-elements, you may have come across different syntax for the :before and :after pseudo-elements, specifically in the form of a preceding double colon, instead of the traditional single colon. This seems a little confusing at first, but there’s actually a pretty simple explanation.

I had assumed that there would be some difference in the way each functioned, but that’s not the case, as the short and long answers below make clear.

The CSS3 Resize Property

CSS3 Resize PropertyHere’s a CSS3 property that has very little support and that I’m not sure has too many real world applications or if it would even be extremely beneficial — the CSS3 resize property.

The resize property is part of the W3C’s Basic User Interface Module, which is in the candidate recommendation stage.

Unfortunately, the resize property is listed in the Features at Risk section of that same document, so it’s quite possible that this feature will be removed if browser-makers don’t support it. Nonetheless, here’s a quick review of exactly what this property is all about so you can decide if it’s of any practical use in your projects.

Things Worth Noting About CSS Attribute Selectors

Things Worth Noting About CSS Attribute SelectorsThe main reason CSS attribute selectors have been avoided up to this point is their complete lack of support in IE6. But since IE6′s market share is continuing to slowly but steadily decline, it’s becoming safer to use them.

I’m not going to go through the basics of CSS attribute selectors and their syntax. There are some pretty good resources explaining them, which I’ll link to at the bottom of this post. So if you don’t have at least some grasp of what this CSS feature is all about, please check those out first.

This article will go a little further and focus on some interesting facts and bugs surrounding attribute selectors that you may not have known.

A Problem With Using “overflow: hidden” to Clear Floats

on | 36 Comments

Don't Use overflow: hidden to Clear Floats on Your ContainerOne of the layout issues that has for years plagued CSS developers is the concept of clearing floats. There have been numerous articles and comment debates discussing what is the best way to clear your floats.

One method that was proposed back in 2005 was to simply add “overflow: auto” or “overflow: hidden” to the containing element in order to easily clear the floated children.

I think this is, overall, a pretty good way to clear floats. But, as with any CSS workaround, there is a potential drawback if this method is used on a large containing element.

Maintainable CSS3 Using PHP

Maintainable CSS3 Using PHPOne of the primary challenges that arises when dealing with CSS3 properties is the maintenance of the different proprietary prefixes. At least one solution has been offered to help prevent the so-called “forking” that results.

I think there is another way to help maintain the various repetitive CSS3 properties. What I’m proposing here will prevent you from having to organize your proprietary properties and will solve the problem of having to repeat the same values over and over again.

Some of the maintenance issues that arise can be avoided if you use PHP to generate your CSS, and use PHP’s capabilities to abstract a multiple lines of CSS3 into a single line.

CSS Counters: counter-increment and Friends

Using counter-increment in CSSThe CSS2.1 spec introduced a new technique allowing developers to combine three CSS properties and a pseudo-element to create auto-incrementing counters — similar to what is displayed in an ordered list.

While counters for lists are limited to <ol> or <ul> elements and only with simple incrementation, the new counter method introduced in CSS2.1 allows for integers to be prepended to any set of elements, and is quite flexible.

This technique is a bit confusing because it uses multiple CSS properties, and looks different than most CSS code. I hope to clarify how it’s used and I’ll run down some possible ways it can be implemented, along with some benefits and drawbacks.

Animated Sprites with CSS3 Transitions

Animated Sprites with CSS3 TransitionsI don’t think I’ve seen this specific method used yet, but it seems like one of those super obvious techniques. This technique is not really anything new, it just combines two concepts that most CSS developers should be fairly well familiar with by now.

CSS sprites are a method for creating complex rollovers without using JavaScript.

CSS3 animations (or more accurately, CSS3 transitions) is a new feature that has been added to some newer browsers, most notably WebKit-based browsers like Chrome and Safari. Like sprites, CSS3 animations don’t require JavaScript.

Give Your CSS Some Room to Breathe

Give Your CSS Some Room to BreatheJust to clarify beforehand, this article does not constitute an argument in favour of using multi-line CSS blocks over single-line CSS blocks.

But once in a while I peek at people’s CSS code, or try to follow along with a tutorial discussing some CSS topics, and notice that the CSS isn’t very easy to scan through, and the main problem is often white space, or you could say “breathing room”.

So, I’m going to explain here how I think CSS should be laid out (mostly using examples that incorporate multi-line blocks) for easier readability and scannability.

Word-Wrap: A CSS3 Property That Works in Every Browser

Word-Wrap: A CSS3 Property That Works in Every BrowserOkay, this is not exactly the kind of CSS property that’s going to be used in every design. But it is a very useful one when you need it, and some might say it’s much more practical than some of the fluffy new CSS3 features like transitions and whatnot.

The property I’m talking about is the CSS3 word-wrap property, and believe it or not, it works in every single browser, including all versions of IE. In fact, it was even supported as far back as IE5.

While we might normally associate CSS3 with modern browsers like Safari and Chrome, it should be noted that the CSS3 spec goes back to 2001. So a few properties (like word-wrap) have had support for some time now.