Web Design Tutorials

This section of Impressive Webs contains articles and tutorials that describe a particular front-end development technique in detail with code samples and often a demo page and download links. Some tutorials are step by step, and others are more generic.

thatsNotYoChild.js — Fixing Parent-Child Opacity

on | 9 Comments

Parent/Child signOne of the posts on this website that consistently gets a significant amount of traffic (5000+ page views this month alone) is a ridiculous article I wrote that discusses how to make a child element not inherit the opacity setting of its parent.

As we all know, opacity property can be annoying in this area.

Basically, if a parent element has an opacity value set at, say, 0.5, all of its children will inherit that opacity setting, and there’s no way to reverse that opacity on the child elements.

Modular CSS with Media Queries and Sass

Modular blocksMost developers nowadays are recognizing that if you’re developing large applications that have different views and states, it is best to take a modular or object-oriented approach to your CSS development.

When you throw media queries into the mix, however, the you can lose some of the benefits of modularity — code that’s easy to read, update, and maintain.

Let’s look at different ways we can write our media queries, starting with what might be the most common approach — especially with those not yet using a preprocessor.

When to Avoid the Descendant Selector

Descendant Ducks crossingThose of us who have started using modular or object-oriented CSS principles have learned to avoid, as much as possible, the use of the descendant selector (or, more accurately, the descendant combinator).

A selector that uses the descendant combinator looks like this:

JavaScript ‘this’ in Different Contexts

JavaScript thisJavaScript has a reserved keyword called this that references something different depending on where you are in a JavaScript program.

In this post I’m going to summarize, by example, some different contexts and discuss what “this” would represent in each case. Note that all of these examples assume you’re developing client-side JavaScript in a browser.

My Current JavaScript Design Pattern

My Current JavaScript Design PatternWith every major JavaScript project, I’ve tried something new, improving on what I’ve written before. Currently, whenever I build something from scratch, I use a variation of what Addy Osmani and others commony refer to as the module pattern.

Here is my version below, which assumes jQuery, and then I’ll provide some explanation of what’s going on here and how I use it:

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.

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

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.

Sass on Windows with Scout App

Sass on Windows with Scout AppThis is a follow-up post to my previous article, posted yesterday, that discussed how to get up and running with Sass on Windows. At the end of that post I introduced an alternative to all the command-line based instructions.

So here I’ll quickly cover that alternative — Scout App, a free Mac and Windows-based native app produced and maintained by developers at Mutually Human.