CSS Profile Property Supported Formatting and Values

CSS profile properties enforce specific formatting rules and accept values based on their associated CSS property. This page describes the validation logic, supported value formats, and format-specific considerations for CSS profile property values. For the full list of properties, see CSS Profile Property Reference.

Validations and supported formatting for CSS profile properties

Review the following guidelines when creating or updating CSS profiles to ensure you enter the properties correctly.

Property format

Each property in a CSS profile must use the format property-name: value. Ensure each property is on a separate line and contains no punctuation between properties, such as commas or semicolons.

All property names must be lowercase.

Comments

You can add comments to a CSS profile using /* */ syntax. Use comments to organize properties into groups, explain design decisions, or add notes for other developers. For example:

1
2
3
4
5
6
/* Colors */
negative-on-light-color: #8B1A1A
error-background-color: #F5E0E0

/* This is slightly bigger than our base font size to make asterisks stand out more */
required-asterisk-font-size: 16px

Validation logic

When you create or modify a CSS profile, a validation check identifies the following issues:

• Invalid property names: The property name doesn't match a supported CSS profile property name.
• Missing values: A property name is listed without a corresponding value.
• Duplicate names: The same property name appears more than once in the list.
• Incorrect formatting: A property-value pair isn't formatted correctly.
• Unclosed comments: A comment opened with /* isn't closed with */.

Validation limitations and fallback behavior

The CSS profile validation check doesn't verify that your CSS values are valid or supported. If a browser can't render a value, it determines what to use instead. Be sure to verify the rendering of your custom values using browser developer tools in a site or portal.

Supported values for CSS profile properties

Review the following guidelines when entering properties into a CSS profile to ensure the values work correctly.

Supported value formats

CSS profile properties allow any value that is allowed by the associated CSS property, unless noted otherwise. Refer to MDN for specifics about CSS property values.

For example, in the list of CSS profile properties, placeholder-font-style lists font-style as the Associated CSS Property. That means you can use any of the property values defined for the font-style CSS property.

Avoid descriptive values

Do not use descriptive CSS values such as "thick", "thin", or "medium" in CSS profile properties. These values can produce inconsistent results because many Appian components calculate dimensions based on specific values.

Font weight unsupported values

CSS profile properties ending in -font-weight don't accept the following values: 100, 200, 500, 800, and 900. If you provide an unsupported value, the interface will use the closest supported weight.

Color supported formats

CSS profile properties support hexadecimal, RGB, RGBA, HSL, and HSLA color values, as well as named color values such as "red". Other formats may not be supported.

We recommend avoiding transparent colors.

Border radius suggested value format

For CSS profile properties ending in -border-radius, provide a single value to ensure consistent rendering across all components. For example, instead of tooltip-border-radius: 8px 12px 8px 12px, use tooltip-border-radius: 8px.

Feedback