CSS3 Styling in Every Browser

Traditionally, cross-browser styling has been a time consuming and tedious task. With the rise of modern browsers and the introduction of CSS3, we can finally create beautiful cross-browser interfaces using a simple syntax. We show you how with the new Sencha SDK Tools.

Download Sencha SDK Tools

As web developers we are faced with a dilemma: on one hand, we have the ability to create engaging interfaces with rounded corners and background gradients using CSS3; on the other hand, we are forced to slice images and use extra markup to support these expectations on legacy browsers.

With the introduction of the Split DOM feature in Ext JS 4, we now have the ability to render different markup based on the browsers’ capabilities and version. This gives us the ability to style today’s modern browsers with CSS3, but what about older browsers that don’t support CSS3? Wouldn’t it be nice if you could style exclusively in CSS3? We thought so, too, so we went about making that happen.

### Introducing the “slicer” feature of the Sencha Tools SDK

Ext JS 4 brings great theming support for your applications by taking advantage of modern CSS3 properties and using SASS and Compass as an efficient way to describe what you want. And the best part is, it works across all browsers—even browsers that don’t support CSS3— by using our slicer utility which is part of our SDK tools.

The slicer is a feature of the SDK tools that analyses your custom theme, renders the page in memory, then decides which components need images generated for legacy browsers, generates those images, slices those images into a sprite, and saves it. Let’s take a look how to use it.

To get started, let’s create a new theme file in the ‘sdk/resources/sass’ folder called ‘ext-all-green.scss’:

$theme-name: ‘green’;
$base-color: lighten(#BADA55, 15);

@import ‘compass’;
@import ‘ext4/default/all’;

As you can see, we are just simply changing the name and the base color of the theme.

Once these dependencies have been met, the next step is to compile our new green theme using Compass. If you need help on compiling a theme, see our Theming Guide.

Let’s start by duplicating the ‘default’ images directory in ‘sdk/resources/themes/images/default’ and renaming it ‘green’. We duplicate the default folder because icons/tools are not generated by the SDK Tools at this time. Then run the compass command from within the SDK directory:

compass compile resources/sass

Our theme will now be generated into CSS, which will work for modern browsers, but legacy browsers need images. Using the slice feature of the SDK tools, the images will be generated:

sencha slice theme -d . -c resources/css/ext-all-green.css -o resources/themes/images/green -v

Now you can load up your application in any supported browser and it will be styled with a beautiful green theme. With one style you can now target both legacy browsers and modern browsers.

### Helpful Variables

There are many variables that you can override in order to make a custom theme. Take some time to poke around the sdk/resources/themes/default/variables directory. This directory contains all defined variables for each component in Ext JS 4.

The naming convention for variables follows CSS property names, prefixed by the component name. For example:

Panel border radius
Variable: **$panel-border-radius**

Panel body background color
Variable: **$panel-body-background-color**

Toolbar background color
Variable: **$toolbar-background-color**

### Summary

Using the slicer feature of our SDK Tools, you can now deliver pixel-perfect, cross-browser support using only CSS3. The days of generating custom sprites, calculating CSS rules, and building custom markup are gone. We hope this post illustrates how you can start to use Ext JS 4 to build a personalized theme. Please take some time to create your our theme, share it with community in the Sencha Forum, and, most importantly, let us know what you think.