Impressive Webs

Maintainable CSS3 Using PHP

Louis Lazaris — Thu, 02 Sep 2010 15:00:35 +0000

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

Louis Lazaris — Thu, 26 Aug 2010 15:10:31 +0000

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

Louis Lazaris — Tue, 24 Aug 2010 15:10:38 +0000

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

Louis Lazaris — Wed, 18 Aug 2010 15:11:51 +0000

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.

Don’t Use PHP for Browser Detection

Louis Lazaris — Mon, 16 Aug 2010 15:11:53 +0000

In the comments of a recent article discussing conditional comments someone mentioned that they prefer to use PHP to detect which browser (user agent) and/or operating system is in use, then they display a custom class for the <body> tag and target the browser accordingly in their CSS.

I've known for some time now that this is wrong. I was told that a user agent can be faked, so the people I've worked with discouraged this method, and I've never used it.

In no way am I an expert in this particular area, so I'm not claiming here to be able to fully explain exactly why we shouldn't do this, but a little bit of quick research on this topic shows that server-side browser detection is not a good idea.

I'm not going to drag each of these points on (mostly because I don't have the technical expertise in this area), but instead I'm just going to provide brief quotes and links that discourage the use of this method and provide further insight into the matter.

Animated Sprites with CSS3 Transitions

Louis Lazaris — Thu, 12 Aug 2010 15:11:08 +0000

I don't think I've seen this specific method used yet, but it seems like one of those super obvious techniques. This technique is not really anything new, it just combines two concepts that most CSS developers should be fairly well familiar with by now.

CSS sprites are a method for creating complex rollovers without using JavaScript.

CSS3 animations (or more accurately, CSS3 transitions) is a new feature that has been added to some newer browsers, most notably WebKit-based browsers like Chrome and Safari. Like sprites, CSS3 animations don't require JavaScript.

Stop Perpetuating the Myth – People Do Read Online

Louis Lazaris — Tue, 10 Aug 2010 15:10:35 +0000

This post might sound like an opinionated rant, so I apologize up front for that. But sometimes I write stuff because I get annoyed at how quick people are to jump on bandwagons and follow trends, and it often comes out sounding a little harsh. Even I've been guilty of following trends at times, as I'm sure we all have. But sometimes we have to be a little more honest about the realities of our industry.

This myth about the lack of reading online has, from what I can tell, spread to virtually all corners of the internet market, and I think it has gone too far.

First let's clear up a few things: I'm not denying the research that has been done in this area, and I'm not saying that we should ignore those findings. Instead we should recognize the importance of gaining loyalty in readership, and work towards creating content that users will look forward to reading. Let me explain what I mean.

Give Your CSS Some Room to Breathe

Louis Lazaris — Thu, 05 Aug 2010 15:12:36 +0000

Just to clarify beforehand, this article does not constitute an argument in favour of using multi-line CSS blocks over single-line CSS blocks.

But once in a while I peek at people's CSS code, or try to follow along with a tutorial discussing some CSS topics, and notice that the CSS isn't very easy to scan through, and the main problem is often white space, or you could say "breathing room".

So, I'm going to explain here how I think CSS should be laid out (mostly using examples that incorporate multi-line blocks) for easier readability and scannability.

Things You Might Not Know About Conditional Comments

Louis Lazaris — Tue, 03 Aug 2010 15:10:35 +0000

Use of conditional comments to target certain versions of Internet Explorer is pretty commonplace nowadays, and is generally seen as the best-practice method for including separate styles for IE.

Of course, I've argued in a previous article that if your IE-only styles are minimal, then you should just include them in your main stylesheet, a notion that others have echoed.

But conditional comments have some unique possibilities and quirks that maybe you haven't considered before, or have simply forgotten. Here is an overview of some things you may not know about conditional comments.

Making Unobtrusive JavaScript Practical Again

Louis Lazaris — Wed, 28 Jul 2010 15:10:43 +0000

Maybe it's just me. Maybe I'm a JavaScript debugging n00b, or maybe it's my limited knowledge of Firebug.

While I fully support the use of unobtrusive JavaScript in all projects, I do find it has one weakness: Connecting the HTML element with the code that acts upon it.

If you've been coding JavaScript since the dark ages of the web, you'll know that JavaScript used to be commonly implemented in an obtrusive fashion that mixed markup with behaviour, which made your code messy, and added extra code to every individual page rather than putting it in an external reusable file.

Here is a simple example: