rules repository

A-1080 Avoid defining CSS inline at page level.

Severity Warning Check + SQL-based Test Free New

Reason

CSS written inline on the page (in the page's Inline CSS attribute) is scattered across pages and hard to maintain; the same rules get copied around and can't be cached. Centralised styling in the Theme Roller or a static application file is easier to reuse and change in one place.

Move the CSS to the Theme Roller (for theme changes) or to a static application file referenced by the application.

Example

Non-Compliant Example

page 10 (
    name: Orders
    // ...
    css {
        inline: .t-Button--hot { background-color: #b00; }
    }
)
Issues
LineColumnMessage
59CSS should not be defined inline on page level.

Compliant Solution - ★★★★★

page 10 (
    name: Orders
    // ...
    css {
        fileUrls: #APP_FILES#css/p10#MIN#.css
    }
)

Tests

Test SQL query

select aa.workspace || '.' || aa.alias || '.' || ap.page_id as identifier,
       'Page ' || ap.page_id || ' of app ' || aa.alias || ' in ' || aa.workspace
         || ' defines CSS inline.' as message
  from apex_application_pages ap
  join apex_applications aa
    on aa.application_id = ap.application_id
       and aa.workspace = ap.workspace
 where ap.page_id <> 0
   and ap.inline_css is not null
   and aa.workspace in (#ApexWorkspaces#)

Test results

IdentifierMessageMigration
WORKSPACE.CUSTOMERS.10Page 10 of app CUSTOMERS in WORKSPACE defines CSS inline.-

Parameters

Use parameters to customize the rule to your needs.

ParameterDescriptionDefault Value
ApexWorkspacesComma-separated List of APEX workspaces owning APEX applications to check.dblinter, dbl_gui

References