Category: css

CSS pre-processors like Sass and LESS extend CSS in many useful ways, not least by allowing you to use variables in your code either as single values or blocks of multiple property/value pairs, called Mixins. So useful are these that developer Tab Atkins proposed to the W3C that they be adopted into CSS itself, but they were rejected as no suitable use cases were seen.

I think I’ve found a scenario in which, while the use of Mixins aren’t vital, they’re certainly very useful, and it’s because of one of the core principles of coding: DRY (Don’t Repeat Yourself).

Read the full article

The latest Working Draft of the CSS3 Image Values and Replaced Content module was released last month, and contains some changes to the gradient syntaxes — for what you’d hope would be the last time. The updated syntaxes are a little more logical, but offer the same flexibility.

Firefox 10, which is due for release in a few weeks, will see an implementation of the updated linear-gradient and repeating-linear-gradient functions, so in this article I’ll take a look at those, and write a follow-up when the radial gradient updates are available for use.

Read the full article

One more post about things I’ve written elsewhere, then I’ll be back to writing original content here again…

Another pair of articles by me got published today; they’re both introduction-level:

Adventures In The Third Dimension, on Smashing Magazine, is a beginners guide to CSS 3D Transforms, explaining the syntax with a few demos; and for Ubelly I wrote The Five-Minute Guide to CSS Animations, which does the same job for CSS Animations.

I’ve an article coming up for .net Magazine soon; it’s called 10 CSS Techniques for 2012, it’ll be the cover article, and I’m very excited about as I wrote it in collaboration with Andreas Johansson, Harry Roberts, Lea Verou, Nicolas Gallagher, and Paul Adam Davis, all of whom do great work.

After that I have two more articles to write, should be tech editing a book on CSS3, then probably starting work on my own second book. 2012 is going to be a very busy year.

The latest stable release for Chrome (version 15) brings experimental support for a new feature, CSS Regions. What this does is take content from a source, and flow that content into a target — or, more importantly, multiple targets. This allows layouts which are more flexible than are currently possible.

This is still a very experimental feature but it’s worth beginning to investigate, so in this article I’m going to very quickly walk through the syntax and discuss the current level of implementation. Update, Nov 15: I realised that I overlooked Microsoft’s implementation of CSS Regions, so I’ve updated this post to correct that.

Read the full article

Opera recently released a Labs build of their browser with support for CSS pagination; that is, removing the scrollbar from documents and adding page controls instead (this is ideal for non-desktop devices, especially TV, where scrolling can be onerous). The syntax (as described in the Generated Content for Paged Media module) is very simple; you first use a media query with the paged media type (prefixed in Opera) like so:

@media -o-paged {}

Then use new values for the overflow property on the scrollable element to control whether the pagination moves horizontally or vertically, and whether or not on-screen controls are shown, like so:

@media -o-paged {
  html {
    height: 100%;
    overflow: -o-paged-x-controls;
  }
}

This paginates the whole document horizontally, and adds controls. To see this working, you’ll need to download a copy of the Labs build (available for Mac, Windows, Linux and Android), then you can visit this example page from Dive Into HTML5 I quickly set up. Navigate by dragging/swiping, cursor keys, or the native controls.

I really like this; it’s still early days, but the syntax seems clear and logical and works well in the demos I’ve seen, and I think it’s going to be really useful as the web migrates away from the desktop and onto other connected devices. More information and examples are in the ‘Paging the Web’ article on Håkon Wium Lie’s website, and I’ll definitely be delving further into this.

The Flexible Box Layout module (commonly referred to as FlexBox, for convenience) is implemented in Firefox, Chrome, Safari, and IE10 (Platform Preview, at least). I wrote an article explaining FlexBox in detail in .net magazine last year, but thought it worth following up with a short, practical guide on a few things it’s useful for.

I actually don’t think it’s perfectly suited for complex page layouts, but it does some simple things very well, so that’s what I’ll concentrate on. There are three use cases in this article, none of which are impossible using CSS2.1, but all of which are made easier with FlexBox.

Read the full article