insertGlobalCss

insertGlobalCss(style): void

Inserts CSS rules globally (unscoped).

Works exactly like insertCss, but without prefixing selectors with a unique class name. This is useful for global resets, base styles, or styles that need to apply to the entire document.

Accepts the same concise style string syntax and CSS shortcuts as insertCss. See insertCss for detailed documentation on syntax and shortcuts.

Parameters

style

object

Object with selectors as keys and concise CSS strings as values.

CSS is inserted into the in an order relative to other insert(Global)Css items that is consistent based on when the containing Aberdeen scope was first defined. This allows changing styles without changing order-based precedence.

Returns

void

Examples

Global Reset and Base Styles

// Set up global styles using CSS shortcuts
A.insertGlobalCss({
  "*": "m:0 p:0 box-sizing:border-box",
  "body": "font-family: system-ui, sans-serif; m:0 p:$3 bg:#434 fg:#d0dafa",
  "a": "text-decoration:none fg:#57f",
  "a:hover": "text-decoration:underline",
  "code": "font-family:monospace bg:#222 fg:#afc p:4px r:3px"
});

A('h2#Title without margins');
A('a#This is a link');
A('code#const x = 42;');

Responsive Global Styles

A.insertGlobalCss({
  "html": "font-size:16px",
  "body": "line-height:1.6",
  "h1, h2, h3": "font-weight:600 mt:$4 mb:$2",
  "@media (max-width: 768px)": {
    "html": "font-size:14px",
    "body": "p:$2"
  },
  "@media (prefers-color-scheme: dark)": {
    "body": "bg:#1a1a1a fg:#e5e5e5",
    "code": "bg:#2a2a2a"
  }
});

At-rules such as @media and @keyframes should use nested objects. For keyframes, the step selectors (0%, 50%, 100%, etc.) become the nested keys and each value should be a concise CSS declaration string.

Animation Keyframes

A.insertGlobalCss({
  "@keyframes connection-pulse": {
    "0%": "box-shadow: inset 0 0 0 0 rgba(255, 70, 70, 0.4);",
    "50%": "box-shadow: inset 0 0 0 6px rgba(255, 70, 70, 0.08);",
    "100%": "box-shadow: inset 0 0 0 0 rgba(255, 70, 70, 0.4);"
  }
});