January 2013
1 post
3 tags
caniuse.com redesign - feedback wanted
I’ve posted the following earlier this week on Dribbble, and we’ve got some great feedback so far. But we can use as much input as possible, so I’m posting this here as well.
Over the course of the past few months, I’ve been working on a redesign of caniuse.com together with Alexis Deveria aka @Fyrd, author of the site. If you don’t know caniuse.com yet, it’s an essential...
October 2012
2 posts
7 tags
Using Sass source maps in WebKit Inspector
Here’s a second topic I talked about in my Fronteers 2012 jam session presentation. If you’ve been using a CSS preprocessor in your workflow, you’ve no doubt encountered this issue: you’re inspecting some element and want to edit the CSS, but finding that selector proves to be difficult as the inspector shows you file names and line numbers for your compiled CSS.
If...
4 tags
box-shadow vs filter: drop-shadow
This post is the first topic I discussed in my jam session presentation at Fronteers 2012. It’s about the drop-shadow filter. You may have looked at it and thought “this is pretty much the same thing as a box-shadow” right? Well, not exactly. The big advantage of the drop-shadow filter is that it acknowledges the outline and transparency of an element.
Have you ever wanted a...
July 2012
1 post
5 tags
Unprefix express in full swing
The big vendor prefix discussion comes and goes in waves, but one conclusion that always pops up is that these prefixes should have a shorter lifespan. Of course browser makers may shift the responsability to specification writers, arguing that specs take too long to reach Candidate Recommendation (CR) status. Well, it seems the unprefix express is finally picking up steam.
A few weeks ago we...
June 2012
1 post
6 tags
box-decoration-break finally coming to more...
One of the lesser known CSS properties I’m really excited about is box-decoration-break. From the official spec:
When a box is broken at a page break, column break, or, for inline elements, at a line break, the ‘box-decoration-break’ property specifies whether box fragments are treated as broken fragments of one continuous box, or whether each fragment is individually wrapped with the...
May 2012
3 posts
4 tags
Prevent background-color bleed on touch screens
Here’s an issue I’ve ran into a couple of times related to subpixel rounding on touch screens: while zooming in, I was seeing background colors bleeding through on the edges of an element that also had a background image applied. Open this fiddle on your smartphone or tablet and zoom in, you may see something like this:
Browsing this thread on Stack Overflow I found a really...
4 tags
Subpixel layout coming to WebKit
If you’ve ever tried to get precise em-based values of letter-spacing to work in a WebKit browser, you’ve probably wondered why that isn’t really possible, while Firefox or Internet Explorer 10 for example do allow fine-grained control. Play around with this demo in various browsers and you’ll see what I mean.
The underlying reason is that WebKit currently uses integers...
3 tags
Easily checking in JavaScript if a CSS media query...
For quite a while I have been looking for a way to “mirror” my CSS media queries in JavaScript, but without duplicating the actual queries. Of course, you can use matchMedia to evaluate a media query in JavaScript, but then you have to maintain your breakpoints in two places – not ideal.
Paul Hayes devised a clever method in his fork of the matchMedia polyfill, using transitions...
March 2012
1 post
4 tags
Say hello to the color picker in WebKit Inspector
If you’re using the Chrome dev channel or the WebKit Nightlies, you might have noticed this already: previously, when you clicked the colored square on the left of a color code in the WebKit Inspector, it used to cycle through different color formats. That’s still possible when you shift-click it (alt-click on Windows), but a regular click will now spawn a color picker. It was on my...
February 2012
1 post
3 tags
Forget loading spinners, use a wait cursor
Update: Right after posting this I received quite a bit of feedback in defense of regular loading spinners. Some valid arguments in favor are summed up nicely in this Hacker News thread:
Cursors won’t work on touch devices of course.
Wait cursors might be too easily associated with a frozen browser/system.
A spinner may indicate more clearly which part of the interface is updating.
So...
January 2012
2 posts
3 tags
Simple responsive design test page
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...
3 tags
Small but important (and final?) change to linear...
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:...
December 2011
3 posts
5 tags
On filters, -ms-filters and filters
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...
6 tags
The CSS profilers are coming!
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...
5 tags
Native CSS nesting with new Hierarchies spec
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 {
...
November 2011
3 posts
4 tags
Using letter-spacing breaks right-to-left text in...
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.)
...
3 tags
Using an icon font as a web font – introducing...
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...
7 tags
Working with 8-digit hex colors (aRGB) in Internet...
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);
}
...
October 2011
4 posts
6 tags
Complete Compass API in iOS 5
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...
5 tags
Some notes on bouncy CSS transitions
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...
4 tags
CSS hack to target Opera
Last week – while I was working on my new personal site – I had to find a way around Opera not supporting pointer-events. After a quick round of googling, I stumbled upon a CSS hack to target Opera only. That way I was able to simply hide the overlaying generated content that was stealing pointer events from underlying links.
x:-o-prefocus, .intro:after {
display: none;
}
:-o-prefocus...
3 tags
Hire || Meet me
I’d like to keep the self-promotion here to a minimum, but I couldn’t pass on the opportunity to mention that I’m now available as a freelance interface designer and front-end developer, for web & mobile. I unveiled the fourth version of my personal site lensco.be yesterday, and as you’d expect it’s filled with things like generated content, media queries,...
September 2011
6 posts
5 tags
Know your lingo: pseudo-class vs pseudo-element
Looking at other people’s stylesheets, you may have asked yourself the question why you sometimes see :after and sometimes ::after? And what’s the deal with these pseudo-classes and pseudo-elements?
Well, it’s pretty simple actually. Pseudo-classes are selectors that let you target elements themselves, or a special state of the element – like :hover, :first-child,...
4 tags
Look ma, no images! Part II – Fronteers...
When I was asked to give a talk at the fifth Fronteers Belgium meetup, I decided to revisit my “Look ma, no images!” slide deck from June. Improved and extended, this presentation should give a good overview of how to generate, combine and implement visual elements with CSS. I think it went down pretty good last night. Go check the slides!
4 tags
Angles in gradients subject to change
Vendor prefixes have always been the subject of heated debates among web developers and designers. And although it’s easy to forget, a prefix basically means: this stuff is not finished, and might change in the future – use at you own peril.
A prime example of this recently cropped up concerning angles in CSS gradients. A few months back Fantasai posed a simple question to the web...
3 tags
One-sided box-shadows
Credit for this trick goes to Stephanie (Sullivan) Rewis – and commenters – who came up with a solution to a problem a few of us have encountered: you want a box-shadow to appear on one side only, without any faint shadows bleeding through on other sides.
Turns out you can use a negative spread value for this. The trick does have its drawbacks so it might not work in every scenario, but...
4 tags
Going unprefixed with border-radius?
Can you believe it’s more than 6 years ago that the WebKit team implemented border-radius? Looking at the support tables you can see that basically all browsers now support the border-radius property unprefixed. (Unfortunately Firefox 3.6 seems stuck with a long tail, but if you don’t care about that remaining 8% you can now safely dump those prefixes.)
Edit: There are still several...
4 tags
Shorter media queries
As tweeted by Mathias Bynens a few months ago:
Most of the time, there’s no need to limit your media queries to screen media only.
Indeed, usually your media queries should apply to all media types, so instead of this:
@media screen and (min-width: 500px) { ... }
You can do this:
@media all and (min-width: 500px) { ... }
Even better, the spec says the all keyword can even be left...
August 2011
5 posts
4 tags
A few notes on CSS hyphenation
By now you’ve probably read about CSS hyphenation somewhere on the web. Using it is as simple as:
p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
But maybe you missed some of the finer details about it, so here’s the lowdown.
CSS hyphenation is currently supported by Safari 5.1 on Lion and Firefox 6.
Next to auto and none, there’s also a...
6 tags
Customize the WebKit Inspector (Chrome Dev Tools)
I’ve never thought of this, but Darcy Clarke proved you can customize the WebKit Inspector (and Chrome dev tools) simply by editing your user stylesheet. Check the post and comments for some examples of syntax highlighting themes. Neat!
Considering my WebKit Inspector wish list, I added some styles to clean up and improve the styles panel – including moving the enable/disable checkboxes to...
3 tags
CSS3 text-decoration implemented first in Firefox...
While browsing the release notes for the freshly released Firefox 6, I noticed it’s the first browser to implement the CSS3 version of text-decoration. Which boils down to three new properties: text-decoration-color, text-decoration-style and text-decoration-line. These allow you to do groovy stuff like:
.yeahbaby {
-moz-text-decoration-line: underline;
-moz-text-decoration-style:...
4 tags
Benchmarks for web technologies like CSS and SVG
After reading up on Lea Verou’s provocatively titled piece CSS gradients are faster than SVG backgrounds and its comments, it struck me that there are little to no benchmarks for web technologies like CSS and SVG. At least no standardized, commonly accepted ones.
For JavaScript there’s plenty of benchmarks, each with its own focus or purpose, but for matters like the one Lea posts...
4 tags
Noise in CSS – fo' realz?
For some years now, addding a “noise” texture to a design seems to be all the craze, and admittedly it can spruce up an otherwise rather bland background. The web design community has been trying to come up with an easy, lightweight method of adding noise, with some degree of success.
It turned out to be way too complex for gradients, a jQuery plugin is okay if you can live with the...
July 2011
10 posts
5 tags
IE doesn't like inline style blocks in AJAX...
Having inline style blocks in an AJAX response is pretty problematic for Internet Explorer. If the style element is right at the start of the response, it’s ignored entirely. The solution is to put any other element before the style tag – check the demo.
But even then it’s not bug free. Using the background fallbacks technique (serving a solid background color to IE and gradients to...
3 tags
New in OS X Lion: Network Link Conditioner
Here’s a great reason for Mac users to upgrade to OS X Lion: the Network Link Conditioner. As explained in detail by Matt Gemmell, this new preference pane allows you to throttle network speeds. Which is very useful for testing mobile apps, and checking if your loading animations work properly!
4 tags
Disabling default appearance of form elements on...
If you’ve ever browsed around the internet on an iPhone or iPad you’ve no doubt seen that form elements like text inputs and submit buttons get a default look that differs quite a bit from the default styling on desktop browsers. Most CSS properties are applied just fine, but text inputs keep an inner shadow, and buttons always get a gradient overlay on the background and pill-shaped...
3 tags
Responsive containers & selector queries – an...
Andy Hume of Clearleft has written about an interesting idea: a new CSS syntax that allows you to apply styles depending on the dimensions of the element itself. So rather than queries on the whole page – which media queries handle – you can add queries on elements themselves: selector queries.
.signup-form @selector(min-width: 300px) {
.label {
display: block;
}
}
...
4 tags
background-size CSS property buggy on iOS devices
While designing a mobile site recently, I discovered that the background-size CSS property is very buggy on iOS devices. What exactly happens is hard to say, but when the aspect ratio of your background-image is different from the target ratio, images get squashed. The curious thing is that there are several factors that can trigger this bug:
It only happens with JPGs. Images in GIF or PNG...
4 tags
Show empty cells in data tables with empty-cells:...
This is a simple old trick, but still an issue I see cropping up all too often: people putting non-breaking spaces ( ) in empty cells in data tables, so the background and borders are rendered. Don’t. Just put this in your reset.css:
table { empty-cells: show; }
Works fine in all browsers. Internet Explorer 7 and lower even have show as the default – unalterable – value.
4 tags
text-overflow (almost) supported everywhere
The text-overflow property has been around for several years, but what’s new is that Mozilla’s bug #312156 was closed two weeks ago, making Firefox the last browser to implement it. It won’t be available until Firefox 7, but with their new release schedule that should only be a couple of months away – check the compatibility table.
To refresh your memory, here’s how to...
2 tags
Prevent elements from receiving clicks with...
A while ago I had this div with overflow: auto and I wanted to create the effect where the bottom faded to white, so the contents appear to vanish as you scroll. I added a gradient on top using positioned generated content, which looked just fine. The only problem was that you couldn’t click links below this gradient. Fortunately I remembered the pointer-events property.
Originally a SVG...
3 tags
To prefix or not to prefix?
Sometimes it may look arbitrary if a browser maker decides to use a vendor prefix or not when implementing new features. But it’s not some haphazard affair – there are pretty elaborate rules for this.
By the way, the easiest way to check if you should use vendor prefixes or not is still caniuse.com!
(via @divya)
5 tags
Positioned floats (aka CSS3 floats)
One of the new features in Internet Explorer Platform Preview 2 that didn’t get a lot of attention is support for positioned floats. It’s the short name for a specification called CSS Floats and Positioning Level 3, proposed in May by Microsoft and Adobe. You can tell why these two companies submitted the idea, as it’s the translation of a common feature of word processing and...
June 2011
7 posts
3 tags
What can you do with 1K of CSS?
Here’s a great mashup of the CSS Zen Garden concept and the premise of JS1K: the CSS1K project.
CSS1K invites you to show that web developers are more inventive than ever, and that limitations can sparkle creativity.
There are some basic rules of course – I appreciate the fact that vendor prefixes are not counted towards the total size for example. Fork the repository at GitHub and...
3 tags
Android bug renders text-rendering property...
Was checking this website on an Android phone (Galaxy S with Android 2.3) and saw some very weird boxes popping up all over the page. After a quick round of debugging, it turned out text-rendering: optimizelegibility; was the culprit.
So unfortunately, until this bug is fixed, don’t use text-rendering: optimizelegibility; if you want your site to display well on Android.
4 tags
Look ma! No images!
Barcamp-time again yesterday, where I did a short presentation on some of the techniques I used on this site, bricss.net. As you may or may not have noticed, there’s not a single image on this site (except favicons and posted images, of course). The logo’s, icons, tags, … it’s all just HTML and CSS. Go check the slides on slideshare!
2 tags
Rubber-band scrolling for overflow: scroll...
On the subject of one-finger-scrolling in overflow: hidden elements on iOS 5: Apple apparently introduced a -webkit-overflow-scrolling property in the latest beta. Specifying the value touch will result in rubber-band scrolling with momentum. Sweet.
(via @badass_js and @mathias)
4 tags
Spaced out & stretched background images
Talking about the CSS Backgrounds and Borders Module Level 3, have you ever heard of the space and round values for background-repeat?
The spec says this about space:
The image is repeated as often as will fit within the background positioning area without being clipped and then the images are spaced out to fill the area.
And round will stretch your image:
The image is repeated as...
2 tags
What's new in iOS 5 for web developers?
David Calhoun posted a nice list of new things in iOS 5 Mobile Safari. Among others:
position: fixed (yay, finally – more info)
single finger scrolling for elements set to overflow
date and range input types
Web Workers
and more …
3 tags
Background-position from right or bottom
Following the CSS Backgrounds and Borders Module Level 3 spec, Opera can now take 4 values for background-position. This means you can position a background-image from the bottom and right side as well – finally!
background-position: bottom 40px right 20px;
This is great news for anyone who has ever had to make a fluid design or a right-to-left layout! I hope other browsers pick this up soon...
