26
Jan
There are some pretty complex testing tools for responsive designs out there. I even see people constantly resizing their browser window using on-screen rulers. The easiest approach to me is just a simple page with a bunch of iframes, like Matt Kersley’s test page. Because I always ended up refreshing the whole page rather than the URL bar on that page, I saved the file locally and tweaked it a little.
Somebody recently asked me to share it, so here it is. Just drop this HTML document in the same folder as your index page and open it – it’s dead simple, really!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Design Testing</title>
<style>
body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }
.wrapper { width: 6000px; }
.frame { float: left; }
h2 { margin: 0 0 5px 0; }
iframe { margin: 0 20px 20px 0; border: 1px solid #666; }
</style>
</head>
<body>
<div class="wrapper">
<div class="frame">
<h2>320 × 480 <small>(mobile)</small></h2>
<iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="320" height="480"></iframe>
</div>
<div class="frame">
<h2>480 × 640 <small>(small tablet)</small></h2>
<iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="480" height="640"></iframe>
</div>
<div class="frame">
<h2>768 × 1024 <small>(tablet - portrait)</small></h2>
<iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="768" height="1024"></iframe>
</div>
<div class="frame">
<h2>1024 × 768 <small>(tablet - landscape)</small></h2>
<iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="1024" height="768"></iframe>
</div>
<div class="frame">
<h2>1200 × 800 <small>(desktop)</small></h2>
<iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="1200" height="800"></iframe>
</div>
</div>
</body>
</html>
Update: Ben Keen turned this into a very handy bookmarklet. Reloading the page will kill the effect of course, but still very useful for quick one-shot tests.
Update 2: Here’s another bookmarklet based on this idea by William Golden.
responsive
design
testing
ads by Yoggrt
19
Jan
After redefining angles in gradients, another small but important revision was made to the linear gradient syntax last week. It’s outlined in full detail on Peter Gasston’s blog, but the gist is this: If you need a direction keyword, you’ll have to specify the destination keyword and prepend the word to. Previously you had to specify the origin of the gradient.
background: linear-gradient(left top, red, gold); /* old syntax */
background: linear-gradient(to right bottom, red, gold); /* new syntax */
Makes it a bit more readable and logical, so it’s a good adjustment. But how about the transition from old to new syntax then? Well, this will probably be the last edit to the syntax, as the CSS Image Values and Replaced Content Module Level 3 specification moved to the Last Call status. Browser vendors will likely only start using this new syntax when moving to unprefixed gradients, or keep supporting the old syntax for prefixed gradients (as Firefox 10 will do).
Therefore, if you already used unprefixed gradients with direction keywords – for future compatibility – you’d better edit these stylesheets.
gradients
spec
syntax
18
Dec
In CSS, there have been filters for a long time. Microsoft first introduced them for Internet Explorer 4, producing a range of visual effects and transitions. Also called DirectX filters, we still occasionally use them today, for things like fallbacks for CSS gradients. They are proprietary though, and were never picked up by other browser vendors.
As a result, the Internet Explorer team decided to add the -ms- prefix in 2009. But soon after these filters were deprecated, and in IE10 they won’t even be supported no more. So you really never need to bother with the -ms-filter syntax, just use filter in those rare cases.
In the meantime, the filter property has been reborn however, this time for SVG filter effects applied in CSS. Partially supported in Firefox since version 3.5, they’re currently being formally specified, and also being implemented in Internet Explorer 10 and WebKit. These CSS filter effects will allow some very exciting Photoshop-like filters, like grayscale, sepia, blur, saturate, brightness, and much more. Coming soon!
filters
spec
IE
SVG
CSS
07
Dec
Back in August I talked about the lack of benchmarks or performance tools for CSS. In the meantime, the fine folk we call browser makers have been working hard on new developer tools to do just that: measure CSS performance. First the Opera team showed off their upcoming style profiler, and now the WebKittens are tinkering on a CSS selector profiler too.
One of the features of these tools is to calculate how long your selectors take and then show a list of the worst offenders. But as you can see from the screenshots, and as noted by Pavel Feldman:
I can see selector matching taking single digit milliseconds. I know from the timeline panel that layout takes hundres of milliseconds or even seconds.
So the relevance of this information may be rather marginal. Perhaps more interesting then is the fact that the Opera Dragonfly style profiler shows the exact moment and location of paint events and layout reflows. Definitely some exciting developments to keep an eye on!
opera
webkit
benchmark
profiling
css
performance
01
Dec
Googlers Shane Stephens and Tab Atkins Jr. recently posted the first editor’s draft of a new specification on CSS hierarchies. The CSS Working Group has been paying close attention to what’s happening in the world of CSS preprocessors (like LESS and SASS), and this is another illustration of that. Take this code:
.error, .warning {
padding: 10px;
}
.error p, .warning p {
font-size: 12px;
}
.error a, .warning a {
color: #f00;
}
.error a:hover, .warning a:hover {
border-bottom: 1px solid #f00;
}
When the spec is implemented, you will simply be able to write it like so:
.error, .warning {
padding: 10px;
& p { font-size: 12px; }
& a {
color: #f00;
&:hover {
border-bottom: 1px solid #f00;
}
}
}
The advantages are pretty clear: better readability and maintainability, and smaller file sizes!
If you’re wondering about compatibility, the spec says the following about this:
if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored
So a browser that doesn’t understand nested selectors will read the above example as:
.error, .warning {
padding: 10px;
}
While we wait for browser implementations, it would be great if all CSS preprocessors added support for this syntax so we can start getting used to it today you can actually start using this syntax today – it’s compatible with both LESS and SASS. (Thanks @dariocravero!)
css
hierarchies
nesting
preprocessors
spec
25
Nov
Granted, this might seem a pretty exotic scenario, but a very plausible one nevertheless: using letter-spacing breaks right-to-left text in Opera on Windows. On Windows XP the character order seems to be reversed, and on Vista and Windows 7 the order is fine but characters are no longer joined – while scripts like Arabic, Urdu, etc. rely on this. (Thanks to @BifterComic for the Vista results.)
Here’s a JSFiddle to test, and some screenshots to get an idea. The first line is without any letter-spacing, the second one has a positive value, and the third line has a negative letter-spacing.
So if you have a page with RTL text, remember to reset any letter-spacing to avoid running into this issue. I filed a bug at Opera to report it.
Update: Apparently the Opera team was working on some issues with hardware acceleration, which fixed this bug. The fix is in the new development snapshot, so it shouldn’t take too long for this bug to eventually disperse into thin air.
RTL
opera
windows
bug
18
Nov
A technique that hasn’t been researched and used enough in my opinion, is the use of an icon font as a web font. There are many advantages to this approach, rather than using images. You can:
- infinitely scale a font, because they’re just vectors
- use whatever color you like – even gradients in some browsers
- add shadows, transitions, transforms, …
- stop messing around with loads of files or sprites
- rest assured it will work in most browsers – browser support for @font-face is very wide
One problem with icon fonts that can make them less than ideal for font embedding, is that they’re often big files. That’s one of the reasons I created Fico, a limited set of simple icons specifically tailored to use on the web. The icon set might grow in the future, but it will always remain a lightweight solution for using icons on your website. Give it a spin!
There’s some more info and techniques about this on the Fico website, and coincidentally Chris Coyier from the excellent CSS-Tricks posted this today as well: Icon Fonts are Awesome.
icons
fonts
font-face
06
Nov
You’ve probably come across the use of CSS filters as fallback techniques for RGBa colors or CSS gradients for example. They have their limitations and implications, but they do come in handy sometimes. They look something like this:
.awesomesauce {
background: rgba(0,0,0,.6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
}
Maybe you’ve noticed these weird colors that have 8 instead of the usual 6 hexadecimal digits. Well, these are aRGB colors, used in Internet Explorer filters but also in Android development among others.
The syntax is pretty easy: first a pair of digits for the alpha channel and then 3 pairs for the RGB channels, just like regular hex colors. But instead of specifying alpha as a percentage or a floating point like for RGBa colors, it is defined in a range from 00 to FF. To calculate the hex value from a decimal number in JavaScript:
hexAlpha = Math.floor(decimalAlpha * 255).toString(16);
// so:
// rgba(255,255,255,0) = #00ffffff
// rgba(0,0,0,.5) = #7f000000
// rgba(255,255,0,1) = #ffffff00 = #ffff00 = #ff0
To make it even easier, there are several RGBa to aRGB convertors out there.
CSS
IE
RGBa
aRGB
colors
filters
hex
28
Oct
One new feature of iOS 5’s Mobile Safari that was not known back when I wrote this post, is an extension to the DeviceOrientation Event API. There was already an implementation of the official yet limited spec in iOS, but the Apple team didn’t have the time to wait for a resolution and implemented two new properties that allow developers to get full access to the real world orientation in Mobile Safari now!
James Pearce from Sencha took the new API for a spin and created a complete web-based compass. If you’re running iOS 5 and you’re on an iPhone 4 or 4S, iPad or latest generation iPod Touch, just tap the image below. Now go ahead and make your web app orientation-aware!
device orientation
compass
spec
javascript
ios
mobile safari
21
Oct
Earlier this year the CSS transitions specification was rewritten so that transitions with a custom timing function (using cubic-bezier) would no longer be clamped between the start and end values, making it possible to add a rubber-band bounce to your transitions. Opera and Firefox already implemented this, and recently the related WebKit bug was fixed, so we can start experimenting with bouncy transitions now!
This rubber-band bouncing doesn’t only work for things like position and transform, it equally applies to animated colors, shadows, borders, font-sizes, etc. Of course, transitions won’t extend across minimum or maximum values – you can’t go darker than rgb(0,0,0) for example.
If you need real bouncing though – with more than one bounce – you’ll still have to use keyframe animations, as cubic-bezier curves only take two user-defined control points. Dan Eden made a nice library of ready-made animations to drop into your project. Apparently browser vendors and spec writers are currently looking into defining more timing functions like bounce however.
If you want to play around with cubic-bezier curves look no further than Cubic-Bezier or Ceaser, two essential tools to comprehend and play with CSS timing functions.
animations
css
spec
cubic-bezier
webkit
