Themes

8.2.4. Notes on Compatibility

CSS was first proposed in 1994. The specification of CSS is maintained by the CSS Working Group of World Wide Web Consortium (W3C). Its versions are specified as levels that build upon the earlier version. CSS Level 1 was published in 1996, Level 2 in 1998. Development of CSS Level 3 was started in 1998 and is still under way.

While the support for CSS has been universal in all graphical web browsers since at least 1995, the support has been very incomplete at times and there still exists an unfortunate number of incompatibilities between browsers.While we have tried to take these incompatibilities into account in the built-in themes in Vaadin, you need to consider them while developing custom themes.

Compatibility issues are detailed in various CSS handbooks.

8.3. Syntactically Awesome Stylesheets (Sass)

Vaadin uses Sass for stylesheets. Sass is an extension of CSS3 that adds nested rules, variables, mixins, selector inheritance, and other features to CSS. Sass supports two formats for stylesheet: Vaadin themes are written in SCSS (.scss), which is a superset of CSS3, but Sass also allows a more concise indented format (.sass).

Sass can be used in two basic ways in Vaadin applications, either by compiling SCSS files to CSS or by doing the compilation on the fly. The latter way is possible if the development mode is enabled in the deployment descriptor for the Vaadin servlet.

8.3.1. Sass Overview

Variables

Sass allows defining variables that can be used in the rules.

$textcolor: blue;

.v-button-caption { color: $textcolor;

}

The above rule would be compiled to CSS as:

.v-button-caption { color: blue;

}

Also mixins can have variables as parameters, as explained later.

Nesting

Sass supports nested rules, which are compiled into inside-selectors. For example:

.v-app {

background: yellow;

.mybutton { font-style: italic;

.v-button-caption { color: blue;

}

230	Notes on Compatibility