The other day Paul Irish posted an article that collected together responses to a question that he and Yehuda Katz asked their Twitter followers.
One of the wishlist items a few people mentioned was “CSS blend modes” with a use case of tinting an image on hover (or tinting it statically, then removing the tint on hover or by some other interaction). My immediate thought was: That should be simple enough, shouldn’t it?
This is a question that has been answered in a number of different places. Unfortunately, the answers in some instances have not been good ones. In fact, they’ve either been way too optimistic and/or presumptuous — or else just downright wrong.
Also, when we use the term “HTML5”, what exactly are we referring to? HTML5 covers a number of different features and technologies, some of which have nothing to do with SEO. So, generally speaking, when people ask this question, they’re usually referring to HTML5’s new semantic elements. So, I’ll primarily focus on those here.
Earlier this year, the folks at O’Reilly were kind enough to send me a review copy of Canvas Pocket Reference: Scripted Graphics for HTML5 by David Flanagan.
Admittedly, this is not a truly legitimate review because, well, I haven’t actually read the entire book. But as you can tell from the title, this is not exactly something you’d read cover to cover and get much out of. I’ve gone through some of it, and since I have no immediate plans to use HTML5’s canvas element or its related API, I probably won’t be referring to it much any time soon.
Nonetheless, there’s good reason for a positive review here.
Most good developers by now accept the fact that pixel-perfect cross-browser CSS is not only unnecessary, but also totally impossible.
Of course, when we speak of the challenge of “cross-browser” CSS, we’re really saying “How can I make this work in Internet Explorer versions 6-8?” — because those are really the most problematic browsers.
Although I’ve written before about cross-browser CSS, and I still stand by just about every word in that article, I thought I’d reiterate my feelings on this subject by providing what I feel is the best workflow for getting your CSS to be as efficient, hack-free, and maintainable as possible while providing as similar an experience in all supported browsers.
I don’t mind drop-down menus. They give designers and information architects options for using screen space wisely. But I think many sites do themselves a disfavour by using them in an inconsistent manner.
The popular travel site Carnival Cruise Lines is a perfect example of what I’m talking about. I love the design of their site. For a travel website, it’s very good; it’s clean, and professionally designed. But I have one small problem with their drop-down menus.
If you’ve dropped support for IE6 and/or IE7, then your repertoire of CSS hacks is probably pretty minimal. Here I outline the methods I feel are the best ways to write IE7- and IE8-specific CSS.
If you’re a beginner and you’re developing HTML and CSS using an external stylesheet, you might notice that in some browsers, under some circumstances, the changes you’ve made to your CSS don’t take effect immediately.
In an HTML page, you can add CSS in a number of different ways, which I explain below. After I show you each method, I’ll tell you which method is best, and why.
Maybe there’s a technical term that I’m not aware of for this type of centered, line-splitting heading. Whatever it’s called, I’ve used it in a project’s footer in the past, where I’ve divided the footer into sections with headers that overlay a horizontal line.
I wanted to try to do this as efficiently as possible, and without images. I came up with three solutions with pure CSS and one that uses JavaScript.
If you haven’t yet used CSS3 transitions extensively, here’s something you may not have picked up on.
As I’ve outlined before, transitions can be triggered in a number of ways, and even via JavaScript. The reason for this is because the actual transition is not dependent on any particular event. Although it is the event that triggers the transition, the transition itself is completely separate from the event (as it should be).
Because of this, you’ll notice a slightly quirky behaviour if you place the transition on the part of your CSS that triggers the event.
