Archive for the ‘CSS’ category (6 posts)

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!

Read more (7 comments) »

Google Chrome 8, cloud printing and improved support for specifications

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

With the commit count being up 52 percent compared to last week, totaling 1,184 commits, activity has been a lot higher than two weeks ago. Highlights include Google Chrome 8, tomorrow’s announcement and lots of updates to standard support.

Exactly six weeks and over 8,472 commits after the release of Google Chrome 7, Google has updated the Stable channel to the 8th version of their browser. This release brings support for Element.classList, asynchronous script loading, support for the steps timing-function for transitions, the about:flags page and hyperlink auditing, enabled by default.

As a quick peek-ahead towards a feature for Google Chrome that’s currently scheduled for version 9, which would be around mid January: Google Cloud Printing. The idea is simple: connect your printer with GCP and you’ll be able to print to it from any computer or smart phone, regardless of where you are. Probably unrelated: an event will be happening in San Francisco tomorrow morning sharing some exciting news about Google Chrome. While I have a fair idea what it will be about, there is little point in more speculation.

WebKit has taken a huge leap forward in terms of support for various standards. ArrayBuffers may now be transmitted using XMLHttpRequest’s send-method, a form’s elements property now includes fieldset and keygen elements, getBoundingClientRect won’t truncate the coordinates to integers anymore and focussed <area> elements will no longer use the image’s focus-styles.

An <input type=color> will no longer accept named colors and the incremental property is now available on the DOM of all input elements. The toDataURL method of a canvas’ context in Chromium can now export the image as a JPEG, the marquee element’s properties have been updated per the HTML5 specification (besides the events) and, while they don’t have visual effects yet, support for the four text-emphasis properties from the CSS3 Text module was added.

Finally, support for both lower and upper Armenian list style types has been implemented and initial versions of the HTML5 <details> and <summary> elements have been added by Luiz Agostini. Even though they aren’t interactive yet, work has started!

Other interesting changes which occurred last week:

  • Option elements will not be bold anymore for certain Chromium versions.
  • The about:flags page will now show a drop-down for items where multiple values are possible.
  • Hyperlink auditing (<a ping>) may now be disabled via the about:flags page.
  • Two games have been made the default Apps: Entanglement and Poppit.
  • A command line flag for accelerated layers is now available, from about:flags as well.
  • data URLs within Chromium can now trigger downloads as well.
  • The GTK WebKit port finished the implementation of the MSAA ROLE_COMBO_BOX.
  • Pausing and resuming downloads now works for the WebKit2 architecture.
  • A tab overflow problem with right-to-left text has been solved.
  • The behavior of the decreasing outer-spin-button has been revised.
  • The \s modifier for the YARR Regular Expression Engine now also matches BOMs.
  • Safari on Mac OS X will be getting a panel for multiple suggestions for misspelled words.
  • Intel’s Yuqiang Xian eliminated a large overhead for a certain way of writing to a canvas.
  • The Qt port has enabled support for the Web Timing implementation.
  • More fine-tuning for Chromium OS’ User Interface.
  • Four more commits by Chris Rogers for the Web Audio API implementation.

No, of course I didn’t forget Web Inspector. The “revert to revision” system has been implemented for the revision-system in the Resources panel. The display name of an object will now equal its constructor rather than its type, copy(node) in the Console works again, the cookies tab for a Network resource will only show for Chromium, and, finally, the Inspector protocol has been cleaned up.

As already mentioned earlier in the post, the Google Chrome team scheduled an announcement for tomorrow. Be sure to keep an eye out for news and updates, I’ll certainly devote some tweets to the announcement!

Read more (8 comments) »

Removal of the CSS Variables implementation and performance optimizations

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

Last week the projects received another 1,126 commits, 615 for Chromium and 511 for WebKit. Some highlights include updated Terms of Service and the removal of the CSS Variables code.

To start off with improved standards support, the stepUp and stepDown API methods for certain input elements have been updated to match the specification in case step-mismatching occurs. The unloadEventStart property has been added for the Web Timing implementation.

In scope of the Web Audio API, event hooks were added for JavaScript Audio Nodes, as well as custom bindings for AudioNode. More work has been completed on vertical text as well: support for vertical text in ruby was enhanced and fonts with no vertical metrics will now synthesize baselines.

WebKit’s implementation of CSS Variables has been removed. Even though it has been disabled for ages and the implementation never shipped in stable builds, I’m quite a fan of variables. It just makes creating and, more importantly, maintaining large websites a lot easier. Nevertheless, since Google really wants the feature to be implemented, be sure to keep an eye out for this bug if you’re interested as well.

Implementation is one thing, but getting them standardized and available in other engines won’t be easy. With an essay like this around from a member of the CSS Working Group and a lot of discussion in general, reaching a consensus on any syntax, behavior or draft won’t be simple.

Other updates which occurred last week:

  • Google Chrome’s Terms of Service have been updated, adding additional terms for Enterprise use.
  • The style property on attribute nodes has been removed, except for Objective-C bindings.
  • Internally Web Inspector’s Storage Panel has been renamed to Resources Panel as well.
  • CSS files included for Chromium’s Web Inspector will be concatenated.
  • WebKit now really passes the Acid 3 test, as two bugs were cancelling each other out.
  • Synchronization of resizing the renderer for accelerated compositing no longer is Darwin-specific.
  • Downloads in Chromium may now be restarted if they previously have been cancelled.
  • Asynchronous file writers will now be available for Web Workers.
  • The fullscreen UA-stylesheet will now only be injected when the document is in fullscreen mode.
  • Multiple background images on an element won’t cause repeated repaints anymore.
  • More message-functions have been added in preparation of full support for interactive validation.
  • Navigating on websites with dark backgrounds used to result in white flashes – it won’t anymore.
  • The focus ring on image maps has been updated to take zooming into account.
  • The spatial navigation’s node selection algorithm has been updated quite significantly.
  • The network-error pages will now only contain gradients if the user’s display supports high color depths.
  • DirectX diagnostics will now be gathered asynchronously on about:gpuinfo due to performance reasons.
  • A search box has been added to the DOM UI, but it doesn’t actually do anything yet.
  • The Omnibox Extension API has been moved out of its experimental status.
  • The “Edit Bookmark” dialogs on Chromium for Windows are now resizable as well. Great change really.
  • Paul Kinlan, part of Chrome’s Developer Relations team, evidently thinks development is moving slowly 😉

And that’s all for this week. If you happen to be a member of Fronteers, the annual general meeting will be held on the 24th of November. Furthermore, I’ll be giving a presentation about the Audio APIs on the 13th of December in Groningen, the Netherlands. If you speak Dutch and would like to attend, feel free to sign up!

Read more (3 comments) »

Last Week: Asynchronous script execution and GPU Acceleration by default

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

With just over a thousand commits in the last seven days, the majority of which were pushed towards the WebKit repository, activity seems to be slightly down in comparison with the previous weeks. Nevertheless, last week brought some interesting changes: changes to the script element, CSS timing functions and Hardware Acceleration for the masses.

On Wednesday Google made an announcement which was quite hard to miss: Google Instant. Google Search anticipates on what you’re going to search for and starts displaying results while you’re still typing. Chrome now features a similar possibility named match preview, although I think Chrome Instant sounds more appropriate. You can enable it by supplying the –enable-match-preview flag when launching Chromium, but keep in mind that the implementation still is rather rough.

Since the new HTML5 Parser and Tree Builder in WebKit kept timed script execution in mind, Tony Gentilcore was able to land support for <script async> only a few days after he added support for the defer attribute. To re-iterate, using the defer-attribute defers executing the script to after parsing the page has been completed. The async-attribute enables asynchronous execution of the script as soon as it’s available, therefore not blocking the parser.

Following the discussions of the face-to-face meeting of the CSS Working Group three weeks ago, Apple’s Dean Jackson modified the CSS3 Transitions and Animations modules to include a new timing function called “steps“. The name is fairly obvious: instead of having a continuous transition, the selected properties transition in a predefined number of steps. This timing function landed in WebKit last Thursday!

As you can see, all seven timing functions for transitions have been included in this example. The animated color-boxes in the JavaScript column show what a browser should be doing according to the specification, while the CSS column shows how your browser displays it. Furthermore, if you’re using a modern browser, you can see an animated graph displaying how a certain timing function works by clicking on its name!

Other updates which occurred in WebKit and Chromium last week include:

Finally, for the ones of you who like to be up-to-date as well, I’ve added RSS feeds for my Vendor Prefixed CSS Properties page (feed) and the overview pages of Google Chrome Command Line Switches (feed). Since most content on these pages gets updated automatically, I figured this would be a nice addition. While I cannot guarantee that they already work perfectly at this point, in theory they should be fine. See you next week!

Read more (7 comments) »

Last week: CSS WG meeting at Opera, Chrome Labs and the year 275759

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

Last week the CSS Working Group met at Opera’s office in Oslo, Norway, for a face to face meeting. Following tight planning, the members met three days in a row discussing topics ranging from the open CSS 2.1 issues, various CSS 3 modules and other subjects such as hit testing. Some of the results are clear: all open CSS 2.1 issues have been resolved and a range of specifications will have their priority increased (such as CSS Transitions and Transforms).

Furthermore, CSS 2.1 is expected to become a Proposed Recommendation by the end of the year. This would mean that the specification could be a W3C Recommendation early next year, allowing the working group to focus their attention to CSS 3 and beyond. During the meeting Mozilla’s David Baron also mentioned that Firefox will be implementing 3D Transforms, already available in Safari and Google Chrome.

As for Chromium and WebKit, a combined amount of 1282 commits were uploaded to their repositories. While this means there were fewer commits than to last week, there’s a lot more news to share about the projects. I’ll highlight some interesting items which occurred last week, and briefly list other interesting changes.

Firstly, it’s becoming more and more obvious to the Chrome team that their browser is lacking important features for the enterprise market. An area Google can tackle is policies. Policies are a way of defining the settings of the browser through the registry, Microsoft’s Administrative Template files or the, so far unannounced, ChromeOS Enterprise Daemon. Other policy and preference stores may be added in the future.

Policies allow companies to easily define common settings such as the proxy server to use, account synchronization and whether JavaScript should be enabled for websites. Unfortunately this also enables companies to block Chrome updates, but I’m sure the Chrome team will be looking at options to prevent people from doing this. Last week support for three new policies was added.

Another large update is the initial inclusion of the Google Chrome Labs page. Most other Google products, as well as Google itself, include a page with experimental features. Considering Chrome supports about 320 command line flags it won’t surprise you that adding such a page makes certain tests a lot more accessible. Google’s Nico Weber committed the initial version just over four days ago. You can try it out yourself by downloading a recent nightly and visiting about:labs.

The WebKit team has invested a lot of time in improving their support for various standards. Adam Barth and Eric Seidel enabled the last part of the new HTML5 Tree Builder: fragment parsing. Furthermore support for HTML5 compliant doctype switching was added, symbolic CSS3 list-style-types are now supported and file inputs now respect HTML5’s fake path. Finally, due to this addition, you can now use HTML5’s date input types to start making plans for your birthday in the year 275759.

Now that the new Tree Builder has been completed, except for a lot of fine-tuning of course, thousands of lines of code were up for deletion. The old Tree Builder itself wast removed on the 24th of August. Further cleanups were done with the removal of their current implementation of Mozilla’s XML Binding Language (XBL). It hadn’t been maintained in years, so the decision was made to remove it in total.

Further updates last week

Starting next Thursday I will be in Brighton, United Kingdom. Together with KrijnAnne and Matijs I’ll be attending dConstruct 2010. Perhaps I’ll be seeing you there? 🙂

Read more (3 comments) »

Overview of vendor-prefixed CSS properties

Published on in CSS.

For some vendor-specific CSS research I’m doing, I’ve created an overview of vendor-prefixed CSS properties that are currently supported in the four most popular rendering engines. The overview also contains references to the specifications they’re part of (if any), non-prefixed versions in other browsers and some notes on special conditions of a property.

One thing I noticed when creating the overview, is the amount of non-standard properties in WebKit. Looks like they got some catching up to do in terms of documenting their features. If you have any feedback or corrections, feel free to post a comment or poke me on Twitter!

Go to the overview »

Read more (11 comments) »