BlogmyQuery – BMQ

You might consider yourself knowledgeable, but you’ve probably never heard of this powerful communication and design technique that I’m about to share. I’m sure you’ve seen it in practice but never knew it was working on you — that’s how good it is. I’m here to shed light on this technique so that you can use it as an approach to your design or writing.

See what I did there? I introduced you to dissonance by using the technique itself. If used correctly, it can enhance your approach to design and copywriting in certain projects. Welcome to designing with dissonance!

What Is Dissonance?

To understand dissonance, knowing first what consonance is would help. Consonance is when you feel comfortable with your beliefs; a certain harmony exists in how you’re feeling right now. You feel good. Dissonance occurs when something disrupts your consonance. It challenges your beliefs and makes you feel uncomfortable. You feel bad, or you think to yourself, “What the heck is going on?�

So, why should you know about dissonance and consonance? How are they relevant to design and writing? They are relevant because they are the key ingredients in cognitive dissonance, one of my favorite theories of Leon Festinger.

Festinger’s basic hypotheses for cognitive dissonance are as follows:

1. The presence of dissonance, of being psychologically uncomfortable, will motivate the person to try to reduce the dissonance and achieve consonance.
2. In addition to trying to reduce dissonance when it is present, the person will actively avoid situations and information that would likely increase it.

Why Should You Use Dissonance?

We are going to focus on the first hypothesis as a new way to design and write. Put simply, it stipulates that we always want to reach consonance when we experience dissonance. May the persuasive madness begin!

We often try to convince people to use our solutions through our writing and design. In your attempt to persuade them, design with dissonance as a way to challenge their beliefs, and then introduce your service as a way to help them achieve consonance.

Writing With Dissonance

My introduction to this article uses dissonance. I suggested you were knowledgeable but that you haven’t heard of this technique. If you felt uncomfortable about not knowing this technique, then perhaps you chose to read on in order to learn it and feel comfortable again. And because I’m also a detective (well, not really) and possess mad deductive-reasoning skills, I can infer from the fact that you’ve read this far into my article that the dissonance may have worked on you! Aside from my attempt in the introduction, some amazing articles in our industry use dissonance beautifully.

An Essay by Paul Scrivens

A good example is Paul Scrivens’ essay, “You Are Not A Designer And I Am Not A Musician.� I love this essay, and many designers have shared it with their peers. Here’s an excerpt, in which he begins to use dissonance:

No, you are not a designer. You are someone that can piece together some stuff in Photoshop or add the right pieces of code in XHTML/CSS. You aren’t the person that creates experiences. You aren’t the translator of ideas that people never thought could be produced visually. You aren’t the person that can toss their own style to the curb and come up with something even greater because of it.…

We live in a world of hobbyists and the majority of our peers are hobbyists parading as professionals. They are not designers.

But you could be. Maybe. Just take the time to study like the greats before you. Push your limits. Test your boundaries. Designers like to work within their comfort zone because they know what they will like. Make something ugly to help you come up with some ideas on how to make something beautiful. When you need inspiration create your own.

Scrivens has disrupted your consonance here, which created dissonance. He challenged your beliefs. He blatantly told you that you are not a designer. But in the midst of your dissonance, Scrivens offers solutions: he suggests that you study like the great designers before you, and he makes recommendations on how you can find your own inspiration to become a designer. These are solutions you could follow to bring you back to consonance. Cognitive dissonance at its finest. Yes, you could have simply dismissed Scrivens’ attempt at dissonance, but then the theory would have worked even then; you wanted to maintain your beliefs and feel comfortable.

An Article by Whitney Hess

In her article “You’re Not a User Experience Designer If…,� Whitney Hess demonstrates wonderful writing with dissonance. She could have taken the easy way out and written it as the “Top 10 Ways to Be a Better User Experience Designer,� but I doubt it would have had the same impact as the real article had on that glorious day when user experience designers shared it with their peers to defend their work.

Dissonance was possibly created when designers read the title of the article. I’m sure many designers must have thought, “How dare she say what I am and am not. I must read on to refute this nonsense!� But as they read the article, they would have found Hess offering a list of things that do not make them user experience designers. The list might have made them psychologically uncomfortable (dissonant), but they may have decided to act on the list items to make themselves feel more comfortable and to bring back consonance. The article challenged beliefs and fostered great discussions.

A Project Built On Dissonance

You can base an entire project on dissonance. McKinney made an amazing online game about surviving poverty and homelessness, called Spent. Visitors are challenged to live on $1000 a month. Most people think that it’s easy to make a living and act like no one has an excuse. They accept the challenge because it seems easy enough. In the end, they walk in the shoes of someone less fortunate and begin to understand their hardships.

We see dissonance right away on the main page, “But you’d never need help, right?�

We feel psychologically uncomfortable and try to correct it by accepting the challenge. We are then presented with the following narrative:

Over 14 million Americans are unemployed.

Now imagine you’re one of them.

Your savings are gone.

You’ve lost your house.

You’re a single parent.

And you’re down to your last $1,000.

Then we are asked whether we can make it through the next month or would like to “Find a job.� If we choose the latter, we are presented with current job openings: restaurant server, warehouse worker or temp.

When we make our choice (in this case, warehouse worker), a description of the job is shown and we continue:

We continue to face more choices that make us uncomfortable, such as whether to opt in for health insurance. If we opt in, we see the impact on our finances, which helps us understand something meaningful about low-income workers.

We then need to choose where to live relative to our place of work. Living closer means higher rent, while living further away means higher transportation costs. You are then asked to pay your rent and transportation costs.

And then we are presented with even more uncomfortable situations that create yet greater dissonance!

When we finally reach our tipping point and want to correct the dissonance, we can get out at any time. A small link in the corner reads, “I can’t do this.� And then we are asked to take action and help by getting involved:

As you can see, the website creates an intense experience of dissonance. And it offers a way to help us reach consonance by donating, sharing and getting involved with Spent.

More Dissonance In The Wild

As mentioned, dissonance is already being used, and you might not have even noticed its power. Let’s look at some attempts at cognitive dissonance, where businesses challenge our beliefs and then suggest their services as a solution.

Adobe

If you’re a PHP developer, Adobe will definitely disrupt your consonance by asking, “Who needs PHP?� The ad leads to Business Catalyst, where Adobe explains how you can build database-driven applications without writing code!

A Book Apart

The HTML5 spec is 900 pages and hard to read. HTML5 for Web Designers is 85 pages and fun to read. Easy choice.

HTML5 is the longest HTML specification ever written. It is also the most powerful, and in some ways, the most confusing. What do accessible, content-focused standards-based web designers and front-end developers need to know? And how can we harness the power of HTML5 in today’s browsers?

In this brilliant and entertaining user’s guide, Jeremy Keith cuts to the chase, with crisp, clear, practical examples, and his patented twinkle and charm.

The introduction to HTML5 for Web Designers creates dissonance by suggesting that we don’t have the time or energy to get through the HTML5 spec. It recommends that we use this book to learn the important parts of the spec, which will bring us back to consonance.

37signals

The subheading for 37signals’ Basecamp is powerful. Knowing that millions of people are using Basecamp to get stuff done and that you’re not one of them might challenge your thinking. Are you missing out? Are those people more efficient than your team? You might consider using this product to gain efficiency.

Blinksale

For those of us who use PayPal, Blinksale attempts to create dissonance through its ad on The Deck by asking whether we are tired of our current service. Some of us feel that PayPal is a good enough service, but Blinksale claims to be the easiest way to send invoices online. With our beliefs challenged this way, we might decide to look further into what Blinksale has to offer in order to resolve our dissonance.

Where To Start?

If you’d like to apply cognitive dissonance, I suggest starting simple so that you can A/B test and gather feedback more easily. Then, you could incorporate more of it as you become comfortable with applying the theory. For now, start by using dissonance in a few of the headlines on your website to convince people to do business with you. Take the boilerplate headline that we see on most freelancers’ websites:

Hello. My name is Tad Fry, a Web developer and designer who makes websites.

Apply some dissonance:

Your competitor’s website is better than yours. Let’s work together to change that.

This might be blunt, but we want to challenge beliefs. If someone feels that their website is better than their competitors’ but then is challenged by your headline, they might be inclined to call you to resolve their dissonance. If you want to appear less provocative, you could phrase it as a question.

Is your competitor’s website better than yours? Let’s work together to change that.

Even though we are phrasing it as a question and the potential customer might agree (consonance), we are still creating dissonance because they might not have even considered that their competitor’s website might be better. We’ve now made it less direct and perhaps less insulting. Getting the right balance between dissonance and a respectful tone is sometimes difficult, but as with most of our work, gathering feedback and making changes based on it is important. This brings up another part of the theory.

In his book A Theory of Cognitive Dissonance (see pages 3 to 18), Leon Festinger writes (18):

The strength of the pressures to reduce the dissonance is a function of the magnitude of the dissonance.

We might prefer to be more direct, because that will create greater dissonance, which would put more pressure on the audience to reduce it. Again, it comes down to how much dissonance you want to create without insulting the visitor or completely missing the target. After all, the visitor could achieve consonance simply by choosing not to listen to you at all — which is why testing your work is so important.

Now Go Forth And Challenge Beliefs!

Hopefully I’ve whetted your appetite for this approach. I encourage you to look more into the theory, which is more involved than this introduction. And that’s the beauty of it. The various degrees of dissonance offer new approaches to your next design. Try adding dissonance to just a headline or page element at first. Be careful not to insult; you simply want to challenge beliefs and offer your product as a solution.

(al)

© Tad Fry for Smashing Magazine, 2011.

Imagine you’re playing the latest hash-tag game on Twitter when you see this friendly tweet:

You might want to check your #WP site. It includes two copies of jQuery. Nothing’s broken, but loading time will be slower.

You check your source code, and sure enough you see this:

<script src="/wp-includes/js/jquery/jquery.js?ver=1.6.1" type="text/javascript"></script>
<script src="/wp-content/plugins/some-plugin/jquery.js"></script>

What Went Wrong?

The first copy of jQuery is included the WordPress way, while some-plugin includes jQuery as you would on a static HTML page.

A number of JavaScript frameworks are included in WordPress by default, including:

• Scriptaculous,
• jQuery (running in noConflict mode),
• the jQuery UI core and selected widgets,
• Prototype.

A complete list can be found in the Codex. On the same page are instructions for using jQuery in noConflict mode.

Avoiding the Problem

WordPress includes these libraries so that plugin and theme authors can avoid this problem by using the wp_register_script and wp_enqueue_script PHP functions to include JavaScript in the HTML.

Registering a file alone doesn’t do anything to the output of your HTML; it only adds the file to WordPress’s list of known scripts. As you’ll see in the next section, we register files early on in a theme or plugin where we can keep track of versioning information.

To output the file to the HTML, you need to enqueue the file. Once you’ve done this, WordPress will add the required script tag to the header or footer of the outputted page. More details are provided later in this article.

Registering a file requires more complex code than enqueueing the files; so, quickly parsing the file is harder when you’re reviewing your code. Enqueueing the file is far simpler, and you can easily parse how the HTML is being affected.

For these techniques to work, the theme’s header.php file must include the line <?php wp_head(); ?> just before the </head> tag, and the footer.php file must include the line <?php wp_footer(); ?> just before the </body> tag.

Registering JavaScript

Before registering your JavaScript, you’ll need to decide on a few additional items:

• the file’s handle (i.e. the name by which WordPress will know the file);
• other scripts that the file depends on (jQuery, for example);
• the version number (optional);
• where the file will appear in the HTML (the header or footer).

This article refers to building a theme, but the tips apply equally to building a plugin.

Examples

We’ll use two JavaScript files to illustrate the power of the functions:

The first is base.js, which is a toolkit of functions used in our example website.

function makeRed(selector){
  var $ = jQuery; //enable $ alias within this scope
  $(function(){
    $(selector).css('color','red');
  });
}

The base.js file relies on jQuery, so jQuery can be considered a dependency.

This is the first version of the file, version 1.0.0, and there is no reason to run this file in the HTML header.

The second file, custom.js, is used to add the JavaScript goodness to our website.

makeRed('*');

This custom.js file calls a function in base.js, so base.js is a dependency.

Like base.js, custom.js is version 1.0.0 and can be run in the HTML footer.

The custom.js file also indirectly relies on jQuery. But in this case, base.js could be edited to be self-contained or to rely on another framework. There is no need for jQuery to be listed as a dependency of custom.js.

It’s now simply a matter of registering your JavaScript using the function wp_register_script. This takes the following arguments:

• $handle
  A string
• $source
  A string
• $dependancies
  An array (optional)
• $version
  A string (optional)
• $in_footer
  True/false (optional, default is false)

When registering scripts, it is best to use the init hook and to register them all at once.

To register the scripts in our example, add the following to the theme’s functions.php file:

function mytheme_register_scripts() {
  //base.js – dependent on jQuery
  wp_register_script(
    'theme-base', //handle
    '/wp-content/themes/my-theme/base.js', //source
    array('jquery'), //dependencies
    '1.0.0', //version
    true //run in footer
  ); 

  //custom.js – dependent on base.js
  wp_register_script(
    'theme-custom',
    '/wp-content/themes/my-theme/custom.js',
    array('theme-base'),
    '1.0.0',
    true
  );
}
add_action('init', 'mytheme_register_scripts');

There is no need to register jQuery, because WordPress already has. Re-registering it could lead to problems.

You Have Achieved Nothing!

All of this registering JavaScript files the WordPress way has, so far, achieved nothing. Nothing will be outputted to your HTML files.

To get WordPress to output the relevant HTML, we need to enqueue our files. Unlike the relatively long-winded commands required to register the functions, this is a very simple process.

Outputting the JavaScript HTML

Adding the <script> tags to your HTML is done with the wp_enqueue_script function. Once a script is registered, it takes one argument, the file’s handle.

Adding JavaScript to the HTML is done in the wp_print_scripts hook with the following code:

function mytheme_enqueue_scripts(){
  if (!is_admin()):
    wp_enqueue_script('theme-custom'); //custom.js
  endif; //!is_admin
}
add_action('wp_print_scripts', 'mytheme_enqueue_scripts');

Of our two registered JavaScript files (base.js and custom.js), only the second adds JavaScript functionality to the website. Without the second file, there is no need to add the first.

Having enqueued custom.js for output to the HTML, WordPress will figure out that it depends on base.js being present and that base.js, in turn, requires jQuery. The resulting HTML is:

<script src="/wp-includes/js/jquery/jquery.js?ver=1.6.1" type="text/javascript"></script>
<script src="/wp-content/themes/my-theme/base.js?ver=1.0.0" type="text/javascript"></script>
<script src="/wp-content/themes/my-theme/custom.js?ver=1.0.0" type="text/javascript"></script>

Registering Style Sheets

Both of the functions for adding JavaScript to our HTML have sister PHP functions for adding style sheets to the HTML: wp_register_style and wp_enqueue_style.

As with the JavaScript example, we’ll use a couple of CSS files throughout this article, employing the mobile-first methodology for responsive Web design.

The mobile.css file is the CSS for building the mobile version of the website. It has no dependencies.

The desktop.css file is the CSS that is loaded for desktop devices only. The desktop version builds on the mobile version, so mobile.css is a dependency.

Once you’ve decided on version numbers, dependencies and media types, it’s time to register your style sheets using the wp_register_style function. This function takes the following arguments:

• $handle
  A string
• $source
  A string
• $dependancies
  An array (optional, default is none)
• $version
  A string (optional, the default is the current WordPress version number)
• $media_type
  A string (optional, the default is all)

Again, registering your style sheets using the init action is best.

To your theme’s functions.php, you would add this:

function mytheme_register_styles(){
  //mobile.css for all devices
  wp_register_style(
    'theme-mobile', //handle
    '/wp-content/themes/my-theme/mobile.css', //source
    null, //no dependencies
    '1.0.0' //version
  ); 

  //desktop.css for big-screen browsers
  wp_register_style(
    'theme-desktop',
    '/wp-content/themes/my-theme/desktop.css',
    array('theme-mobile'),
    '1.0.0',
    'only screen and (min-width : 960px)' //media type
  ); 

  /* *keep reading* */
}
add_action('init', 'mytheme_register_styles');

We have used CSS3 media queries to prevent mobile browsers from parsing our desktop style sheet. But Internet Explorer versions 8 and below do not understand CSS3 media queries and so will not parse the desktop CSS either.

IE8 is only two years old, so we should support its users with conditional comments.

Conditional Comments

When registering CSS using the register and enqueue functions, conditional comments are a little more complex. WordPress uses the object $wp_styles to store registered style sheets.

To wrap your file in conditional comments, add extra information to this object.

For Internet Explorer 8 and below, excluding mobile IE, we need to register another copy of our desktop style sheet (using the media type all) and wrap it in conditional comments.

In the code sample above, /* *keep reading* */ would be replaced with the following:

global $wp_styles;
wp_register_style(
  'theme-desktop-ie',
  '/wp-content/themes/my-theme/desktop.css',
  array('theme-mobile'),
  '1.0.0'
); 

$wp_styles->add_data(
  'theme-desktop-ie', //handle
  'conditional',  //is a conditional comment
  '!(IEMobile)&(lte IE 8)' //the conditional comment
);

Unfortunately, there is no equivalent for wrapping JavaScript files in conditional comments, presumably due to the concatenation of JavaScript in the admin section.

If you need to wrap a JavaScript file in conditional comments, you will need to add it to header.php or footer.php in the theme. Alternatively, you could use the wp_head or wp_footer hooks.

Outputting The Style Sheet HTML

Outputting the style sheet HTML is very similar to outputting the JavaScript HTML. We use the enqueue function and run it on the wp_print_styles hook.

In our example, we could get away with telling WordPress to queue only the style sheets that have the handles theme-desktop and theme-desktop-ie. WordPress would then output the mobile/all media version.

However, both style sheets apply styles to the website beyond a basic reset: mobile.css builds the website for mobile phones, and desktop.css builds on top of that. If it does something and I’ve registered it, then I should enqueue it. It helps to keep track of what’s going on.

Here is the code to output the CSS to the HTML:

function mytheme_enqueue_styles(){
  if (!is_admin()):
    wp_enqueue_style('theme-mobile'); //mobile.css
    wp_enqueue_style('theme-desktop'); //desktop.css
    wp_enqueue_style('theme-desktop-ie'); //desktop.css lte ie8
  endif; //!is_admin
}
add_action('wp_print_styles', 'mytheme_enqueue_styles');

What’s The Point?

You may be wondering what the point is of going through all of this extra effort when we could just output our JavaScript and style sheets in the theme’s header.php or using the wp_head hook.

In the case of CSS in a standalone theme, it’s a valid point. It’s extra work without much of a payoff.

But with JavaScript, it helps to prevent clashes between plugins and themes when each uses a different version of a JavaScript framework. It also makes page-loading times as fast as possible by avoiding file duplication.

WordPress Frameworks

This group of functions can be most helpful when using a framework for theming. In my agency, Soupgiant, we’ve built a framework to speed up our production of websites.

As with most agencies, we have internal conventions for naming JavaScript and CSS files.

When we create a bespoke WordPress theme for a client, we develop it as a child theme of our framework. In the framework itself, we register a number of JavaScript and CSS files in accordance with our naming convention.

In the child theme, we then simply enqueue files to output the HTML.

function clienttheme_enqueue_css() {
  if (!is_admin()):
    wp_enqueue_style('theme-mobile');
    wp_enqueue_style('theme-desktop');
    wp_enqueue_style('theme-desktop-ie');
  endif; //!is_admin
}
add_action('wp_print_styles', 'clienttheme_enqueue_css'); 

function clienttheme_enqueue_js() {
  if (!is_admin()):
    wp_enqueue_script('theme-custom');
  endif; //!is_admin
}
add_action('wp_print_scripts', 'clienttheme_enqueue_js');

Adding CSS and JavaScript to our themes the WordPress way enables us to keep track of exactly what’s going on at a glance.

A Slight Limitation

If you use a JavaScript framework in your theme or plugin, then you’re stuck with the version that ships with the current version of WordPress, which sometimes falls a version or two behind the latest official release of the framework. (Upgrading to a newer version of the framework is technically possible, but this could cause problems with other themes or plugins that expect the version that ships with WordPress, so I’ve omitted this information from this article.)

While this prevents you from using any new features of the framework that were added after the version included in WordPress, the advantage is that all theme and plugin authors know which version of the framework to expect.

A Single Point Of Registration

Register your styles and scripts in a single block of code, so that when you update a file, you will be able to go back and update the version number easily.

If you use different code in different parts of the website, you can wrap the logic around the enqueue scripts.

If, say, your archive pages use different JavaScript than the rest of the website, then you might register three files:

• base JavaScript (registered as theme-base),
• archive JavaScript (registered as theme-archive),
• general JavaScript (registered as theme-general).

Again, the base JavaScript adds nothing to the website. Rather, it is a group of default functions that the other two files rely on. You could then enqueue the files using the following code:

function mytheme_enqueue_js(){
  if (is_archive()) {
    wp_enqueue_script('theme-archive');
  }
  elseif (!is_admin()) {
    wp_enqueue_script('theme-general');
  }
}
add_action('wp_print_scripts', 'mytheme_enqueue_js');

Using The Google AJAX CDN

While using JavaScript the WordPress way will save you the problem of common libraries conflicting with each other, you might prefer to serve these libraries from Google’s server rather than your own.

Using Jason Penny’s Use Google Libraries plugin is the easiest way to do this. The plugin automatically keeps jQuery in noConflict mode.

Putting It All Together

Once you’ve started registering and outputting your scripts and styles the WordPress way, you will find that managing these files becomes a series of logical steps:

1. Registration to manage:
   • version numbers,
   • file dependencies,
   • media types for CSS,
   • code placement for JavaScript (header or footer);
2. Enqueue/output files to HTML:
   • logic targeting output to specific WordPress pages,
   • WordPress automating dependencies.

Eliminating potential JavaScript conflicts from your WordPress theme or plugin frees you to get on with more important things, such as following up on sales leads or getting back to that hash-tag game that was so rudely interrupted.

(al)

© Peter Wilson for Smashing Magazine, 2011.

Editor’s note: This article is the first piece in our new series introducing new, useful and freely available tools and techniques presented and released by active members of the Web design community. Lea Verou is well-known for her experiments with CSS and JavaScript and in this post she presents her recent tool, prefixfree which will hopefully help you break free from the CSS prefix hell.

So What’s the Problem With Prefixes?

I’m sure we all agree that CSS3 is pretty cool and that it enables us to do things that were previously impossible. But those of us who use CSS3 a lot have surely experienced prefix hell, as seen in the snippet below (from a real style sheet!):

.download {
   position: absolute;
   top: 1em;
   left: -1.5em;
   width: 6em;
   height: 6em;
   padding: 1em 0;
   background: #80A060;
   background-image: -webkit-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -moz-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -o-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -ms-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: linear-gradient(transparent, rgba(0,0,0,.3));
   color: white;
   line-height: 1;
   font-size: 140%;
   text-align: center;
   text-decoration: none;
   text-shadow: .08em .08em .2em rgba(0,0,0,.6);
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   -webkit-box-shadow: .1em .2em .4em -.2em black;
   -moz-box-shadow: .1em .2em .4em -.2em black;
   box-shadow: .1em .2em .4em -.2em black;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -ms-transform: rotate(15deg);
   -webkit-transform: rotate(15deg);
   -moz-transform: rotate(15deg);
   -o-transform: rotate(15deg);
   -ms-transform: rotate(15deg);
   transform: rotate(15deg);
   -webkit-animation: none;
   -moz-animation: none;
   animation: none;
}

I’m not saying that prefixes are bad. We need them. But the reality is that, in most cases, they cause maintenance troubles, they bloat CSS files, and they make it harder to tweak values (because you have to do it five times or more).

A Solution: prefixfree

The code I write in my live demo slides and presentations doesn’t have any prefixes, even for things like @keyframes or the transition property, which aren’t yet supported anywhere prefix-less. To be able to do this, I wrote a script that detects the prefix of the current browser and adds it where needed. Recently, I thought, why not adapt the script to process all of the CSS code on a page, so that the CSS in my style sheets is as elegant as the code in my demos? Shortly after, prefixfree was born.

The script essentially does everything in JavaScript’s power to allow you to completely forget about vendor prefixes. It processes linked style sheets (except the ones in @import rules), embedded style sheets, inline styles, even CSS added afterwards (such as in new elements, CSSOM property changes and lookups). And if, in rare cases, you want to use a different definition for a different engine (for example, because one’s implementation is buggy), you can still use prefixed CSS.

The good thing about prefixfree is that once the browser vendors drop their prefixes for CSS3 properties, you can just remove the script and your CSS will still work. Your code will continue to be valid CSS3 (so valid that it will even pass a CSS validator). Your code does not depend on it (unlike CSS preprocessors); rather, it functions more like a polyfill, smoothing out browser differences for the time being.

Another useful feature is that the script auto-detects which properties need prefixing. Its code has no property list. It detects which properties are supported and which of them are supported only with a prefix. Values, selectors and @rules are based on predefined lists, but they are still prefixed only when needed. No browser sniffing is involved; everything is based on feature detection.

Unlike other solutions, prefixfree adds the current prefix at runtime, so the user downloads a much smaller CSS file. Some might argue that pre-processed CSS is faster because no client-side processing is involved. To some extent, this is true, but in my experiments there was no significant lag. With the borderline exception of Opera, it was hardly noticeable.

Also, there are a few server-side solutions, but there are two main issues with those. Firstly, the file size of the CSS file is still huge, as it has to contain all the prefixes (and the unprefixed versions). And secondly, the server-side script has to maintain lists of properties at all times, because they cannot be automatically detected, like with prefixfree.

So, what does the rule above become with prefixfree? It becomes this beauty:

.download {
   position: absolute;
   top: 1em;
   left: -1.5em;
   width: 6em;
   height: 6em;
   padding: 1em 0;
   background: #80A060;
   background-image: linear-gradient(transparent, rgba(0,0,0,.3));
   color: white;
   line-height: 1;
   font-size: 140%;
   text-align: center;
   text-decoration: none;
   text-shadow: .08em .08em .2em rgba(0,0,0,.6);
   border-radius: 50%;
   box-shadow: .1em .2em .4em -.2em black;
   box-sizing: border-box;
   transform: rotate(15deg);
   animation: none;
}

Download the Script on GitHub!

You can download prefixfree from GitHub. The minified version is less than 5 KB, which becomes less than 2 KB after Gzip’ing. Please keep in mind that it’s still a very early beta and might have bugs. You can help fix them, or at least report them in the issues tracker. Have fun!

(al)

© Lea Verou for Smashing Magazine, 2011.

Updating your Twitter profile can give you really unnecessary headaches. In today’s post, we proudly present to you a Twitter UI GUI template, designed by Shelby White which has exclusively been released for Smashing Magazine and its readers. As usual, the theme is absolutely free to use in private and commerical projects.

Download the Template for Free!

The template is released as freeware. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the template as you wish.

• Large Preview (.png)
• Download the .zip-package (zip, 0,4 Mb)
• release post on designer’s website
• download from the designer’s site

Behind the Design

As always, here are some insights from the designer:

“Time after time I dealt with the headache of updating my Twitter profiles. After searching thoroughly for an alternative to editing live, it was clear that there weren’t any great solutions or intentions by anyone to create a pixel-perfect template for anyone to use. Not to mention, a template that would remain up-to-date as the website evolved.

This PSD includes grouped elements by name respective of their location in the HTML of Twitter.com. The profile images utilize smart objects to ease the pain of changing images. Update the image once and it will proportionally scale the images across the whole PSD. Hope this template makes mocking up your profile a lot easier. Enjoy!”

Thank you, Shelby White. We appreciate your work and your good intentions.

(il) (vf)

© Smashing Editorial for Smashing Magazine, 2011.

Sometimes you may want the layout properties that HTML tables have, but you don’t want the semantics of a table since you’re not really working with tabular data. A couple of examples are creating equal height boxes and making an unknown number of items flexibly occupy all available horizontal space.

In situations like these you can use CSS to tell any HTML elements you want to behave like they were tables, table rows, and table cells by using a combination of display:table, display:table-row, and display:table-cell. You get the layout you want without littering your markup with tables that shouldn’t be there. But there is a slight catch.

Read full post

Posted in (X)HTML, Accessibility, CSS.

Copyright © Roger Johansson