New Book: HTML5 Boilerplate Web Development

HTML5 Boilerplate BookA couple of weeks ago Packt Publishing contacted me and gave me a free e-book version of Divya Manian’s new book HTML5 Boilerplate Web Development.

For a while now I’ve been wondering who was going to write a book on HTML5 Boilerplate. Although much of what’s in Boilerplate is “plug and play” (i.e., it just works, even if you don’t know what it does), I think many people are intimidated by it and would like a deeper understanding of what’s going on, and what is the optimal way to employ this popular framework. So a book on this topic is a great idea.

IDs Will Not Make Your Documents More Semantic

Stack of BooksBefore I get into the meat of this post, I’ll just provide some context. Last week, Harry Roberts posted a fantastic article discussing his view of bad CSS. In that article, as he’s done before, he disourages the use of IDs as selectors.

In response, Jeffrey Zeldman tried to defend the use of ID selectors. I posted a few comments in response to Jeffrey and another commenter, explaining why their views were wrong.

IE10 CSS Hacks

IE10 HacksLast year, Microsoft announced that IE10 will not be supporting conditional comments. With their history, this is obviously a risky move. Up to now, to target quirky behaviour in IE6-9, developers have been using conditional comments, conditional classes, and other IE-specific hacks.

But without conditional comments in IE10, the only options we’re left with to target CSS problems are hacks or browser sniffing — and we certainly don’t want to resort to the latter.

Interestingly, there have been a few posts and code snippets floating around that apparently do target IE10 specifically using a hack. Below is a summary of these three techniques, for reference.

CSS Things That Don’t Occupy Space

on | 8 Comments

CSS Things That Don't Occupy SpaceIn most cases, when you place an element on the page in your markup, if you don’t specify any special styles, it will occupy exactly the same space that it appears to occupy visually.

In other words, if you place a box sized at 200px by 200px on your page, anything you place after it in the source order, with no further styles added, will occupy the space below or beside the green box, outside of those set boundaries.

But not everything on an HTML page occupies space that is honored by other elements. I thought it would be interesting to list and describe all the things in CSS that don’t occupy this kind of physical space in an HTML document.

Custom Zenburn Theme for Sublime Text 2

Zenburn Theme for Sublime Text 2For a while now, I’ve been using Notepad++ with a customized version of the Zenburn theme, which was originally created for Vim.

This week I finally started fiddling around with Sublime Text 2, and I like what I’ve seen. Although I like the default Monakai theme, I prefer my old customized version of Zenburn from Notepad++. So I forked the Zenburn repo and made my alterations.

Clearing Floats: Why is it Necessary Even in “Modern” Browsers?

Clearing Floats: Why is it Necessary Even in The other day, someone asked me the following question: “If I understand it right clear float is automatic in most modern browsers right?”

If you’re new to CSS, then it would seem that the answer to this question should be “yes, of course — modern browsers don’t have these types of bugs!” But the necessity to clear floats is not a browser bug; it’s actually, well, more of a CSS feature. And it’s still needed in so-called “modern” browsers (assuming you’re using floats for layout).

Animation Scripts, Libraries and Plugins

on | 6 Comments

Animation Scripts, Libraries and PluginsRecently, I’ve bookmarked a bunch of animation-related scripts, libraries, and plugins. Although CSS3 has certainly made animation easier for us, sometimes we need a little bit of help.

There are other libraries that are more popular than these (like RaphaĆ«l.js), but these are some mostly lesser-known scripts that I’ve stumbled across in recent months.

JavaScript Array Methods Reference

JavaScript Array Methods ReferenceBack in July I wrote a post called JavaScript String Methods Reference, outlining many of the ways strings can be manipulated in JavaScript.

Another area where JavaScript has a number of different methods available for use is Array manipulation, which I’ll cover in this post. As usual, I’ll do my best to keep it simple and accurate, but if I’ve erred or if you think I’ve omitted anything important, please comment.

Default CSS Display Values for Different HTML Elements

on | 17 Comments

Default Display Values for Different HTML ElementsEvery element in an HTML document accepts a value for the CSS display property. The possible values you can use for display are many.

The three most commonly used values are none, block, and inline. But what if you don’t define a display value for an element? Well, all elements have an initial or default state for their display value. Let’s consider some of these and see some interesting things you might not have known.

New Section: The CSS Network

on | 4 Comments

New Section: The CSS NetworkIf you’ve followed Smashing Magazine for some time, you know that they at one time had a section of their site called “The Smashing Network” which had a feed of links to articles from various sites in the web development and design blogging industry. That section is now gone, though.

To some extent, I miss the Smashing Network. Not all of the articles in the Smashing Network were of great quality, but I liked that I could scan a few pages of links every couple of days to see what kinds of CSS articles were being published in the Network.