Gradients, two new range based CSS selectors and background extensions

Published on in CSS, Google Chrome, Last Week, Standards, tech, WebKit. Version: Chrome 10

Happy New Year! Even though there were only 354 commits in total, there certainly were some interesting subjects to write about. Highlights include cleaner gradient syntax for WebKit, support for the :in-range and :out-of-range CSS Selectors and background extensions enabled by default.

There are two things which I’ll change with the weekly updates, starting at this article. Firstly, I’m no longer forcing external links to open up in new tabs/windows: clicking them will navigate away from the article. Furthermore, I have added tags indicating the latest Chromium version at the time of publishing, making it easier to determine what changed in a major Chrome release: version 7, 8, 9 and the latest: Chrome 10.

Following Tab Atkins’ promise that the gradient part of the CSS3 Images specification won’t change anymore, Simon Fraser was quick to jump in and implement the gradient syntax in WebKit. This is good news for the cutting-edge developer, as WebKit’s own proprietary syntax won’t be nessesary anymore in the near feature.

So far, two patches for supporting the new gradient syntax have landed. The first one implements the syntax for non-repeating linear gradients, including support for non-percent based and negative lengths. The second patch adds support for radial gradients through the -webkit-radial-gradient property, which includes shapes and sizing for the ellipse. Mind that only circular ellipses are supported for now.

Hopefully the new CSS3 Images module will be published as a Working Draft soon, as Tab Atkins is intending to request it. The new draft introduces the ability to use elements as backgrounds, as well as a more convenient way of cross fading background images.

The Web Inspector team didn’t seem to care about the New Year either and landed various patches. The protocol has been cleaned up and was enriched with Network, DOM Storage and Database domains. Disabled style properties get enabled when they’re edited and pasting a full property declaration will now split it up in a property and value automatically.

Other changes in this week include:

  • Support for HTML5′s :in-range and :out-of-range CSS selectors has been added.
  • Viewing the source of a pinned/app window won’t clone the tab’s state anymore.
  • The JSON.parse method in JavaScriptCore now properly exists as a function taking two parameters.
  • With the addition of the Surface3D class, the Pepper3D API is now complete, but not fully functional yet.
  • JavaScriptCore now recognizes vertical tabs and form feeds as valid JSON whitespace characters.
  • Accidental white-space for Chromium OS usernames will now be removed.
  • Sandboxed iframes no longer have access to the top.history methods.
  • Periods in Google Apps account names won’t be ignored anymore in Chromium OS.
  • WebKit’s client-based GeoLocation has been enabled for Chromium.
  • Background extensions have been enabled for all platforms, except for Chromium OS.
  • Submitting forms using the GET method to the current location as its action won’t reload the page.

Where my first day of work in 2011 has already passed, yours might just be beginning. See you next week!

7 Responses to “Gradients, two new range based CSS selectors and background extensions”

Both comments and pings are currently closed.

I guess these new additions will be seen in Safari 7 or 8 then. :P

Andy L

January 4, 2011 at 2:37 am


Why isn’t the “Chromium version” tag displayed together with the article? That would be very helpful!

Thanks again for your weekly “column”. :)

Peter Beverloo

January 10, 2011 at 12:56 pm

Good idea, Andy! I have added the Chrom(ium|e) version right at the end of the category list.

Andy L

January 10, 2011 at 9:31 pm

> I have added the Chrom(ium|e) version right at the end > of the category list.

Great! Thanks, Peter!

Wow that was strange. I just wrote an incredibly long comment but after I clicked submit my comment didn’t show up. Grrrr… well I’m not writing all that over again. Anyways, just wanted to say wonderful blog!