YUI! Graded Browser Support Update

Graded Browser Support Update: „

This post announces an update to Graded Browser Support. The GBS page on the YUI site always has the most current information. This post includes a list of primary changes, the updated chart of browsers that receive A-grade support, the GBS forecast, and notes specific to the YUI Library.

Primary Changes

These changes are included in this update.

  • A-grade support for Firefox 3 begins.
  • A-grade support for Firefox 2 is reduced to Win XP and Mac 10.5.
  • A-grade support for Opera 9.5 begins on Win XP and Mac 10.5.
  • A-grade support for Win 98 is discontinued, as previously forecast.
Win 2000 Win XP Win Vista Mac 10.4 Mac 10.5
Firefox 3.† A-grade A-grade A-grade A-grade A-grade
Firefox 2.† A-grade A-grade
IE 7.0 A-grade A-grade
IE 6.0 A-grade A-grade
Opera 9.5† A-grade A-grade
Safari 3.0† A-grade A-grade

The dagger symbol (as in ‘Firefox 3.†’) indicates that the most-current non-beta version at that branch level receives support. Put another way, † means ‘the most recent’ instead of ‘all.’

GBS Forecast

In addition to the effective-immediately changes, we’re keeping our eyes on pending developments.

  • Internet Explorer 8

    GBS does not extend A-grade support to beta versions of browsers. (They receive X-grade support by definition.) However, it’s important to be aware of forthcoming releases, especially from established brands that enjoy rapid adoption once generally available (GA). We are currently watching the development progress of Internet Explorer 8.

    We made an exception to our ‘no-betas’ stance during IE7’s beta phase in recognition of IE’s market share and ability to promote rapid adoption. The exception — committing development and QA resources to provide A-Grade prior to a GA release — gives us an opportunity to learn the new browser’s quirks and provide feedback while it is still being developed. And it means our sites are prepared when it goes GA. We will likely extend the same accommodation to IE8. Stay tuned.

Notes Specific to the YUI Library

  • YUI version 2.5.2

    YUI 2.5.2, released May 28, 2008, includes full support for Firefox 3.0 and Opera 9.5, even though those two browsers were just added to GBS in this update.

(Via Yahoo! User Interface Blog.)

Internet Explorer 8: Beta 1 in deutscher Sprache

Internet Explorer 8: Beta 1 in deutscher Sprache: „Microsoft bietet ab sofort die Beta 1 des Internet Explorer 8 auch in deutscher Sprache an. Anfang März 2008 erschien die erste Vorabversion des kommenden Microsoft-Browsers zunächst nur in englischer Sprache. Bis auf die Lokalisierung unterscheiden sich die beiden Beta-Fassungen nicht. Der Browser unterstützt unter anderem CSS 2.1 sowie erste Teile von HTML 5 und mit Hilfe von ‚Web Slices‘ lassen sich einzelne Teile einer Website gesondert über die Favoriten-Leiste abrufen. (MSIE, Microsoft)“

(Via Golem.de.)

Optimizing Page Loading in the Web Browser

Interessanter Artikel, der unter anderem kurz auf die SCRIPT-Tag-Problematik eingeht.

Optimizing Page Loading in the Web Browser: It is well understood that page loading speed in a web browser is limited by the available connection bandwidth. However, it turns out bandwidth is not the only limiting factor and in many cases it is not even the most important one.


It turns out that figuring out ‘all the associated resources’ is the hard part of the problem. The browser does not know what resources it should load until it has completely parsed the document. When the browser first receives the HTML text of the document it feeds it to the parser. The parser builds a DOM tree out of the document. When the browser sees an element like <img src> that references an external resource it requests that resources from the network.

Problems start when a document contains references to external scripts, <script src>. Any script can call document.write(). Parsing can’t proceed further before the script is fully loaded and executed and any document.write() output has been inserted into the document text. Since parsing is not proceeding while the script is being loaded no further requests for other resources are made either. This quickly leads to a situation where the script is the only resource loading and connection parallelism does not get exploited at all. A series of script tags essentially loads serially, hugely amplifying effect of the latency.

The situation is made worse by scripts that load additional resources. Since those resources are not known before the script is executed it is critical to load scripts as quickly as possible. The worst case is a script that load more scripts (by using document.write() to write <script> tags), a common pattern in Javascript frameworks and ad scripts.


(Via Surfin‘ Safari.)

Safari 3.1

Safari 3.1 ist soweit und lässt sich ab sofort auf der Apple-Seite herunterladen – sowohl für den Mac als auch für Windows-PCs. Im Vorfeld hatte sich bereits anhand von Vorversionen gezeigt, dass die neue Version ein großer Wurf werden könnte.

Nun bestätigt Apple per Pressemitteilung: „Safari baut Webseiten bis zu 1,9 mal so schnell wie der Internet Explorer 7 und bis zu 1,7 mal so schnell wie Firefox 2 auf“. JavaScript sei bis zu sechs Mal schneller als bei anderen Browsern. Apple unterschlägt bei diesen Geschwindigkeitsangaben zwar, dass die Konkurrenz ebenfalls nicht schläft und Betaversionen von Firefox 3 bereits fast an die Geschwindigkeit von Safari herankommen – dennoch hat Apple unseren Tests zufolge derzeit die Nase vorn, sowohl in punkto Gewschwindigkeit als auch bei der Komaptibilität mit aktuellen und kommenden Web-Standards, wie der Acid3-Test beweist. Safari 3.1 unterstützt zudem als erster Browser sowohl Video- und Audio-Tags in HTML 5 als auch CSS Animationen und kommt darüber hinaus mit CSS Web Fonts zurecht. Voraussetzung ist mindestens Mac OS X 10.4.11, das Update ist über die Software-Aktualisierung erhältlich und für Leopard 39 Megabyte groß, der Tiger-Download zählt 49 Megabyte.

Apple Informationen zum Update: http://docs.info.apple.com/article.html?artnum=307467-de

Via macnews.de

YUI 2.5.0 Released — Big upgrades to DataTable, new Layout Manager, Flickr-style multi-file Uploader, and more

YUI 2.5.0 Released — Big upgrades to DataTable, new Layout Manager, Flickr-style multi-file Uploader, and more: „

The YUI Team just released version 2.5.0 of the library. We’ve added six new components — Layout Manager, Uploader (multi-file upload engine combining Flash and JavaScript), Resize Utility, ImageCropper, Cookie Utility and a ProfilerViewer Control that works in tandem with the YUI Profiler. This release also contains major improvements to the DataTable Control and new Dual-Thumb Slider functionality in the Slider Control. Here are the highlights:

  • DataTable Control: Jenny Han Donnelly has been joined by Luke Smith for this development cycle, and we’re all thrilled with what they’ve produced. DataTable in 2.5.0 gets a more robust markup structure that allows greater control over all aspects of the table. This release also includes major performance enhancements, improvements to the fixed-header implementation for vertical scrolling, built-in support for horizontal scrollling, an all-new Paginator class, support for drag-and-drop column reordering, and a new set of column APIs with hooks for showing, hiding, adding and removing columns.
    The DataTable and its new show/hide column interface.
    DataTable has been one of YUI’s most popular and important components since its debut, and this is its strongest release yet. If you have existing DataTable implementations that you want to upgrade, take a look at the new User’s Guide, as it has some detailed notes about API changes. The DataTable examples roster is another nice place to check out the new code in action.
  • The YUI Layout ManagerLayout Manager: Dav Glass has a lot for you to enjoy in 2.5.0, but top billing goes to his new Layout Manager. Layout Manager eases development of multipane UIs that take up either the full viewport or the full canvas of any block-level element. Layout Units within a layout are resizeable, collapsible, removable and swappable; transitions between expanded and collapsed states have built-in animation support. Whether you’re creating a full-screen application like Yahoo! Mail or a rich multi-pane pop-up, Layout Manager is a great place to start.
  • Uploader: If you’ve ever built a UI for uploading files via a browser, you know what the big pain points are: One file at a time, no easy way to track upload progress, no programmatic access to file metadata, etc. The new YUI Uploader addresses these issues and others, allowing for the creation of more powerful, intuitive, and responsive file upload experiences. Allen Rabinovich of the ASTRA Library team did the legwork on this one, and it’s the same code that underlies the Flickr Uploader. Uploader is our second JavaScript/Flash hybrid control (following on the heels of the Charts Control in 2.4.0).
    The YUI Uploader is the same code that drives Flickr's multi-file photo uploading interface.
  • Resize Utility: Layout Manager is built upon a new YUI utility, Resize. Dav’s Resize Utility formalizes the support that YUI Drag & Drop has long provided in example form and makes it easier for you to make any block-level element resizeable. Resizing can be implemented directly (the resized element resizes in real time during the interaction) or by proxy (a proxy element visualizes the interaction until its conclusion, at which time the resized element snaps to its new size).
  • The YUI ImageCropper ControlImageCropper Control: The Resize Utility makes a lot of things easier — and one of those is the implementation of an ImageCropper interface, which Dav built out on top of Resize for 2.5.0. Take a look at the examples and be sure to check out the support Dav provided for modifier keys in this very desktop-like UI control.
  • Cookie Utility: When he’s not busy writing books or working on My Yahoo!, Nicholas C. Zakas is cranking out new code for YUI. In 2.5.0, he contributes the Cookie Utility, a simple but powerful component that helps you get maximum mileage out of your limited cookie space. Because browsers limit the number of cookies you can set per domain (and because that limitation can sneak up on you if you manage a large site with many subdomains), the Cookie Utility supports ’sub-cookies.‘ Sub-cookies pack multiple name-value pairs under the umbrella of a single cookie, expanding the number of data points that you can store in cookie space.
  • ProfilerViewer Control: 2.4.0 saw the release of Nicholas’s Profiler, a headless, cross-browser kit for profiling JavaScript functions. To make it easier to access and interpret the data that Profiler collects, we’ve added a ProfilerViewer Control in 2.5.0 that sits on top of Profiler and visulizes its accrued data. ProfilerViewer leverages the Charts Control and the DataTable Control. Taken together, Profiler and ProfilerViewer provide another arrow in the development quiver that includes tools like Firebug’s integrated profiling interface.

    The ProfilerViewer interface.

  • The YUI Slider Control now has dual-thumb support.Slider Control with Dual Thumb Support: Supporting dual-thumb interactions in our Slider Control has been on our list for awhile, and Luke took the opportunity to get this out to you in 2.5.0. Sliders are ‘finite range controls’; dual-thumb sliders allow you specify a sub-range within the control’s larger range. The classic use case for dual-thumb sliders is on shopping sites, where such controls can allow users to filter results based on price range. Check out the User’s Guide, example, and the new Slider Cheatsheet (which has a second page dedicated to dual-thumb implementations).
  • We’re using this release to promote the following components from beta to GA status: ColorPicker Control, Get Utility (for cross-domain, dynamic loading of script and CSS files), JSON Utility, ImageLoader Utility, and YUI Test Utility. These promotions reflect the maturity of those components and their very low bug traffic. As always, we’re releasing all new-for-2.5.0 components under the beta moniker, and we’re looking forward to your feedback on those once you get a chance to try them out.
  • Full details on the release, including a rollup of the changelog for all components and a bug/feature manifest, are available in Georgiann Puckett’s update to the YUI developer forum this morning.

One More Thing…

YUI now ships with more than 270 examples, many of which are accompanied by full tutorials to help you get started using YUI. And while individual examples are good, we’ve gotten a number of requests to create an über example, one that pulls in and makes use of a wide range of YUI components in a single sample application — while still being YUI-centric and not littered with noisy implementation logic.

The incomparably prolific Dav Glass rose to the challenge for 2.5.0 with a complex, multi-component example that uses Layout Manager as its basis and Yahoo Mail as its inspiration.

Dav Glass's multi-module YUI application example.

Let’s Celebrate!

We’re excited to get 2.5.0 out the door and, as luck would have it, we’ve got a fantastic excuse to celebrate. YUI’s (and the Yahoo Pattern Library’s) second anniversary party is coming up next week (February 26, 5 p.m., Sunnyvale), and we’d love to have you join us. Sign up on Upcoming to let us know you’ll be stopping by at Yahoo! HQ for some beer and general revelry. We look forward to showing off some of the stuff you all have been doing with YUI in the past two years and we’ll talk a bit about where Patterns and YUI are headed from here.

(Via Yahoo! User Interface Blog.)

In All Fairness … Internet Explorer Still Stinks

In All Fairness … Internet Explorer Still Stinks: „

This is the story of how SitePoint tried to give Internet Explorer a fighting chance … and it lost anyway.

If you’ve been paying attention, you’ll have caught the subtle (and not-so-subtle) hints that SitePoint has been quietly working on a series of references, beginning with The Ultimate CSS Reference.

position property sneak peek

What hasn’t been revealed (until now) is that this reference will be released not just as a slick SitePoint book, but also as a freely-accessible Reference section right here on sitepoint.com! Our aim with this project is to produce the definitive CSS reference, both on the Web and in print.

Obviously, a big part of assembling this reference has been compiling browser compatibility information. And although our hard-working authors might disagree, one of the trickiest parts of the project has been determining how that information should be presented.

The Inherit Issue

A good example of this is the inherit value, which according to the spec is supported by all CSS properties. A little over a year ago, David Hammond’s site that rates browser standards compliance generated an uproar on Chris Wilson’s blog when it counted the lack of support for inherit as a point against IE for each and every CSS property.

Our reference will similarly indicate the level of support for each property in each of the major browsers, but what level of support do we indicate for IE, which doesn’t support the inherit value? Do we count this as a failing in IE’s support for each and every property, or do we set that aside as a single unsupported feature, and rate IE’s support of properties in the absence of inherit?

On the one hand, declaring that IE fully supports a property when one of its supported values doesn’t work could be seen as misleading. On the other hand, if the best support level we can list for any property in IE is ‘partial’, then you can’t tell at a glance when IE does fully support a property (within the limitations of its CSS implementation), and our reference becomes that much less useful.

After lengthy discussion with the authors, we decided to treat inherit as a separate unsupported feature, and to list properties that would work perfectly in IE if not for inherit as fully supported. The vote was certainly not unanimous, but I felt like we were doing the right thing by IE—giving the work that Microsoft did in IE7 a chance to shine.

Except … it didn’t

position property compatibility table

In ignoring inherit when rating property support, our intention was to enable the many newly-supported CSS features in IE7 to show up in our compatibility tables.

After all, IE7 now supports position: fixed across all elements, completing (except for inherit, of course) support for that property. And IE7 introduced plenty of other new features, such as support for the child selector (>). It would be nice for our compatibility tables to reflect this, we thought—naively, as it turns out.

Once the authors had compiled all this compatibility information, what we discovered was that arguing about the difference between ‘partial’ and ‘full’ support in IE had been an academic exercise … because the vast majority of CSS features are too buggy in IE to rate either!

The position property does support fixed in IE7, but setting this property to anything but static causes that browser to mess up the stacking of overlapping elements by incorrectly establishing a new ’stacking context’, so we are forced to rate this property as ‘buggy’.

child selector compatibility table

And Microsoft did implement the child selector as a brand new feature in IE7, but even in this golden age of standards, this new feature came with obvious parsing bugs (e.g. A > /* comment */ B will fail to work).

After racking my brains for a CSS feature that would have newly achieved ‘full’ support in IE7 without being afflicted by bugs, I happened upon the dimension properties. width and height had serious bugs fixed in IE7, and IE7 added support for min-height, max-height, min-width, and max-width. And as of the current draft of our CSS reference, these properties are listed with ‘full’ support in IE7! Hooray!

Sadly, a little research has revealed reports of a bug in IE7 that affects all of these properties. We have yet to confirm this bug, but if it’s the kind of thing that will impact real-world use of these properties, they’ll lose their ‘full’ rating as well.

Internet Explorer Still Stinks

All this adds up to Internet Explorer making a very poor showing in our compatibility tables, despite us going out of our way to give it a fighting chance.

CSS features that we can honestly list as having ‘full’ or even ‘partial’ support in IE are few and far between (color is one, font-size is not). Most of them are ‘buggy’, even in IE7 … and we expect even more IE bugs to come out of the woodwork once we release the Web version of the reference for public comment.

Obviously, with IE7 Microsoft made great strides in correcting the most glaring and painful issues that plagued developers in IE6. But the unavoidable truth revealed by this reference is that Internet Explorer is still miles behind the competition.

Perhaps the new layout engine and other improvements coming in IE.Next will make up some of the difference … or perhaps Microsoft just isn’t interested in fixing (and in the case of IE7, avoiding) bugs that aren’t painfully obvious.

This article provided by sitepoint.com.

(Via SitePoint Blogs.)

CSS Transforms

CSS Transforms: „WebKit now has rudimentary support for specifying transforms through CSS. Boxes can be scaled, rotated, skewed and translated. The current nightly builds support affine transformations.

A transform can be specified using the -webkit-transform property. It supports a list of functions, where each single function represents a transform operation to apply. You can chain together operations to apply multiple transforms at once to an object (e.g., if you want to both scale and rotate a box). The supported primitives are:

scale, scaleX, scaleY – Scale an object around the transform origin. These functions take a number as an argument. The number can be negative (if you want to flip an object).
rotate – Rotate an object around the transform origin. This function takes a CSS angle (e.g., degrees or radian units).
translate, translateX, translateY – Translate an object. These functions take lengths or percentages as arguments. Percentages are relative to the border box of the object.
skew, skewX, skewY – Skew an object. These functions take CSS angles.
matrix – Specify a full affine transform matrix. This function takes six values. The last two values are the tx and ty, and they can be lengths or percentages.

In addition to the -webkit-transform property, we have introduced a -webkit-transform-origin property that allows you to specify the origin of the transform. It has the same syntax as background-position and defaults to the center of the object (so that scales and rotates will be around the center of the border box by default).

At the moment transforms do not affect layout, so they are similar to relative positioning in that respect. We are exploring ideas for how to do transforms in ways that could affect layout.“

(Via Surfin‘ Safari.)