# Modern CSS in Markdown to PDF HTML blocks read current CSS: custom properties, calc(), oklch() and color-mix(), nesting, cascade layers and :has(), drawn with shadows, gradients and transforms. Custom properties, calc(), oklch() and color-mix(), nesting, cascade layers, :has() and ::first-letter, with shadows, gradients, opacity and transforms. Toggle: html_blocks. - PDF: https://legivel.com/examples/text-structure/modern-css.pdf - Page: https://legivel.com/examples/text-structure/modern-css - Open in the editor: https://legivel.com/markdown-to-pdf?sample=html-css - More markdown text and structure in PDF: https://legivel.com/examples/text-structure ## Markdown source ```markdown # Modern CSS in HTML blocks HTML blocks understand current CSS: variables, calc(), modern color spaces, nesting, cascade layers and Selectors Level 4. Effects such as shadows, gradients, rounded corners, opacity and transforms are drawn as vectors.

Variables, nesting and :has()

This card takes its accent from a custom property in oklch(), mixes its background with color-mix(), sizes its padding with calc() and styles its first letter. Because it holds a tag, :has() gives it a thicker border. new

Text shadow, a dark panel and an outline around a word.
  1. Collect the signed delivery notes
  2. Match them against the invoices
  3. Send the variance report
CSS the renderer does not draw is skipped with a note, never an error: the rest of the block still renders. ```