CSS Blocks

SevenMark supports raw CSS blocks with {{{#css ... }}}.

Basic Usage

{{{#css
.profile-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
}
}}}

Parameters

#css does not accept parameters. Write raw stylesheet content directly after #css.

For dark-mode CSS, author it directly in the stylesheet with selectors such as .dark .label { ... } or with @media (prefers-color-scheme: dark) { ... }.

Sanitization Model

SevenMark HTML is intended to be inserted into a SevenMark ShadowRoot. CSS block selectors are therefore allowed to target normal in-shadow document structure:

tr.tab { display: none; }
tr.selected { display: table-row; }
a.tab { cursor: pointer; }
.i-have-span > span { font-weight: bold; }
td > div { white-space: nowrap; }
details[open] summary { font-weight: bold; }

Selectors that cross or style the shadow boundary are removed, including :host, :host-context(...), ::slotted(...), and ::part(...).

The renderer still sanitizes properties, values, and at-rules. Overlay and dynamic CSS capabilities such as position, inset, z-index, pointer-events, url(), var(), env(), expression(), !important, @import, @font-face, and @keyframes are blocked.

Raw Close Rules

#css uses the same raw close rule as #code and #tex:

1. Raw parsing uses triple-brace depth matching ({{{ increments depth, }}} decrements depth).
2. The block closes when depth returns to zero.
3. To avoid ambiguous endings when content ends with }, the formatter may insert a separator before the final }}}.

Example:

{{{#css
.profile-card { border: 1px solid #ddd; }
}}}

Notes

• CSS content is parsed as raw text; nested SevenMark syntax is not processed inside the block.
• Backslash-escaped triple-brace delimiters stay in the raw CSS text.
• Renderer sanitizes style-close tags such as </style> to prevent tag break-out.