[This post is re-published from a piece I wrote for the January 2013 edition of the Centriq Alumni Network newsletter.] Continuing the HCJ series (HTML5/CSS3/jQuery) we started last month, let's push on with CSS3. As noted in the opening salvo for the
series, this is intended to introduce you to these concepts and get you up and running
with some new code and implementations that will work in many environments. It
is by no means an exhaustive resource.
The next piece in the series will introduce incorporating some jQuery into your websites.
CSS3 Usage
Over the years, CSS3 has begun to be supported in parts by more and more browsers. And this is a good thing, because CSS3 promises not only more formatting options, but also finer control over selecting tags to format on the page. (This improved ability to target items in the DOM ties in well with JavaScript and jQuery, as we'll discuss more in the next installment of this series.)
Use Well-Supported Properties But Be Prepared For Non-Compliance
Although there's still lots of CSS3 that receives only partial support (or none) in various browsers, that doesn't mean we can't use some CSS3. There are various philosophies on this, but a common perspective is that if a CSS property we wish to use is fairly well supported, we use it – with the understanding that it may be ignored by some browsers. If you do this selectively, there shouldn't be too much "code bloat" where the users are wasting download time to get formatting that will be ignored by their browser anyway.
For example, you can use a CSS property for multiple text-columns (like those in a newspaper) on one of your
div tags – but you will need to be prepared for the fact that no form of Internet Explorer except IE10 supports that CSS. (IE10, by the way, is only installed by default on Windows 8 machines; and is currently used by only 0.25% of users globally.) So that CSS will be ignored by most forms of IE, and your page will display that
div's content in the standard 1-column layout.
Push Compliance with Modernizr and Polyfills
On the other hand, if a particular CSS property and its formatting
is truly mission critical and we know some browsers do not inherently support it, we could try to
force the browser to implement that formatting by using
Modernizr and polyfills.
Modernizr is a free service that incorporates both the HTML shiv we discussed in the last installment, and JavaScript that performs
feature detection. Then
polyfills (more JavaScript) can be used to "help" the browser support the desired CSS3 or HTML5. This of course can still fall victim to the limitation that the browser in question must not be configured to block the JavaScript or your desired formatting can still fail. And this also adds more code to the download, and the potential for code bloat again – especially if you overuse the technique. Fortunately, to avoid this, the people at Modernizr do make it easy for you to generate custom JavaScript code to "force support" for
only the desired CSS features you choose.
Using the Modernizr and polyfills approach may take more work, but if used with some care to only force support for truly important features, it can ensure a more consistent implementation of your CSS across browsers.
CSS3 Resources
Deciding which CSS to use can often come down to how well supported it is. For that, I have two quick recommendations:
- CanIUse.com (solid stats and information)
- CSS3Test.com (interesting at a glance for testing features of the browser you're currently using)
To start digging into using Modernizr with polyfills, I'd recommend the following sites:
CSS3 Formatting Highlights
The following is a quick sampling of some fairly well-supported CSS3 properties you may want to start using in your projects.
Text Shadows
Adding a drop shadow to your text uses the
text-shadow property. Here's the template for using it:
text-shadow: right-offset | down-offset | blur-radius | color
And two examples:
h1
{
color: green;
text-shadow: 5px -3px 5px red;
}
h2 {text-shadow: 3px 3px;}
So the
h1's would be green with a red drop shadow 5px to the right, 3px above (negative offsets reverse the direction), and a blur radius of 5px.
The
h2's would have a
text-shadow of the default color that's 3px to the right and down.
Rounded Corners and Box Shadows
For block-level elements, sometimes you want to shave off the hard edges from those corners and/or add drop shadows to them. This has been popular in web and UI design for awhile, but previous to proper CSS support, required cumbersome image manipulation and CSS hacks to make it work. Of course, for this to work, you need some borders to round, so that's your first pre-requisite. Also, this is another CSS feature that has mixed and sometimes proprietary support in different (older) browsers, so to be safe, you may want to use both proprietary and standard property variants.
The templates:
border-radius: radius-amount-for-all-corners //set equally
OR
border-radius: top-left | top-right | bottom-right | bottom-left //clockwise
box-shadow: right-offset | down-offset | blur-radius | spread | color
Examples:
aside.pullquote
{
border: 3px solid blue;
border-radius: 5px;
-moz-border-radius: 5px; //for older Firefox versions
}
#wrapper
{
border:3px solid blue;
border-radius: 5px 3px 3px 5px;
-moz-border-radius: 5px 3px 3px 5px; //for older Firefox versions
box-shadow: -3px -3px 3px 3px green;
-moz-box-shadow: -3px -3px 3px 3px green; //older Firefox versions
-webkit-box-shadow: -3px -3px 3px 3px green; //older Safari/Chrome versions
}
So any
aside with a class of
pullquote will have 5px radius for its rounded corners on all sides.
The tag with an id of
wrapper will have left corners with 5px rounding, right corners with 3px rounding. Also, it will have a green drop shadow outside the borders of 3px to the top and left, with 3px radius and spread.
Text Columns
As we've already mentioned, you can add CSS text columns for a block-level element, and style them with spacing and/or a line between the columns. (Also, as noted previously, this is not supported in most forms of IE as of the time of this writing).
Templates:
column-count: number-of-columns;
column-gap: width-between-columns;
column-rule: border-specs-between-columns; //defaults to none if unassigned
Example:
article.threecol
{
//3 variants for column count
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
//3 variants for column gap
-moz-column-gap: 15px;
-webkit-column-gap: 15px;
-column-gap: 15px;
//3 variants for column rule
-moz-column-rule: 2px dashed black;
-webkit-column-rule: 2px dashed black;
-column-rule: 2px dashed black;
}
So, for browsers that support it, the
article tag with a class of
threecol will have 3 columns with a spread between them of 15px, as well as a 2px dashed black vertical line.
Background Gradients
You can set a background gradient (where solid colors "fade" into other solid colors) through a variant implementation of the
background-image property. Again, this is currently a property supported mostly through the proprietary browser variants, so you'd typically use them all if you're going to use them.
Template:
background-image: linear-gradient(direction | color % | color %);
background-image: -moz-linear-gradient(direction | color % | color %);
background-image: -webkit-linear-gradient(direction | color % | color %);
Examples:
header
{
background-image: linear-gradient(left, red 20%, olive 70%);
background-image: -moz-linear-gradient(left, red 20%, olive 70%);
background-image: -webkit-linear-gradient(left, red 20%, olive 70%);
}
aside
{
background-image: linear-gradient(45deg, gray 20%, blue 30%, green 70%);
background-image: -moz-linear-gradient(45deg, gray 20%, blue 30%, green 70%
background-image: -webkit-linear-gradient(45deg, gray 20%, blue 30%, green 70%);
}
So the
header will go from red to olive, fading in from the left, beginning the red-to-green transition 20% after the starting point and ending in solid green 70% from the starting point to the end.
The
aside will fade in at a 45 degree angle, from gray to blue to green, starting the first transition at 20% of the distance, then the next at 30% and then finally at 70%.
This can all be a little tricky, so I highly recommend playing with it and/or downloading the free
CSS Grady or
ColorZilla app for the Chrome browser to interactively play with gradients and see CSS code generated that you can copy or tweak.
CSS3 Targeting Highlights
The following is a quick round-up of a couple of fairly well supported CSS3 selectors you may want to start using to target tags better, with less markup. Why add tons of classes to your HTML tags to get them systematically formatted a certain way if you can do it just as well with some slick pseudo class and contextual selectors?
Here are a few quick targeting selectors that you may want to consider using.
Some Pseudo Class Selectors
Sometimes you want set the formatting differently for the first or last item in a container tag – like the last bullet point in an unordered list, or the first row in a table. Example:
ul li:last-child
{
margin-bottom: 30px;
}
tr:first-child
{
text-align: center;
}
So the last list item in an unordered list would have 30px added beneath it. And the first table row would have its content centered.
On the other hand, sometimes you want to set repeating formatting for alternating items (like rows in a table) and so you might want to set every "even" or "odd" child to receive certain formatting. Examples:
tr:nth-child(even)
{
color: yellow;
background-color: green;
}
tr:nth-child(odd)
{
color: white;
background-color: black;
}
So the even rows in a table would be yellow on green, while the odd numbered rows would be white on black.
What about selecting the immediate child
li's in an unordered list, but not the ones nested in that
ul's child tags? Or selecting a certain tag when it immediately follows a particular other tag?
ul > li:last-child //only last child LI of UL, but only direct-child, not nested descendant LI tags
{
margin-bottom: 30px;
}
h1+p // select P tags that immediately follow an H1
{
margin-left: 2em;
}
There are many more CSS selectors you may not have worked with, but that's a few to give you a taste, and they are pretty well supported now.
Additional Development
As noted in the previous installment of this series, I recommend you pick up the books we're using in our HTML/CSS/jQuery class now for a fuller treatment of these topics:
- Murach's HTML5 and CSS3 (including intro chapters for JavaScript, jQuery, and jQuery mobile) by Zak Ruvalcaba and Anne Boehm
- SitePoint's jQuery: Novice to Ninja by Earle Castledine and Craig Sharkie
Remember to take advantage of being part of the Centriq alumni network, and best wishes on your continuing career development!
