Supported Properties

Standard CSS Properties

1. padding (and variants)

2. margin (and variants)

3. border (and variants)

4. border-radius

5. background (Usage below)

6. background-color

7. background-repeat

8. background-image

9. font(Usage on Fonts wiki page)

10. font-family (Usage on Fonts wiki page)

11. font-style (Usage on Fonts wiki page)

12. font-size (Usage on Fonts wiki page)

13. @font-face (Usage on Fonts wiki page)

14. color

15. text-align

16. text-decoration(Usage below)

17. opacity

18. box-shadow

19. width (only used for generating background-images and borders)

20. height (only used for generating background-images and borders)

Custom Properties

1. cn1-source-dpi - Used to specify source DPI for multi-image generation of background images. Accepted values: 0 (Not multi-image), 120 (Low res), 160 (Medium Res), 320 (Very High Res), 480 (HD), Higher than 480 (2HD)

2. cn1-background-type - Used to explicitly specify the background-type that should be used for the class.

3. cn1-9patch - Used to explicitly specify the slices used when generating 9-piece borders.

4. cn1-derive - Used to specify that this UIID should derive from an existing UIID.

CSS Property Reference

This section will contain more in-depth coverage of supported CSS properties and available values. It is not currently comprehensive as I need time to populate it.

text-decoration

Available Values

underline	Underlines text. E.g. text-decoration: underline;
overline	Overlines text. E.g. text-decoration: overline;
line-through	Strikes through text. E.g. text-decoration: line-through;
none	No text decoration. E.g. text-decoration: none;
cn1-3d	3D text. E.g. text-decoraton: cn1-3d;
cn1-3d-lowered	3D lowered text. E.g. text-decoration: cn1-3d-lowered;
cn1-3d-shadow-north	3D text with north shadow. E.g. text-decoration: cn1-3d-shadow-north;

For other CSS font settings see Fonts

border

This library supports the border property and most of its variants (e.g. border-width, border-style, and border-color. It will try to use native CN1 styles for generating borders if possible. If the border definition is too complex, it will fall-back to generating a 9-piece image border at compile-time. This has the effect of making the resulting resource file larger, but will produce good runtime performance, and an look that is faithful to the provided CSS.

The algorithm used to determine whether to use a native border or to generate a 9-piece image, is complex, but the following guidelines may help you if you wish to design borders that can be rendered natively in CN1:

Things that will trigger image border generation for a UIID:

1. Non-pixel units border-width. (Except with the cn1-round-border and cn1-pill-border styles).

2. Using the border-radius directive.

3. Using box-shadow (Except when using cn1-round-border or cn1-pill-border styles).

4. Using a background gradient in combination with a border or any kind.

5. Using a different border-width, border-style, or border-color for different sides of the border.

6. Using a filter

Round Borders

Rounded borders can be achieved in a few different ways. The easiest methods are:

1. The cn1-round-border style. This will render a circular round border in the background natively. I.e. this doesn’t require generation of an image border.

2. The cn1-pill-border style. This will render a pill-shaped border in the background natively. This also doesn’t require generation of an image border.

3. **The border-radius property. This will round the corners of the border. This currently results in an image-border being generated.

Examples using cn1-round-border

TODO

Examples using cn1-pill-border

TODO

Examples using border-radius

TODO

background

The background property supports most standard CSS values for setting the background color, or background image.

Warning

9-piece Image borders always take precedence over background settings in Codename One. If your background directive seems to have no effect, it is likely because the theme has specified a 9-piece image border for the UIID. You can disable the image border using a directive like border: none.

Background Images

See Images

Gradients

Both the linear-gradient and radial-gradient CSS functions are fully supported by this library. If Codename One is capable of rendering the gradient natively then the theme resource file generated will only include encoded parameters for the gradients. If the gradient is not supported by Codename One, then the module will fall back to an image background which it generates at compile-time. It is generally preferable to try to stick to gradients that Codename One supports natively. This will result in a smaller theme resource file since it doesn’t need to generate any images for the gradient.

Natively Supported linear-gradient Syntax

In order for a linear gradient to be natively supported by Codename One, the following properties must be met:

1. The gradient function has exactly two color stops, and these colors have the same opacity.

2. The gradient is either perfectly horizontal or perfectly vertical. (e.g Direction can be 0deg, 90deg, 180deg, or 270deg.

Examples

MyContainer {
   background: linear-gradient(0deg, #ccc, #666);
}

MyContainer {
    background: linear-gradient(to top, #ccc, #666);
}

MyContainer {
    background: linear-gradient(90deg, #ccc, #666);
}

MyContainer {
    background: linear-gradient(to left, #ccc, #666);
}

Unsupported linear-gradient syntax

The following are some examples of linear gradients that aren’t supported natively by Codename One, and will result in a background image to be generated at compile-time:

MyComponent {
    background: linear-gradient(45deg, #eaeaea, #666666);
}

The above example is not supported natively because the gradient direction is 45 degrees. Codename One only supports 0, 90, 180, and 270 degrees natively. Therefore this would result in a background image being generated at compile-time with the appropriate gradient.

MyComponent {
    background: linear-gradient(90deg, rgba(255, 0, 0, 0.6), blue);
}

The above linear-gradient is not supported natively because the stop colours have different transparencies. The first color has an opacity of 0.5, and the second as an opacity of 1.0 (implicitly). Therefore, this would result in the gradient being generated as an image at compile-time.

Natively Supported radial-gradient Syntax

The following syntax is supported natively for radial gradients. Other syntaxes are also supported by the CSS library, but they will use compile-time image generation for the gradients rather than generating them at runtime.

background: radial-gradient(circle [closest-side] [at <position>], <color stop>, <color stop>)

1. <position> - The position using either offset keywords or percentages.

2. <color stop> - Either a color alone, or a color followed by a percentage. 0% indicates that color begins at center of the circle. 100% indicates that the color begins at the closest edge of the bounding box. Higher/lower values (>0%) will shift the color further or closer to circle’s center. If the first color stop is set to a non-zero value, the gradient cannot be rendered natively by Codename One, and an image of the gradient will instead be generated at compile-time.

More complex gradients are supported by this library, but they will be generated at compile-time. For more information about the radial-gradient CSS function see its MDN Wiki page.

Examples

MyContainer {
    background: radial-gradient(circle, gray, white);
}

MyContainer {
    background: radial-gradient(circle, gray, white 200%);
}

MyContainer {
    background: radial-gradient(circle at left, gray, white);
}

MyContainer {
    background: radial-gradient(circle at right, gray, white);
}

cn1-background-type

It also supports some special Codename One values, which are identifiers with a "cn1-" prefix. The following special values are available:

cn1-image-scaled	TODO
cn1-image-scaled-fill	TODO
cn1-image-scaled-fit	TODO
cn1-image-tile-both	TODO
cn1-image-tile-valign-left	TODO
cn1-image-tile-valign-center	TODO
cn1-image-tile-valign-right	TODO
cn1-image-tile-halign-top	TODO
cn1-image-tile-halign-center	TODO
cn1-image-tile-halign-bottom	TODO
cn1-image-align-bottom	TODO
cn1-image-align-left	TODO
cn1-image-align-right	TODO
cn1-image-align-center	TODO
cn1-image-align-top-left	TODO
cn1-image-align-top-right	TODO
cn1-image-align-bottom-left	TODO
cn1-image-align-bottom-right	TODO
cn1-image-border	TODO
cn1-none	TODO
cn1-round-border	TODO
cn1-pill-border	TODO