Articles By: Louis Lazaris

A New Book on HTML5 and CSS3

By / / 7 Comments

A New Book on HTML5 and CSS3Over 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.

The Browser Performance Pickle

By / / 14 Comments

The Browser Performance PickleIf 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.

A Bookmarklet to Fix Wikipedia’s Layout in a Wide Browser Window

By / / 12 Comments

A Bookmarklet to Fix Wikipedia's Layout on a Wide Browser WindowI have a wide monitor and I like my windows to be maximised (I’m on Windows 7). I also like when Chrome is maximised, because I usually have about 7,623 tabs open at any given time, so the bigger the window, the better.

Thus, when I visit a page on Wikipedia, it’s unreadable — because Wikipedia’s layout is fluid and it fills the whole monitor. It normally looks like this:

Background-Clip in CSS3

By / / 16 Comments

Background-Clip in CSS3With all the excitement over the flashy new stuff in CSS3 (like transitions, transforms, and keyframe animations), some other properties may get pushed into the … well… background.

The CSS3 spec has introduced some new properties related to backgrounds. Here’s a quick and dirty description, along with a few examples, of one of those properties: background-clip.

An Option to Mimic CSS3 Text Shadow in Internet Explorer

By / / 18 Comments

An Option to Mimic CSS3 Text Shadow in Internet ExplorerBaseball season is in full swing in North America and I’ve noticed some nice changes to the design of the MLB.com website. In addition to changing their Flash content slider to JavaScript, they’ve also started to supercharge their design with some CSS3 enhancements.

On the game wrap-up pages, there’s some subtle use of rounded corners, opacity, and text-shadow, the latter of which I’ll be focusing on here.

The experience on the site is pretty similar on older versions of IE as it is on modern browsers. Here’s a screenshot of a game wrap-up page in IE6:

CSS3 Linear Gradient Syntax Breakdown

By / / 38 Comments

CSS3 Linear Gradient SyntaxThis is not going to be an extensive post, but just something to serve as a quick reference, along with some interesting points from the spec.

In another post, I’ll break down CSS3 radial gradients, but for now I’ll just focus on linear, to keep things simple.

Here’s Something Interesting About CSS Borders

By / / 21 Comments

Here's Something Interestiong About CSS BordersAfter years of developing CSS layouts and reading web design blogs and CSS books, I still can’t believe I come across things that I don’t know about super-common CSS properties.

Maybe it’s just me; maybe I’m just a creature of habit and fail to look closely at things I’m really used to seeing, and I forget that there’s more to CSS than what I’ve personally discovered and learned so far.

Well, while reading Christian Heilmann’s chapter in the Smashing Book 2, I noticed he used the following code snippet when showing some CSS (edited for brevity):

Why Developers Should Be Studying HTML5’s Design Principles

By / / 6 Comments

Why Developers Should Be Studying HTML5's Design PrinciplesThis is not going to be a long article, but just a quick note about something that all front-end developers should be paying attention to.

If you don’t already know, the W3C has formulated a fairly brief, yet valuable document called HTML Design Principles that outlines exactly what principles have guided and continue to guide the creation and evolution of HTML5 and its related APIs and other technologies.

Targeting HTML5’s Semantic Elements with CSS

By / / 15 Comments

Targeting HTML5's Semantic Elements with CSSIt would seem that with the introduction of HTML5’s semantic elements, styling those new elements should be an easier task. But as I’ve started to use HTML5 more, I’ve realized that it takes quite a bit of forethought to create maintainable CSS that targets the new semantic elements in a future-proof way.

In some cases, it could be fairly straightforward, but in others it’s a little disheartening because targeting the new elements actually creates more verbose markup.

Let’s consider a few examples. If you had a page that used the <header> element to hold the logo, nav, etc, and the <footer> element to hold the website’s footer, then your CSS would look something like this:

A New Way to Trigger hasLayout on Elements in Older Versions of IE?

By / / 4 Comments

A New Way to Trigger hasLayout on Elements in Older Versions of IE?I’ll be the first to admit that I haven’t given this too much thought, so I admit there could be some drawbacks I haven’t considered, but I thought I’d throw the idea out there and see what my readers think.

Suppose we have an element that, for design and flexibility purposes, has no set width, and no set height. But obviously it has content, so in most browsers it expands to hold its content. We want that element to have a linear gradient background using CSS3, and we add a Microsoft proprietary filter to cover all versions of IE.

Here’s the element, demoed live on the page, with the aforementioned characteristics:

⭠ Newer Articles Older Articles ⭢