(CSS is for programming, not for pasting)

When the Closure Tools were first released a little over two years ago, they gave web developers the ability to organize and optimize their JavaScript and HTML in a new way. But there was something missing, namely, a tool to help manage CSS.

You see, the nature of CSS runs contrary to the DRY principle that is exhibited in good software engineering. For example, if there is a color that should be used for multiple classes in a stylesheet, a developer has no choice but to copy-and-paste it everywhere because CSS has no concept of variables. Similarly, if there is a value in a stylesheet that is derived from other values, there is no way to express that because CSS also lacks functions. Common patterns of style blocks are duplicated over and over because CSS has no macros. All of these properties of CSS conspire to make stylesheets extremely difficult to maintain.

To this end, we are excited to introduce the missing piece in the Closure Tools suite: Closure Stylesheets. Closure Stylesheets is an an extension to CSS that adds variables, functions, conditionals, and mixins to standard CSS. The tool also supports minification, linting, RTL flipping, and CSS class renaming. As the existing Closure Tools have done for JavaScript and HTML, Closure Stylesheets will help you write CSS in a maintainable way, while also empowering you to deliver optimized code to your users. We hope you enjoy it! Please let us know what you think in the discussion forum.

By Michael Bolin, Open Source Engineer

By Lindsey Simon, Google User Experience Team

Most web developers have felt the pain of discovering or remembering ways in which different browsers interpret and/or render their Cascading Style Sheets (CSS). Our newly released CSS Selector Shell is a simple Javascript tool for testing how a given browser parses CSS text by inserting a style element into the document and then reading the cssText back programmatically. You can already check out the CSS Selector Shell code base in action on Google AppEngine.

So far this tool has proven quite useful by showing what happens when developers try to make use of CSS selector syntax that may not be supported in a particular browser. Specifically, it can show how and perhaps why a particular CSS hack works in some browsers and how it is ignored in others. It can also demonstrate the potential for harm when using unsupported CSS syntax in some browsers. For instance, when testing a combined selector ".class1.class2" in Internet Explorer 6, it becomes active as ".class2", which may not at all be the goal of the CSS author. Another detail the CSS Selector Shell demonstrates is that shorthand property/values sometimes expand much further than you may have suspected. On the test page itself, there are two visible test elements that you can use to target and experiment. The code itself makes use of the Dojo Tooklit as well as the Django framework.

We hope this tool will be useful to you in diagnosing problems or understanding the differences between browsers when interacting with your Cascading Style Sheets. We always welcome your feedback, so check out the code and let us know what you think in our discussion group.

By Dion Almaer, Google Developer Programs

Have you ever been asked "but what about a Hebrew version?" Lindsey Simon has, so he decided to write a tool that would help with the task.

CSSJanus is CSS parser utility designed to aid the conversion of a website's layout from left-to-right (LTR) to right-to-left (RTL). The script was born out of a need to convert CSS for RTL languages when tables are not being used for layout (since tables will automatically reorder TD's in RTL). CSSJanus will change most of the obvious CSS property names and their values as well as some not-so-obvious ones (cursor, background-position %, etc...). The script is designed to offer flexibility to account for cases when you do not want to change certain rules which exist to account for bidirectional text display bugs, as well as situations where you may or may not want to flip annotations inside of the background url string. CSSJanus itself is not always enough to make a website that works in a LTR language context work in a RTL language all the way, but it is a start. We sat down with Lindsey to talk about the motivation of the tool, the challenges behind it, and a screencast showing it in action:




Check out a running Django-ified webapp version, and for the greatest detail of what gets flipped in CSS Janus, please have a look at the unit tests.