• Home
• Platform
• Download
• Documentation
• Community
• Wiki
• Blog

From OpenLaszlo

Contents 1 Introduction 2 Proposal 2.1 Overview 2.2 References 2.3 Changes 2.3.1 Implement DOM2 CSSStyleSheet et al 2.3.2 Implement DOM2 DocumentStyle in LzCanvas 2.3.3 Implement DOM2 ViewCSS in LzNode 2.3.4 Add compiler support for inline styles and external stylesheets 2.3.5 Implement LzCSSStyleManager 2.3.6 Add style constraints 2.3.7 Add @style to LzNode 2.3.8 Adopt selected CSS2 style properties 2.3.9 Introduce new LZX-specific style properties 2.3.10 (future) Add style mutator events 2.3.11 (future) Add @style to <class> 2.3.12 (Separate) Implement DOM2 Core and DOM2 Views 2.4 Open Issues 3 Examples 4 History

Introduction

Real runtime CSS for OpenLaszlo. First edition is minimalistic.

Proposal

Overview

This is an implementation of a subset of CSS2 and DOM 2 Styles. The subset is chosen to minimize the complexity of the runtime CSS engine, which basically means we avoid as much runtime dynamism as possible.

References

CSS2.1 Specification (Normative)

See CSS21.

DOM Level 2 Style (Normative)

See DOM Level 2 Style

DOM Level 2 Core (Future - Normative)

See DOM Level 2 Core

DOM Level 2 Views (Future - Normative)

See DOM Level 2 Views

HTML 4.0 Styles (Advisory)

See HTML40 Styles

Changes

Implement DOM2 CSSStyleSheet et al

• new class LZCSSStyleSheet using DOM2 CSSStyleSheet interface
• declared as <stylesheet> element of <canvas>
• String:@title attribute
• String:@href attribute
• String:@type attribute, read-only, value is "text/css"
• (future) @ownerNode attribute
• (future) @parentStyleSheet attribute
• (future) Boolean:@disabled attribute
• (future) Array:@media attribute
• (future) CDATA contents: style declarations

• Implement other classes as necessary: LzCSSRule, LzCSSStyleRule, etc.

Implement DOM2 DocumentStyle in LzCanvas

Implement DOM2 ViewCSS in LzNode

Add compiler support for inline styles and external stylesheets

Support CSS files (text/css, .css) with subset syntax. Include @import. Legal selectors as given in the next section. LZX-specific tags have "-lzx-" prefix, standard CSS tags only reused if semantics are identical to CSS spec.

CSS selectors are built around the idea of a "document language element type". Our "document language" is LZX, and the element type is the LZX class tag (e.g. <view>, <combobox>, etc.).

CSS also has a concept of "class", but this is a language-dependent concept, tied to HTML, that is confusing only in name -- we don't need it since our element type set is extensible, and we won't support it in LZX.

Selectors are limited to the following:

*	Universal Selector
E	Type Selector
E F	Descendent Selector	(Optional?)
E > F	Child Selector
E[ foo="bar" ]	Attribute Selector	(Only attributes marked final)
E#myid	ID Selector

Implement LzCSSStyleManager

Add style constraints

• new constraint syntax "$style{'propertyName'}"
• propertyName is valid LZX style property name
• Examples
  • <view resource="$style{ '-lzx-top-bevel-right' }"/>
  • <view bgcolor="$style{ 'bgcolor' }"/>
• convert to style constraints in LzView and components as we go
• compare with MXML: duality between view attributes and style properties -- not bound, identical
• default value? undefined or null.

Add @style to LzNode

• Done in a way analogous to inline styles in HTML4.0 styles

Adopt selected CSS2 style properties

Introduce new LZX-specific style properties

(future) Add style mutator events

• oncomputedstylechanged

(future) Add @style to <class>

(Separate) Implement DOM2 Core and DOM2 Views

These allow us to claim DOM2 Style conformance. Conformance will be proposed separately.

Open Issues

Questions:

• How does all of this work with placement? (Corollary: does @parent or @immediateparent specify DOM tree structure?)

• Specify how inheritance works with all of this

• @style for instances and compatibility with lps/components/base/style.lzx

• CSS property names: CSS syntax (font-size) vs. LZX syntax (fontSize)

Examples

Simple example. For this laszlo program:

<canvas>
    <button/>
    <text/>
</canvas>

With this stylesheet:

canvas {
    textcolor : blue
}

button {
    textcolor : black
}

The button would have a black textcolor, and the text element would have blue.

With a more complex example:

<canvas>
    <button/>
    <alert><button/></alert>
    <button name="bunny"/>
</canvas>

We could address the various buttons in the application this way:

#all buttons (default)
button {
    textcolor : orange;
}

#descendent selector
alert button {
    textcolor : green;
}

#attribue selector
button[ name = "bunny" ]{
    textcolor : teal;
}

This would give the buttons in the app orange, green, and teal for their textcolors respectively.

Also see CSS_Progress

History

Use this space to provide historical perspective: ideas that were discarded, summary of discussion, etc.