Up to this point, the most common use for CSS3 Transitions has been in conjunction with the well-known CSS :hover pseudo-class.
These types of transitions are pretty common, and you’ve probably seen or used something similar. But transitions are not just limited to use with :hover.
You can animate CSS properties via transitions using some other CSS techniques, a number of which I’ve outlined (with demos) in this article.
While fiddling around with the CSS3 box-shadow property, I stumbled across a method to put a double border on a single element. I thought to myself, that’s pretty cool, but obviously, it will only work in newer browsers that support box-shadow.
So I wondered how many different ways there are to create an element that has the appearance of a double border. Naturally, the most common way is by using a non-fluid background image. But that’s obviously not ideal.
So, I’ve compiled five different methods for doing this. Only one requires use of an image; the rest are pure CSS, with pretty good browser support for all methods. For brevity, in the code examples I’ve removed the common stuff like width, height, background, etc.
Choosing the right element for your markup is not a life-and-death situation. Nonetheless, I think HTML becomes easier to maintain and easier to read when content is marked up in a more meaningful manner, in line with the new developments in HTML5.
HTML5 has, as most of us know, introduced a new <aside> element, which I feel can replace the <blockquote> element in specific places where we would normally think a <blockquote> is more appropriate.
As much as we would like to turn a blind eye to the large number people using Internet Explorer and thus take advantage of CSS3 and HTML5 in all its glory, with certain projects, we really don’t have much of a choice.
If the traffic in a particular niche is IE-heavy, then you have to deal with that accordingly. If you go the Andy Clarke route then you may choose to use those new enhancements to the full, but allow a degraded experience in IE.
If you go the traditional corporate route, then you do everything you can to get IE to look and behave the same as the other browsers. That could mean ignoring a lot of new CSS3 and HTML5 stuff, or else it means filling in the gaps with scripts, hacks, and IE-only filters.
One challenge that developers have faced when creating forms is the inability to separate a form control from its parent <form> element without having to resort to some undesirable methods to get that form control to submit its data along with the form.
If you tried to do this in HTML4 or XHTML, the form would not submit the information from the form control that’s structurally outside the form.
As a result, if you wanted the data from the orphaned control to be submitted along with the rest of the form data, you’d have to implement some fancy JavaScript tricks to pass the information into the submission — which has many obvious drawbacks.
As many in the dev community are aware, earlier this week A Book Apart released their latest title, Responsive Web Design by Ethan Marcotte.
Due to the fact that I’ve been so busy with other stuff of late, I honestly have not experimented much with responsive design techniques and the related CSS3 media queries.
I intend to read Ethan’s book and will eventually get around to incorporating some of these techniques into future projects, and I’m hoping to eventually have a responsive layout for this site. But there are a few things about this whole responsive design trend that concern me a little bit.
The other day I sent out a tweet asking what everyone thought was the best source for browser usage stats.
I wanted to know if there were any sources I’d not yet heard of that offer reliable global statistics for usage stats for various browsers.
Well, I didn’t get too many responses to the tweet, but I decided to put together my own list of sources for reliable browser usage stats.
As many of you may be aware, validating your pages in HTML5 has become a whole new adventure.
Along with changes in what now constitutes “valid” and “invalid” markup, the HTML5 Validator (which, by the way, is the same tool that runs the W3C’s HTML5 validator) will provide some warnings about obsolete features in HTML5.
Feel free to go through that document on the W3C’s site, but here I’ll touch on some things that you may want to be aware of with regards to obsolete elements and attributes.
Over the winter and spring I’ve been pretty busy researching and putting the final touches on four chapters of a new book published by SitePoint.
The book is called HTML5 & CSS3 for the Real World and was officially launched on SitePoint this morning (North American time).
Two other authors took part in this exciting new project: Estelle Weyl — who probably doesn’t need much of an introduction if you’re familiar with many conference speakers in the web standards world — and Alexis Goldstein, a well-rounded programmer from Brooklyn.
If you’re starting to incorporate some HTML5 and CSS3 into your pages, then you’ve probably also looked into the possibility of polyfilling those features for older versions of IE.
Of course, you could instead opt for “progressive enrichment” and leave IE in the lurch while prettying things up for the newer browsers. That’s the method that Andy Clarke recommends, and it’s certainly a valid option.
But if for whatever reason (usually something political or the fact that the client demands it) you have to give IE a similar experience, then you face a very bizarre circumstance.
