Category: css

I’m writing about the CSS3 Multi-column layout module and I notice that WebKit supports a series of proprietary properties: –webkit-column-break-after, –webkit-column-break-before, and –webkit-column-break-inside. However, despite the documentation saying that they’re implemented in Safari 3+, I can’t seem to get any of them to work.

Has anyone reading this ever seen an example of these in action? I’ve searched for demos but have found nothing. If you know anything about this, please leave me a comment; your help would be gratefully appreciated.

This subject of this post is the redesign of my employer’s website, Preloaded.com, and is cross-posted from the Preloaded blog with permission.

At the beginning of the redesign project we agreed some design tenets: the new site should be a best-practice showcase and an opportunity to learn and use some of the latest web technologies; and it should employ existing services where practical.

Read the full article

The Opera team have released a very early preview of their next browser, which features an updated version of their Presto rendering engine. Opera 10.5 will support CSS transforms and transitions, so I’ve updated the demos on my old post, Anime with CSS and WebKit, to reflect that.

In the first part of this post I gave a potted history of the differing syntaxes, and provided an overview of how that affected linear gradients. In this second part I’m going to look at radial gradients.

Here the syntaxes diverge slightly more, with WebKit requiring more values than Mozilla; while that adds some flexibility, it also increases the complexity.

Read the full article

CSS Gradients were originally proposed by the WebKit team in April 2008, modified from the syntax proposed for the Canvas element of HTML5. In August of this year, Mozilla announced that an implementation slightly modified from that of WebKit would be in the next version of Firefox (3.6).

Since then, however, the CSS WG have discussed a different syntax, and a resolution was passed to add this to the Image Values module. Mozilla have decided to implement the new syntax, which is simpler than WebKit’s but less flexible.

In this article, which will be split into at least two parts, I’m going to compare the two syntaxes.

Read the full article

Support for the CSS Transitions module, originally proposed and implemented by the WebKit team, has just landed in the nightly builds of Firefox; it’s unsure whether this will make it into 3.6, as this is due to be released in the near future, but should be a feature in 3.7 at least.

The experimental feature will use the proprietary –moz– prefix; I’ve updated the demos in my previous post, Anime with CSS and WebKit, to reflect this.

After performing some brief tests there seem to be a few problems with the implementation; it’s not as smooth as it could be, and the third demo doesn’t work as it should. Update: Found an issue with the browser not recognising a value without a unit (e.g. 0 instead of 0%); fixed the demo, and filed a bug.