Ajaxian

Audible Ajax Episode 29: Interview with Google’s Gavin Doughtie

Fri, 05 Sep 2008 07:04:54 -0700

In the run up to The Ajax Experience conference coming up at the end of this month, Dion and I thought it would be fun to interview a few of the speakers. In this episode of Audible Ajax, we talk with Gavin Doughtie, a Dojo contributor and Google employee. The topics range from browser graphics to hiring good JavaScript engineers. Hope you enjoy it!

We have the audio directly available, or you can subscribe to the podcast.

The JavaScript Framework Long Tail

Fri, 05 Sep 2008 07:04:54 -0700

One of the reasons Dion is such an effective editor here at Ajaxian is his sense for filtering all of the available news from the Ajax community down to about three stories a day. Truth-be-told, with all the submissions we get and what we find on our own, we could easily post 10 stories a day. But in today’s saturated environment, we find three stories is about the right number to keep from overwhelming our readership with too much noise. We hope you agree, and we’re interested in hearing if you feel otherwise.

A consequence of this arbitrary filtering is that some of the lesser known frameworks and libraries simply don’t get covered. We never try to be king-makers, nor do we have that kind of clout–we simply can’t cover everything.

We enjoyed Six Revisions’ recent round-up of 10 new/up-and-coming JavaScript frameworks, many of which we’ve never covered, like Midori, Archetype, JUNE, UIZE, Simple.js, and fleegix.js.

The adventurous among you should take a look! Not too long ago, an up-start named jQuery shook up the existing players… some of these may be next.

Cappuccino and Objective-J released as opensource

Fri, 05 Sep 2008 06:04:02 -0700

We were all very impressed with the work that the 280 North team did with 280 Slides, and they fulfilled their promise by opensourcing Cappuccino and Objective-J under LGPL:

Cappuccino is an open source application framework for developing applications that look and feel like the desktop software users are familiar with.

Cappuccino is built on top of standard web technologies like JavaScript, and it implements most of the familiar APIs from GNUstep and Apple’s Cocoa frameworks. When you program in Cappuccino, you don’t need to concern yourself with the complexities of traditional web technologies like HTML, CSS, or even the DOM. The unpleasantries of building complex cross browser applications are abstracted away for you.

Cappuccino was implemented using a new programming language called Objective-J, which is modelled after Objective-C and built entirely on top of JavaScript. Programs written in Objective-J are interpreted in the client, so no compilation or plugins are required.

The team has done a good job doing what many opensource projects miss, giving documentation and discussion. It will be interesting to see how others take this work and produce compelling Web based products. Let us know if it is you!

jTPS: Animated Sortable Datagrid jQuery plugin

Fri, 05 Sep 2008 05:03:55 -0700

The data grid above is a jQuery plugin jTPS that creates a table you can sort and page through, using nice animations, all via a simple call out:

PLAIN TEXT

JAVASCRIPT:

$(document).ready(function () {
$(’#TABLETOCONTROL’).initTable( {perPages:[5,12,15,50,'ALL']} ).controlTable();
});

gameQuery:

Fri, 05 Sep 2008 01:37:11 -0700

Selim Arsever wants to make it easier to great JavaScript games, so he created gameQuery, based on jQuery.

gameQuery allows you to declare animations, which are made of one image with a succession of frames just like in a css sprite. An animation in itself doesn't exist until it's associated with a sprite.

PLAIN TEXT

JAVASCRIPT:

var myAnimation = new Animation({ imageURL: "./myAnimation.png", numberOfFrame: 10, delta: 60, rate: 90, type: Animation.VERTICAL | Animation.ONCE});

Dojo Multifile Uploader with Flash

Thu, 04 Sep 2008 08:54:36 -0700

SitePen continues their work on Deft with a multi-file uploader:

The Dojo Toolkit now has support for multi-file uploads, thanks to the new Deft project. The dojox.form.FileUploader class embeds a hidden SWF file in the page which, when triggered, will open a system dialog that supports multiple file selection, and also file masks, which allows the user to filter their selection by file type.

Better yet, it’s fully degradable. If the user does not have version 9 or greater of the Flash Player installed it can, depending on the options you set, present the user with a standard HTML file input instead (or the option to install the latest Flash Player). The HTML form also supports multiple files, although due to browser restrictions, only one can be selected at a time. But they are all uploaded at once.

A major benefit to developers is the flexibility to supply your own styled upload button. For example, a paperclip icon toolbar button in an email application should not look like the standard file input with a text field followed by a “browse …” button. What inspired this design was working on projects where designers and clients would hand me a specification which would say, “the upload button looks like this“.

To use it? Fairly simple:

PLAIN TEXT

JAVASCRIPT:

var uploader = new dojox.form.FileInputFlash({
uploadUrl:"http.localHost/FileUpload.php",
button:myButton,
uploadOnChange: false,
selectMultipleFiles: true,
fileMask: ["All Images", "*.jpg;*.jpeg;*.gif;*.png"],
degradable: true
});

Want to try it out?

This comes after the YouTube uploader that uses Gears.

Zend Framework 1.6: Dojo, SOAP, Testing, Tooling, and more

Thu, 04 Sep 2008 07:55:24 -0700

Andi Gutmans announced Zend Framework 1.6 which includes the new Dojo support which they put to work on the site itself:

With this release we continue to provide enterprise-grade features with our new Zend_Soap component, which brings PHP-style simplicity to building and exposing SOAP web services. This component can operate in both WSDL and non-WSDL mode and makes creating or consuming a SOAP service a snap.

Preview of Tooling Project:

Zend_Tool is a component currently under development in the Zend Framework library. It provides services for generating and managing ZF-based projects. We are offering a preview release along with ZF 1.6 to collect feedback from users in a variety of environments and with different requirements. Please let us know how Zend_Tool works for you by visiting the Zend_Tool focus group site at http://tech.groups.yahoo.com/group/zf-tool/. We will also be posting an overview of Zend_Tool on the Zend Developer Zone within the next 24 hours.

Lucene 2.3 Index File Format Support:

Starting with 1.6, ZF supports version 2.3 of Lucene's index file format. This update to the format allows segments to share a single set of doc store (vectors & stored fields) files, which enables faster indexing in certain cases. This also makes Zend_Search_Lucene compatible with the latest version of the Lucene project.

Zend_Session save handler for Database Tables:

This is a database independent adapter for use with Zend_Session. Saving sessions in the database may be used for supporting sessions which must be maintained across multiple servers or kept for logging purposes.

Paginator Component:

Zend_Paginator is a new component for displaying large data sets in groups of 'pages' on a website. It can paginate data from virtually any source, and it fetches data lazily to maximize performance and minimize memory use when the data set is particularly large (as is often the case with data stored in a relational database). Zend_Paginator comes with a few data source adapters out of the box, along with an interface for implementing additional data source adapters.

Figlet Support:

Zend_Text_Figlet can create large ascii-character-based text given a figlet font and a string to render. Although they’ve been around for a long time, Figlets are most useful for captchas nowadays, especially when a lightweight solution is required and/or bandwidth is constrained. In fact, the new captcha form element includes an adapter for figlets.

ReCaptcha Service:

ReCaptcha is a very cool service that provides text-based captcha images. The answers submitted to ReCaptcha help digitize printed books. The new captcha form element also includes an adapter for the ReCaptcha service. Read more about ReCaptcha here: http://recaptcha.net/learnmore.html.

Captcha Form Element:

A form element to render and validate captchas, which are commonly used to ensure a human is submitting a form and not a (potentially malicious) bot. The captcha form element is backed by several adapters for different captcha mechanisms, including GD-based graphics, figlets, and the ReCaptcha service. Users can implement their own adapters;each adapter takes care of validation and decorators to ensure the form element looks and behaves correctly, regardless of the captcha mechanism used.

Zend_Config_Xml Attribute Support:

XML attribute support has been added to Zend_Config_Xml that allows ZF developers to write smaller XML documents that are more human-readable. This attribute support is already seeing a lot of adoption inthe Zend_Tool project.

Zend_File_Transfer Component:

This is a new component used for transferring files from one machine to another over multiple protocols. It currently supports HTTP, with an adapter interface that can be implemented to support additional protocols in the future. This component also supports validation on the transferred file.

File Upload Form Element:

This component completes the HTML form element support in Zend_Form. Files can be chosen by the user, validated for properties such as size, and uploaded to the server simply by adding a file upload form element to your forms. The element utilizes Zend_File_Transfer internally to validate the uploaded file and move it to its final destination.

Zend_Wildfire Component with FireBug Log Writer:

Zend_Wildfire is a new component supporting the Wildfire protocol: http://www.wildfirehq.org/. This feature also adds a FireBug log writer to write server-side log events to a FireBug console. A specialized FireBug Zend_Db profiler is provided to log DB profiler data to the FireBug console, as well.

Media View Helpers (Flash, QuickTime, Object, and Page):

ZF 1.6 contains new view helpers for embedding Flash, QuickTime, Objects, and Pages in a view.

Zend_Translate adds the INI file format:

This addition adds to the long list of translation file formats it already supports.

IE 8 Security and nosniff

Thu, 04 Sep 2008 05:54:53 -0700

Eric Lawrence posted on IE 8 security issues in the beta 2 release, which include:

Restricting document.domain

In Internet Explorer 7, the following set of calls would succeed:

PLAIN TEXT

JAVASCRIPT:

// initial document.domain is app1.example.com

document.domain = "app1.example.com"; // 1. Domain property set to default value

document.domain = "example.com"; // 2. “Loosen” domain

document.domain = "app1.example.com"; // 3. “Tighten” domain

In Internet Explorer 8 and other browsers, the 3rd assignment will throw an exception, because app1.example.com is not a suffix of the then-current value, example.com.

Put simply, once you’ve loosened document.domain, you cannot tighten it.

Restricting Frame-Targeting

HTML5 also specifies the circumstances in which one frame is permitted to use the targetname parameter of a window.open() call to navigate another named frame or window.

The rules are meant to help prevent a window injection vulnerability. In a window injection attack, a malicious website in one browser frame attempts to “hijack” a frame or popup owned by a trusted webpage.

For instance, consider the scenario where http://contoso.com opens a popup window with the name helpPage.

PLAIN TEXT

JAVASCRIPT:

window.open("helpTopic.htm", "helpPage", "height=200,width=400");

If another page at http://evil.example.com attempts to hijack this window, like so:

PLAIN TEXT

JAVASCRIPT:

window.open("spoof.htm", "helpPage", "height=200,width=400");

…instead of navigating the helpPage window owned by Contoso.com, spoof.htm will instead open in a new browser window. While Internet Explorer 7 and 8 always show an address bar on every window, this new restriction makes window injection spoofs even less convincing.

MIME-Handling: Sniffing Opt-Out

As discussed in Part V of this blog series, Internet Explorer’s MIME-sniffing capabilities can lead to security problems for servers hosting untrusted content. At that time, we announced a new Content-Type attribute (named “authoritative”) which could be used to disable MIME-sniffing for a particular HTTP response.

Over the past two months, we’ve received significant community feedback that using a new attribute on the Content-Type header would create a deployment headache for server operators. To that end, we have converted this option into a full-fledged HTTP response header. Sending the new X-Content-Type-Options response header with the value nosniff will prevent Internet Explorer from MIME-sniffing a response away from the declared content-type.

For example, given the following HTTP-response:

PLAIN TEXT

HTML:

HTTP/1.1 200 OK

Content-Length: 108

Date: Thu, 26 Jun 2008 22:06:28 GMT

Content-Type: text/plain;

X-Content-Type-Options: nosniff

<html>

<body bgcolor="#AA0000">

This page renders as HTML source code (text) in IE8.

</body>

</html>

XSS Attack Surface Reduction: CSS Expressions Disabled IE8 Standards Mode

Also known as “Dynamic Properties,” CSS expressions are a proprietary extension to CSS that carry a high performance cost. CSS Expressions are also commonly used by attackers to evade server-side XSS Filters.

As of Beta 2, CSS expressions are not supported in IE8 Standards Mode. They are still supported in IE7 Strict and Quirks mode for backward compatibility. While the IE8 XSS Filter can block attempts to reflect CSS Expressions as part of an XSS attack, blocking them in IE8 Standards Mode brings a performance benefit, improves standards-compliance, and acts as an attack surface reduction against script injection attacks.

Adding Custom Tags To Internet Explorer, The Official Way

Wed, 03 Sep 2008 13:55:11 -0700

There have been some clever tricks to create new custom tags in Internet Explorer, such as the createElement trick. However, I never realized that Internet Explorer itself provides a facility to define new tags in the markup and have them styled, since Internet Explorer 5!

Some details from the MSDN documentation on this feature, titled "Using Custom Tags In Internet Explorer". The trick lies in making sure you namespace things. For example, in the MSDN docs for this feature the example of creating a new JUSTIFY tag is given:


<HTML XMLNS:MY>
<MY:JUSTIFY>
   This paragraph demonstrates sample
   usage of the custom MY:JUSTIFY tag in a document.
   By wrapping the paragraph in start and end
   MY:JUSTIFY tags, the contained
   text is justified within the specified width. Try
   resizing the window to verify that the
   content is justified within a 500-pixel width.
   And don't forget to right-click anywhere on the
   window and "View Source".
</MY:JUSTIFY>

You can even style this with CSS!


<HTML XMLNS:MY>
<STYLE>
@media all {
   MY\:JUSTIFY  { text-align:justify; width:500 }
}
</STYLE>

The docs then go on to discuss applying an Internet Explorer 'behavior' to this custom element to give it expanded abilities:

Custom tags become much more interesting when applied with a DHTML behavior. Introduction to DHTML Behaviors (or behaviors) are applied to elements on a page, the same way styles are, using cascading style sheets (CSS) attributes. More specifically, the proposed CSS behavior attribute allows a Web author to specify the location of the behavior and apply that behavior to an element on a page.

Using DHTML in Internet Explorer 4.0.0, it is possible to create simple animated effects, such as flying text, by manipulating the position of elements on a page over time. Beginning with Internet Explorer 5, this functionality can be encapsulated in a behavior, applied to a custom <InetSDK:FLY> tag, and wrapped around blocks of text on a page. This can be applied to cause text to fly from various directions.

I'm going to do more testing on this functionality today to see how deep it goes, but if true it makes it easier to create browser shims for Internet Explorer for things like SVG, MathML, etc., including HTML 5 (if we namespace the HTML 5 elements, required to get this to work).

The reason I'm looking for an alternative to the createElement trick is I've found that it doesn't work with nested custom tags, which limits its usefulness. For example, I've found the following to not enter the DOM correctly:

PLAIN TEXT

HTML:

<html>
<body>
<custom_container>
<custom_child></custom_child>
</custom_container>
</body>
</html>

Brendan discusses how TraceMonkey is climbing faster; Ruby on the Web with V8

Wed, 03 Sep 2008 11:55:12 -0700

Brendan Eich jumped right in and benchmarked the tip of tree for TraceMonkey, with the V8 version that came with Google Chrome:

We win on the bit-banging, string, and regular expression benchmarks. We are around 4x faster at the SunSpider micro-benchmarks than V8.

This graph does show V8 cleaning our clock on a couple of recursion-heavy tests. We have a plan, to trace recursion (not just tail recursion). We simply haven't had enough hours in the day to get to it, but it's "next".

Brendan shows SunSpider running there, and V8 has that and other benchmarks to run too. Isn't it great when a performance arms war is on? Thank god for competition here. We all win.

Ray Cromwell ran tests himself, on his own app Chronoscope (note, probably NOT using tip of tree TraceMonkey):

Chronoscope is written in GWT, and to some extent, the GWT compiler may negate some of Chrome's V8 technology in the sense that GWT "de-classes" many OO polymorphic dispatches into a more functional style of programming, removing as much dynamic dispatch as possible, and eliminating prototype lookups and function call overhead through inlining. I don't know if GWT hurts "hidden classes" or not, but it might be possible that if GWT didn't provide such optimizations, the performance differential might be larger.

Despite this, the results are still good. The test consisted of calling the chart's redraw() function 100 times per trial, with 10 trials. The slowest and fastest trial are thrown out, and the mean and standard deviation are calculated on the remaining data.

I tested on a Mac Pro 2.66Ghz with 6Gb of memory, OSX 1.5. The tests were conducted within a Parallels VM running XP2 Service Pack 2, given 2 CPUs and 2Gb of memory. For each browser, I rebooted the VM from a clean start, and ran only the test browser.

And for a bit of fun, Marc-Andre Cournoyer tied together HotRuby (remember that? the beast that runs YARV code in the browser!) and V8 to create fast Ruby in the browser.

Good times.

Audible Ajax Episode 28: The State of Ajax, with Chrome and friends

Wed, 03 Sep 2008 07:54:49 -0700

Everyone knows that the big news of the week is Google Chrome, Chromium, and V8. Ben and I sat down for our podcast update and delve deeper at how all of the browsers are doing interesting things and progressing nicely. We discuss SquirrelFish, TraceMonkey, and of course V8.

We also delve into Canvas land and the fun and frolics that are planned for The Ajax Experience in Boston that happens soon. I am excited about the framework mini-events that happen around the same time too, and gather the crew behind jQuery, Dojo, and Prototype.

We have the audio directly available, or you can subscribe to the podcast.

Drag and drop via sneaky Textarea hack

Wed, 03 Sep 2008 05:54:47 -0700

Ernest Delgado put together work from an earlier project, and the realization that textareas are native drop targets, to create Drag and Drop without Drag and Drop.

Something that I never realized before is that text areas are drop targets by default. Using this property alone (without registering drag events on the source elements), we can emulate drag and drop behavior of non-linked images between different documents.

Put together the layers, with canvas, and a hidden transparent text area, and you get the following architecture:

Then, check out the demo that allows you to drag between gadgets. Take images from the right hand magnet, and paste them onto the fridge!

Coverflow again…. with Canvas

Wed, 03 Sep 2008 05:54:47 -0700

For some reason, we like to implement Coverflow to see if the technology of choice is decent enough to do so. This latest version works with Canvas, and does a nice job of smoothly doing the animations at hand. All you have to do is:

PLAIN TEXT

JAVASCRIPT:

Coverflow.init(
[
{src: 'img/img-0-lo.jpg', label: {album: 'All That I Am', artist: 'Santana'}},
{src: 'img/img-1-lo.jpg', label: {album: 'August & Everything After', artist: 'Counting Crows'}},
{src: 'img/img-2-lo.jpg', label: {album: 'Back to Bedlam', artist: 'James Blunt'}},
{src: 'img/img-3-lo.jpg', label: {album: 'Carnival of Rust', artist: 'Poets of the Fall'}},
{src: 'img/img-4-lo.jpg', label: {album: 'Collision Course', artist: 'Linkin Park'}},
{src: 'img/img-5-lo.jpg', label: {album: 'Crossfade', artist: 'Crossfade'}},
{src: 'img/img-6-lo.jpg', label: {album: 'Dexter', artist: 'Rolfe Kent'}},
{src: 'img/img-7-lo.jpg', label: {album: 'Life for Rent', artist: 'Dido'}},
{src: 'img/img-8-lo.jpg', label: {album: 'Say I Am You', artist: 'The Weepies'}},
{src: 'img/img-9-lo.jpg', label: {album: 'Signs of Life', artist: 'Poets of the Fall'}},
{src: 'img/img-10-lo.jpg', label: {album: 'Viva la Vida', artist: 'Coldplay'}},
{src: 'img/img-11-lo.jpg', label: {album: 'We Were Here', artist: 'Joshua Radin'}}
],
{
createLabel: function(item)
{
return item.label.album +'<br />'+ item.label.artist;
},
onSelectCenter: function(item, id)
{
var img = new Image();
img.onload = function()
{
Lightbox.show(this.src, id);
};
img.src = item.src.replace('-lo.jpg', '-hi.jpg');
}
});

QUnit: A simple look at the jQuery unit test framework

Wed, 03 Sep 2008 03:54:39 -0700

Chad Myers has a simple look at GUnit, the jQuery based unit test framework. His article explains how to get going, and walks through a test like this:

PLAIN TEXT

JAVASCRIPT:

module("Show and Hide");
test("should hide the element when hide is called", function(){
$("#testDiv").hide();
// actual, expected
equals($("#testDiv").css("display"), "none", "The element should be hidden");
});
test("should show the element when show is called", function(){
// Arrange
$("#testDiv").css("display", "none");
// Act
$("#testDiv").show();
// Assert
// actual, expected
equals($("#testDiv").css("display"), "block", "The element should be visible");
});

Xsstc: Cross-site scripting through CSS data

Wed, 03 Sep 2008 03:54:38 -0700

Wes Biggs has posted on Xsstc, his cross-site scripting solution that uses CSS to hide the data:

It turns out CSS leaks data in a very subtle way. Properties set by an external stylesheet (that is, one that is loaded using a LINK REL="STYLESHEET" tag) are used to style the elements of the host page, and at runtime the page can introspect itself to see what styles have been applied. Most of these tend to be strictly prescribed data, such as background colours for block elements, or some multiple choice items, like left/center/right alignment for text. While you could conceivably come up with a binary (or ternary) system based on that, it would be a pretty nasty job to try to make those into a general-purpose data channel. Fortunately, there are a few places where CSS lets you specify essentially free-text attributes: image URLs.

To make this work, the server has to dynamically send out simple CSS data, with info encoded into it... e.g. note the 'Hello World'

PLAIN TEXT

CSS:

#Xsstc {
background-image: url('about:blank#Hello%20World');
}

To tie into the data, you just need to exec away via:

PLAIN TEXT

JAVASCRIPT:

Xsstc.exec('http://lbs.tralfamadore.com/test.css', showResponse)

You can see the test page to see it at work. An interesting hole indeed....

Google Chrome, Chromium, and V8

Tue, 02 Sep 2008 10:54:49 -0700

It is really exciting to see the level of pace that browsers have been setting recently, especially with respect to performance.

I have been able to keep in sync with Google Chrome the new browser, and Chromium, the open source code-base it comes from. There are a couple of innovations that have been great to see such as the multiple process model for tabs and windows, the unified tab and search functionality, and at the core, V8.

V8 is the super-speedy JavaScript VM by Lars Bak of Sun HotSpot fame. When you run JavaScript benchmarks on this puppy, you see very speedy responses indeed. The V8 part of the comic says it well:

The breakthrough of having hidden classes to look at structures and work out the shared information (e.g. object Foo looks like a Person). Once you have that data, you can optimize in the same way you would class systems. V8 improvements consist of:

Compiler: Instead of using interpretation, JavaScript gets compiled down to native code
Inline caching: Optimize for accessing, and function calling
Very efficient memory management system

What version of JavaScript? "V8 implements ECMAScript as specified in ECMA-262, 3rd edition, and runs on Windows XP and Vista, Mac OS X 10.5 (Leopard), and Linux systems that use IA-32 or ARM processors."

If you are interested in the benchmark suites, you can run them and check them out.

Some of the core technology is also exciting to geeks. For example, as this code is operating system neutral we use the Skia Graphic Library (SGL) used by the Android team.

What about the process manager? John Resig has interesting thoughts on that with the rub: "The blame of bad performance or memory consumption no longer lies with the browser but with the site."

Alex Russell also has some good thoughts on the importance of Chrome, and Christopher Blizzard (Mozilla) also has some thoughts on how this shows the browser market is strong.

This is all great to see. Not only is this just the beginning for Google Chrome, Chromium, and V8 (I am dying for a Mac version!), but the other browsers are keeping pace too. The end result is a better Web for users, and a higher quality of product for developers to build against!

This Week in HTML5; Open Web Podcast with Anne van Kesteren

Tue, 02 Sep 2008 06:55:20 -0700

The tag-team HTML5 series, and Open Web Podcast is back this week with new content.

First, Mark Pilgrim's This Week in HTML 5 Episode 4 comes to you with the weekly summary:

The big news this week is the birth of the W3C's experimental HTML 5 validator (announcement). It is based on Henri Sivonen's experimental HTML 5 validator, although there are still some integration bugs to shake out. Related discussion on Sam Ruby's blog.

Mark then details the discussions on SVG-in-HTML, and the alt argument.

On the Open Web Podcast, John Resig and I got to interview Anne van Kesteren of Opera and numerous-standards fame:

We got to sit down with him (virtually) and discuss both high level issues such as the current state of CSS, down to the brass tacks of particular APIs such as access-control, CSS3 Media Queries and XHR, and even look to the future with technology such as WebSockets.

You can download the podcast directly (OGG format too), or subscribe to the series, including via iTunes).

There are some nuggets that I didn’t know of, such as the agreement with Microsoft to at least use access-control (as XHR level 2 does) for their competing XDR proposal.

Finally, with John Resig from Mozilla Corp, and Anne from Opera, there is some healthy debate on the roll of market share and minority browsers.

Who else would you like us to interview? Ben and I have a fun new series that we are finally putting together that gets more into personality than technology, and is a lot of fun.

Firefox implements 3 CSS properties: text-shadow, -moz-box-shadow and -moz-column-rule

Tue, 02 Sep 2008 06:55:20 -0700

Michael Ventnor has blogged about the new support for text-shadow, -moz-box-shadow and -moz-column-rule which follows on with Safari and Opera. The subtle effects really add a great touch when NOT used gratuitously. The samples are both ;)

If you’ve been following the Gecko 1.9.1 development since it started then you’re probably already aware of, and possibly already taking advantage of, these CSS properties that I implemented but haven’t talked about yet (this web-tech blog really is a great idea!). They are in Alpha 1, but for maximum stability regarding them you should wait until Alpha 2 comes very shortly. I am, of course, talking about CSS3 text-shadow, box-shadow and column-rule.

(I would’ve liked to include an example in this post, but Wordpress doesn’t seem to like “strange” CSS properties)

Text shadows were in CSS2, but were dropped in CSS2.1 due to lack of implementations; but it’s slowly making a comeback! That’s why the -moz prefix is not necessary for text-shadow, but is needed for the other two (-moz-box-shadow and -moz-column-rule). To see some very creative uses of this property check out this web page. Another cool thing is that this property plays nicely with the “contenteditable” attribute, so you can make a text editor with flickering flames behind your text. Who said Silverlight was needed for pretty RIA’s?

Box shadow is really nice, you can apply a shadow to almost any arbitrary element in your web page, thus easily giving your web app an extra bit of beauty. We also support the multiple shadows feature for both text and box shadows. Column rule allows you to draw lines between the gaps that separate columns if you are using CSS3 columns. It takes exactly the same syntax as a border side (border-top, etc), and pretty much completes our support for CSS3 columns functionality-wise.

This post comes on the back of CSS word wrap support (e.g. word-wrap: break-word;), CSS 2.1 generated content (e.g. tr::before { display:table-cell; content:"First cell"; }), and more.