Simon Willison's Weblog: css3

Side-channel attacking browsers through CSS3 features

2018-06-01T14:54:30+00:00

Side-channel attacking browsers through CSS3 features

Really clever attack. Sites like Facebook offer iframe widgets which show the user’s name, but due to the cross-origin resource policy cannot be introspected by the site on which they are embedded. By using CSS3 blend modes it’s possible to construct a timing attack where a stack of divs layered over the top of the iframe can be used to derive the embedded content, by taking advantage of blend modes that take different amounts of time depending on the colour of the underlying pixel. Patched in Firefox 60 and Chrome 63.

Tags: css3, security, sidechannel, timing-attack

Why weren't the features of Sass originally built into CSS?

2012-08-13T15:53:00+00:00

My answer to Why weren't the features of Sass originally built into CSS? on Quora

This is not a straight-forward issue: CSS has a very long, complicated history. A good starting point for understanding the reluctance of the CSS working group to add variables/constants etc to CSS is this essay by Bert Bos of the W3C (entitled Why “variables” in CSS are harmful) http://www.w3.org/People/Bos/CSS...

Tags: css, css3, web-development, quora, frontend, sass

Scribd in HTML5

2010-05-07T12:09:00+00:00

Scribd in HTML5

Outstanding piece of engineering work from Scribd—they can now render documents using HTML, webfonts and a ton of CSS absolute positioning (using ems rather than pixels) instead of Flash. Nothing to do with HTML5 of course, which is rapidly replacing Ajax as the most mis-applied terminology on the Web. That nit-pick feels pretty insignificant compared to their overall achievement though—being able to convert any formatted document (.doc, pdf etc) in to HTML and CSS that displays correctly is a real leap forward.

Tags: css, css3, html, html5, scribd, recovered, webfonts

Pure CSS3 Spiderman Cartoon w/ jQuery and HTML5

2010-05-04T19:27:00+00:00

Pure CSS3 Spiderman Cartoon w/ jQuery and HTML5

Great demo, though calling -webkit-animation HTML5 (or even CSS3) is a bit of a stretch...

Tags: animation, css, css3, html5, javascript, jquery, recovered, webkitanimation

Internet Explorer Platform Preview Guide for Developers

2010-03-16T18:36:38+00:00

Internet Explorer Platform Preview Guide for Developers

Lots of SVG and CSS3 stuff, no mention of canvas here either though.

Via IE testdrive preview release notes

Tags: canvas, css3, html5, ie9, internet-explorer, microsoft, svg

CSS 3: Progress!

2009-08-22T11:52:17+00:00

CSS 3: Progress!

Alex Russell on the new exciting stuff going in to CSS 3 based on real-world implementations in the modern set of browsers. Of particular interest is the new Flexible Box specification, which specifies new layout primitives hbox and vbox (as seen in XUL) and is already supported by both WebKit and Gecko.

Tags: alex-russell, browsers, css, css3, flexiblebox, gecko, hbox, standards, vbox, webkit

A brief introduction to Opacity and RGBA

2008-03-17T02:00:44+00:00

A brief introduction to Opacity and RGBA

The CSS opacity property is inherited by an element’s children; opacity set using the new rgba() declaration in CSS 3 differs in that it is not inherited.

Tags: css, css3, opacity, rgba

CSS3 and the death of Handheld Stylesheets

2007-11-16T09:53:22+00:00

CSS3 and the death of Handheld Stylesheets

I hadn’t looked at CSS 3 media queries before (which let you apply different styles based on media features such as screen width, height and colour availability)—they seem like a much smarter solution that handheld stylesheets and also appear to be preferred by device vendors.

Tags: browsers, css3, mediaqueries, mobile, russell-beattie

lxml.cssselect

2007-09-24T23:57:17+00:00

lxml.cssselect

lxml includes an implementation of CSS 3 selectors, which compiles them to XPath expressions. Should be a useful tool for parsing Microformats from Python.

Via Ian Bicking

Tags: css, css3, libxml2, lxml, microformats, python, selectors, xpath

Opera 9.5 (Kestrel)

2007-09-04T10:49:00+00:00

Opera 9.5 (Kestrel)

The latest Opera alpha includes a bunch of CSS3 features (including an almost full implementation of CSS3 Selectors) as well as the ability to use SVG for scalable background images.

Tags: anne-van-kesteren, browsers, css3, opera, opera95, releases, selectors, svg

Firefox 1.5 developer highlights

2005-09-11T13:46:19+00:00

Firefox 1.5 Beta 1 is out, and is the most exciting browser release in a very long time. It comes with the Gecko 1.8 rendering engine, which includes a ton of interesting new features. New in this version (unless you've been tinkering with the Deer Park series):

SVG
Canvas
CSS3 Columns
JavaScript 1.6

Let's take a look at these in turn.

SVG

The Mozilla SVG project has been quietly chugging along for years now, but until quite recently you needed to download an entirely separate build of Mozilla to try it out. Firefox 1.5 is the first Firefox release to include it and opens up a whole new world of vector graphics to web developers. The Croczilla Examples page is a great place to start - be sure to try the interactive demos near the bottom. There's more about Mozilla's SVG support on the Mozilla Developer Centre.

Canvas

The <canvas> element introduces a modern 2D drawing API to client-side development, with the promise of a 3D API in the future. It was invented by Apple for use in Dashboard widgets, then written up as a specification by the WHATWG to facilitate compatible implementations in other browsers.

The potential for innovation with <canvas> is enormous. Demos are pretty thin on the ground at the moment, but this interactive demo by Darin Fisher hints at the things to come. The Canvas shell is handy for playing with the API. Devmo has the beginnings of a great Canvas tutorial. This thing (originally a Safari 1.3 demo) is pretty too.

The ability for Firefox extensions to render web pages to images using <canvas> should lead to some very cool new extensions in the future.

CSS3 Columns

The ability to create auto-flowing columns (famously achieved on IHT.com using terrifyingly hairy JavaScript) has long been desired for the web - among other things it's a neat way of keeping line widths comfortably readable. The CSS3 Multi-column layout module enables this ability, and Gecko 1.8 implements parts of it in the form of the -moz-column-count, -moz-column-width and -moz-column-gap properties - the -moz- prefix is W3C approved syntax for vendor-specific CSS extensions. You can see columns in action on Robert O'Callahan's blog (Robert implemented column support in Gecko). Devmo's column documentation has further details.

JavaScript 1.6

According to New in JavaScript 1.6, the new features are E4X support, Array extras and "Array and String generics". I can't find anything detailing what the latter means, but the first two are pretty interesting. E4X (aka ECMAScript for XML) is a relatively new specification which promotes XML to a native data type. It lets you do things like this:


var x = <foo><bar>baz</bar></foo>;
alert(x.bar);
x.monkey = "good";
alert(x.toXMLString());

for each (var child in x) {
  alert(x.toXMLString());
}

(Example excerpted from Aaron's post to the Greasemonkey mailing list.)

It isn't available within script tags by default: you have to explicitly turn it on with <script type="text/javascript;e4x=1">, presumably to preserve backwards compatibility with existing pages.

Array extras consist of some new methods on the Array class, the most interesting of which are every(), forEach(), map(), filter() and some(). Each of these takes a function reference (i.e. a callback) as an argument and applies it to each item in the array in some manner. Fans of functional programming techniques will welcome these, and they can easily be enabled in older browsers by conditionally modifying Array.prototype. WebReference.com has a tutorial covering the new array methods.

If anyone knows what "Array and String generics" are, please leave a comment!

The above are just the highlights of Firefox 1.5 from a web developer's perspective. The improvements for regular users are also notable, including re-orderable tabs, caching of browser state for lightning-fast back and forward and lots of cosmetic (and performance) improvements for the Mac version. An unofficial changelog is available courtesy of the Burning Edge.

Exciting times indeed.

Tags: canvas, css, css3, firefox, javascript, svg