Handling Multiple CSS3 Transitions with a LESS Mixin

Suppose you’d like to use a handy LESS mixin to handle multiple CSS3 transitions in a single statement. That’s what LESS is for! But this is a bit of a hairy task. It takes a little finagling. But it’s doable! Here’s how.

To set up multiple CSS3 transitions, you’d do something like this:

a.btn {
    background-color: blue;
    color: white;
    -webkit-transition: background-color, color .2s ease-in-out;
    -moz-transition:  background-color, color .2s ease-in-out;
    -ms-transition:  background-color, color .2s ease-in-out;
    -o-transition:  background-color, color .2s ease-in-out;
    transition:  background-color, color .2s ease-in-out;
}

It would be nice to do that in shorter form, using a LESS mixin. But by default LESS’s parametric mixins don’t like handling an indeterminate number of arguments. It can handle it (using ‘…’), but our case is even more complex, since we want to list multiple properties (separated by commas) followed by duration and easing (stated once for all).

There is a solution. Worked out and posted by Tony Stuck (and commenter Vicente) here, and presented in shorter form in stackoverflow, it works like this:

Set up your mixin with a bit of regular expression magic:

.transition (@value1,@value2:X,...)
{
    @value: ~`"@{arguments}".replace(/[[]]|,sX/g, '')`;

    -webkit-transition: @value;
    -moz-transition: @value;
    -ms-transition: @value;
    -o-transition: @value;
    transition: @value;
}

Then apply the mixin like this:

a.btn {
    background-color: blue;
    color: white;
    .transition(background-color, color .2s ease-in-out);
}

Nice.

Grateful.

Smoother Loading Typekit Fonts: A nice approach by Joni Korpi

Korpi CSS Snippet Screenshot

For lovers of Typekit webfonts: If you want to guarantee that your pages load for all users without glitches, you’ll want to use Typekit’s asynchronous loading script. Advantage: pages will load fine for all users even in the event of a font network outage. Disadvantage: you’ll notice a flash of unstyled text (FOUT).

Joni Korpi, designer of the Golden Grid System and the Frameless grid system, has proposed a nice solution, which involves creative use of:

  • loading classes provided by Typekit
  • CSS3 transitions for fade-in
  • a base64 animated image to indicate that fonts are loading

As you’ll notice while perusing his blog, it provides a nice effect. I’m contemplating this method.

Read Joni’s post about this method

How does it strike you?

Related Links

A Little CSS3 Media Query Reporter

A Little CSS3 Media Query Reporter

For your responsive web designing pleasure, I’ve put together a little CSS3 Media Query Reporter.

UPDATES

Get the latest version on github

Media Query Reporter on Github

  • Version 1.01: includes 320px through 1440px in increments of 160px

Ruby Gem!

Christopher Moeller has created a ruby gem to add the latest version of the Media Query Reporter to your Rails App.

Original code below

Get the latest at Github.

/* ======================================

	Media Query Reporter Styles
	  by David Cochran
	  aLittleCode.com

========================================= */

body:after {
	content: "less than 320px";
	font-size: 200%;
	line-height: 1;
	font-weight: bold;
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 5px 0;
	text-align: center;
	background-color: hsla(1,60%,40%,0.7);
	color: #fff;
	z-index: 9999;
}
@media only screen and (min-width: 320px) {
	body:after {
		content: "320 to 480px";
		background-color: hsla(90,60%,40%,0.7);
	}
}
@media only screen and (min-width: 480px) {
	body:after {
		content: "480 to 768px";
		background-color: hsla(180,60%,40%,0.7);
	}
}
@media only screen and (min-width: 768px) {
	body:after {
		content: "768 to 1024px";
		background-color: hsla(270,60%,40%,0.7);
	}
}
@media only screen and (min-width: 1024px) {
	body:after {
		content: "1024 to 1360px";
		background-color: hsla(360,60%,40%,0.7);
	}
}
@media only screen and (min-width: 1360px) {
	body:after {
		content: "1360 and up";
		background-color: hsla(90,60%,40%,0.7);
	}
}

Live Demo

See a live demo of a previous version of this little CSS3 Media Query Reporter in action over at Webdesigntuts+:
CSS3 Media Query Reporter Screenshot aLittleCode-com

Online Tutorial

For a quick tutorial on the rationale and process of building this — as well as the first steps toward creating a responsive grid system — see my tutorial at Webdesigntuts+.

Webdesigntuts+ CSS3 Media Query Tutorial

3 Techniques to Serve Up Context Specific Images for Responsive Web Designs

For responsive web designers —

Chris Coyier lays out three currently experimental methods for serving specific images to a website user, depending on the user’s device: mobile, tablet, desktop.

The three he names include:

  1. CSS3 Image Replacement
  2. Javascript URL Rewrite
  3. PHP Cookie

Chris provides helpful links to more extensive discussions of these methods. It seems that each offers benefits and drawbacks. It will be interesting to watch this develop.

Techniques for Context Specific Images | CSS-Tricks

Using CSS Transitions to Smooth Media Queries

From Elliott Jay Stocks:

The basic premise is this: you use media queries to design responsive websites that adapt their layout according to browser width, and you constantly resize your browser to see how the site performs, but each time a query kicks in, there’s a harsh jump between the old styles and the new ones. Why not use some simple CSS transitions to smooth that jump by animating the resize?

via CSS transitions & media queries » Blog » Elliot Jay Stocks.

Responsive Web Design vs. Mobile Site: Which is better, when?

Responsive Web Design vs. Mobile Site: Which is better, when?


Over the next few weeks we at A Little Code will be experimenting with best ways to optimize sites for multiple devices. Here are a few initial thoughts.

Hitting the Limits of Responsive Web Design

Initially, we’ve found that for a site with a number of interactive elements, such as drop-down navigation, slideshows, javascript overlays, etc., the approach to Responsive Web Design recommended by Ethan Marcotte — adding media queries for mobile devices at the end of things — isn’t up to the task.
Continue reading “Responsive Web Design vs. Mobile Site: Which is better, when?”

Video Introduction to Responsive Web Design, from Nettuts+

A 25-minute video tutorial introducing the concept of Responsive Web Design — using CSS media queries to adjust CSS design and layout to work well in variously-sized browsers across multiple devices — from Nettuts+.

Features some excellent examples of responsive designs, including:

See the original post: Responsive Web Design: A Visual Guide | Nettuts+.