Skip to main content

inlined-standalone.html

Path: include/inlined-standalone.html | Language: HTML/CSS | Lines: ~345

Standalone page variant that inlines core color variables but still links head.css and style.css externally.

Overview​

The inlined-standalone.html include file is an alternative to inlined-asset-links.html designed for "standalone" pages that need to be more self-contained. It inlines the color variable blocks but still loads head.css and style.css via <link> elements.

This approach is used for pages that may be:

  • Archived or distributed as single HTML files
  • More self-contained but still requires external CSS assets
  • Embedded in contexts where external resource loading is unreliable
  • Distributed via email or saved locally by users
  • Used in reader modes or print views

The trade-off is increased HTML file size in exchange for more self-contained inline color variables, but it still relies on external CSS.

Content Structure​

Inline Critical Styles​

<style id="inlined-styles-colors">
  /* Full CSS custom property definitions - identical to inlined-head.html */
</style>

This section is identical to the first <style> block in inlined-head.html, containing:

  • Complete :root custom property definitions
  • All color tokens for light mode
  • Pattern/image variable references

External Critical Resources​

<link rel="stylesheet" href="/static/css/head.css?v=1766877006">

Unlike inlined-head.html, this variant loads head.css as an external resource rather than inlining it. This suggests:

  • head.css is less critical for standalone pages
  • Or standalone pages may have a different performance profile
  • The file might be cached in standalone contexts where external requests are acceptable
<link rel="stylesheet" href="/static/css/style.css?v=1766877006">

Key Difference from inlined-asset-links.html:

  • No media="print" trick for async loading
  • Loaded synchronously, will block rendering
  • Ensures complete styling before page displays
  • Acceptable trade-off for standalone contexts where progressive loading is less critical

Standalone Context Implications​

The lack of performance optimizations (media query tricks, defer attributes) suggests this variant prioritizes:

  1. Completeness over speed
  2. Reliability over optimization
  3. Reliability over progressive enhancement (still requires CSS assets)

Integration​

Build Process​

This include is used conditionally in page templates:

<head>
  <!--#include virtual="/include/inlined-head.html" -->

  <!-- Conditional logic (likely in Hakyll template): -->
  <!-- If standalone page: -->
  <!--#include virtual="/include/inlined-standalone.html" -->

  <!-- Else: -->
  <!--#include virtual="/include/inlined-asset-links.html" -->
</head>

The decision of which variant to use is made during the Hakyll build process based on page metadata or configuration flags.

Use Cases​

Standalone Pages:

  • Archive pages (e.g., /doc/*/index pages that collect many articles)
  • Single-article distributions
  • Print/PDF generation targets
  • Email newsletter versions
  • Documentation with fewer dynamic dependencies

Why Bundle Everything:

  • Fewer dependencies on dynamic includes
  • Ensures visual consistency in uncontrolled contexts

Performance Characteristics​

Advantages:

  • Guaranteed complete styling on first render
  • No FOUC (Flash of Unstyled Content)
  • CSS still loads via external <link> tags
  • Predictable rendering behavior

Disadvantages:

  • Larger HTML file size (CSS is not separately cacheable)
  • Slower initial download
  • Duplicated CSS across multiple standalone pages (no caching benefit)
  • Synchronous stylesheet loading blocks rendering

Comparison with Other Includes​

Include FileCSS LoadingUse CasePerformance Profile
inlined-head.htmlMinimal inline + externalNormal pagesOptimized for speed
inlined-asset-links.htmlDeferred externalNormal pagesProgressive enhancement
inlined-standalone.htmlInline colors + external head/styleStandalone pagesOptimized for portability

See Also​