Articles By: Louis Lazaris

How Does IE9 Handle HTML5’s New Semantic Elements?

By Louis Lazaris / October 4, 2010 / 5 Comments

Last week I posted a couple of charts that demonstrated how well the new IE9 Beta supports HTML5 features. The first chart listed all the new HTML5 semantic elements (<section>, <nav>, <article>, etc.) and I had originally placed a red “X” next to most of those elements.

Thanks to a comment from Richard Kimber, I later changed the red Xs to yellow checkmarks. It was my assumption that since IE9 does not list those elements as strictly “supported” on its “new features in IE9” pages, then that means we still need to use the HTML5 shiv script. Of course, if I had been paying attention, I would have noticed that the script is included using conditional comments that target every version of IE below IE9.

The reason for this is that while IE9 does not technically include the new semantic elements in its list of supported tags, it does have the ability to allow those elements to be styled.

HTML5 Support in Internet Explorer 9

By Louis Lazaris / September 28, 2010 / 49 Comments

Last week I posted a chart that listed support for CSS3 features in IE9. This post will consider the extent of IE9 support for HTML5 and related technologies.

The chart is divided into two sections. The first covers the new HTML5 markup elements, and the second covers the APIs and other stuff. My personal assessment is that IE9 is doing much better with CSS3 support than it is in HTML5, so don’t expect to be happy with the overall results shown in these charts. And as one commenter on the previous post pointed out, IE9 is still in Beta, so no need to get too distressed about anything not supported.

As usual, let me know in the comments if any of this is incorrect or if anything’s missing. The info for the charts was compiled from this page on MSDN, the super-useful When Can I Use… app, and this layout engine comparison of HTML5 features on Wikipedia.

CSS3 Support in Internet Explorer 9

By Louis Lazaris / September 23, 2010 / 120 Comments

If you’re like me, you’re probably wondering, amidst all the hype surrounding the release of IE9 Beta, whether or not Microsoft has finally begun to keep up with the other browser makers.

Has IE9 changed Microsoft’s reputation of always lagging behind? Does the Beta realease of IE9 indicate that Microsoft is finally keeping up with the Joneses? You be the judge.

I’ve created a few charts showing CSS3 support in IE9 Beta. The list does not include every conceivable CSS3 property or selector. I’ve tried to stick to the well-known stuff, and I’ve also included a list of pseudo-selectors and pseudo-elements.

How Do You Decide Which Web Design or Programming Books to Buy?

By Louis Lazaris / September 21, 2010 / 9 Comments

I think it goes without saying that web design bloggers love to read (similar to how it goes without saying that Germans love David Hasselhoff). If you’re like me, then it’s quite likely you’ve purchased the odd web design or programming book that you weren’t all too thrilled with.

Books can be expensive, especially if you only buy them brand new and when they’re first released. And if you live in a country outside North America or the UK, then they could be even more expensive because of shipping costs.

So before purchasing a new design or programming book, I usually do a few things to increase my odds of being happy with the purchase.

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

By Louis Lazaris / September 14, 2010 / 36 Comments

One 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.

Decisions CSS Developers Need to Make

By Louis Lazaris / September 8, 2010 / 18 Comments

Because there are so many ways to skin the proverbial cat, as CSS developers, we pretty much have free reign to do things as we please.

While some things in CSS are pretty straightforward (like if you want to add a rollover color, you use :hover), that is not the case with others. In many cases, there is no set way to accomplish a single task in a layout or with regards to some other CSS-based technique.

In such cases, it’s up to the developer to choose what he wants to do based on his own preference, his workflow, his knowledge of CSS, and experience in dealing with certain aspects of the language.

Maintainable CSS3 Using PHP

By Louis Lazaris / September 2, 2010 / 37 Comments

One 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.

Always Pre-Load Mandatory Content

By Louis Lazaris / August 26, 2010 / 3 Comments

There are some cases during the user experience where preloading content is not a good idea.

For example, if the user is faced with multiple options as to what content he will choose, then it would not be a good decision to preload all content. This would add unnecessary HTTP requests and bandwidth for both client and server, and would degrade the user experience.

But in other cases, using JavaScript (or some other means) to preload video or images is the right choice, because of the path the user has chosen to take. The website for Major League Baseball has a video page that I think could benefit from this kind of improvement.

CSS Counters: counter-increment and Friends

By Louis Lazaris / August 24, 2010 / 12 Comments

The 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.

Illustrating the Potential Power of Design

By Louis Lazaris / August 18, 2010 / 5 Comments

In our industry, those who are well-trained in the principles and strategy of design (no, I don’t think I fall under that category) put much emphasis on the potentially powerful effect that a good design can have.

Design that is arbitrary and unplanned might succeed simply because of its ease of use, or its familiarity. But design that is well thought out and planned with specific goals in mind has the potential to cause users or customers to make decisions that they might not normally make.

Yes, I suppose this is a form of manipulation and some people might not agree with it. But I think as long as you stay within certain boundaries, manipulation through design doesn’t cross any lines, and it’s really just a tool at the disposal of the website/owner/designer.