Fix flash of unfocused content by adding critical inline CSS by Tnixc · Pull Request #8 · Tnixc/website-v6

Tnixc · 2026-01-03T15:31:57Z

Added critical CSS inline in the to prevent flash of unstyled content.
The critical styles include color-scheme, background colors, and grid pattern
to ensure the page displays correctly before the external CSS loads.

Added critical CSS inline in the <head> to prevent flash of unstyled content. The critical styles include color-scheme, background colors, and grid pattern to ensure the page displays correctly before the external CSS loads.

vercel · 2026-01-03T15:31:59Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
website-v6	Ready	Preview, Comment	Jan 3, 2026 3:35pm

Copilot

Pull request overview

This PR adds critical inline CSS to the HTML <head> section to prevent flash of unstyled content (FOUC) during page load. The inline styles define the color scheme, background colors, text colors, font family, and grid pattern to ensure the page displays correctly before the external Tailwind CSS file loads.

Key changes include:

Added inline <style> block to Head.component.html with critical CSS for html and body elements
Updated Tailwind CSS from v4.1.13 to v4.1.18 in output.css files
Inline styles include color-scheme, backgrounds, font-family, and the grid pattern that defines the site's visual identity

Reviewed changes

Copilot reviewed 2 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/components/Head.component.html	Added inline critical CSS block for html and body elements to prevent FOUC
src/public/output.css	Updated Tailwind CSS version from v4.1.13 to v4.1.18
dist/output.css	Compiled CSS with Tailwind v4.1.18 update
dist/index.html	Generated HTML with new inline critical CSS
dist/about.html	Generated HTML with new inline critical CSS
dist/projects.html	Generated HTML with new inline critical CSS
dist/writing.html	Generated HTML with new inline critical CSS (also shows unrelated content changes)

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-03T15:34:36Z

+        linear-gradient(to right, light-dark(rgb(168 162 158 / 0.05), rgb(68 68 72 / 0.2)) 1px, transparent 1px),
+        linear-gradient(to bottom, light-dark(rgb(168 162 158 / 0.05), rgb(68 68 72 / 0.2)) 1px, transparent 1px);


The inline critical CSS uses hardcoded color values that don't exactly match the CSS custom properties in the external stylesheet. In the external CSS, --color-bg-grid is defined as light-dark(#a8a29e0d, #44444833), but the inline styles use light-dark(rgb(168 162 158 / 0.05), rgb(68 68 72 / 0.2)). The alpha values are inconsistent: 0d (hex) equals 0.051, not 0.05, and 33 (hex) equals 0.2, not exactly matching. This could cause a subtle visual difference between the initial render and after the external CSS loads, defeating the purpose of preventing FOUC.

Suggested change

linear-gradient(to right, light-dark(rgb(168 162 158 / 0.05), rgb(68 68 72 / 0.2)) 1px, transparent 1px),

linear-gradient(to bottom, light-dark(rgb(168 162 158 / 0.05), rgb(68 68 72 / 0.2)) 1px, transparent 1px);

linear-gradient(to right, light-dark(#a8a29e0d, #44444833) 1px, transparent 1px),

linear-gradient(to bottom, light-dark(#a8a29e0d, #44444833) 1px, transparent 1px);

Copilot · 2026-01-03T15:34:36Z

+    html {
+      color-scheme: light dark;
+      background: light-dark(#fbf7ec, #161617);
+    }
+    body {
+      font-family: "Sentient", serif;
+      color: light-dark(#1c1917, #c9c7cd);
+      background: light-dark(#fbf7ec, #161617);
+      background-image:
+        linear-gradient(to right, light-dark(rgb(168 162 158 / 0.05), rgb(68 68 72 / 0.2)) 1px, transparent 1px),
+        linear-gradient(to bottom, light-dark(rgb(168 162 158 / 0.05), rgb(68 68 72 / 0.2)) 1px, transparent 1px);


The inline critical CSS hardcodes style values directly instead of referencing CSS custom properties. This creates a maintenance burden where these values must be kept in sync with the external stylesheet manually. If the design colors change in the external CSS (output.css), this inline CSS must also be updated separately, increasing the risk of inconsistencies. Consider using CSS custom properties in the inline styles as well, or establish a build process to automatically extract and inline critical CSS from the source of truth.

Suggested change

html {

color-scheme: light dark;

background: light-dark(#fbf7ec, #161617);

}

body {

font-family: "Sentient", serif;

color: light-dark(#1c1917, #c9c7cd);

background: light-dark(#fbf7ec, #161617);

background-image:

linear-gradient(to right, light-dark(rgb(168 162 158 / 0.05), rgb(68 68 72 / 0.2)) 1px, transparent 1px),

linear-gradient(to bottom, light-dark(rgb(168 162 158 / 0.05), rgb(68 68 72 / 0.2)) 1px, transparent 1px);

:root {

--color-bg-light: #fbf7ec;

--color-bg-dark: #161617;

--color-text-light: #1c1917;

--color-text-dark: #c9c7cd;

--color-grid-light: rgb(168 162 158 / 0.05);

--color-grid-dark: rgb(68 68 72 / 0.2);

}

html {

color-scheme: light dark;

background: light-dark(var(--color-bg-light), var(--color-bg-dark));

}

body {

font-family: "Sentient", serif;

color: light-dark(var(--color-text-light), var(--color-text-dark));

background: light-dark(var(--color-bg-light), var(--color-bg-dark));

background-image:

linear-gradient(

to right,

light-dark(var(--color-grid-light), var(--color-grid-dark)) 1px,

transparent 1px

),

linear-gradient(

to bottom,

light-dark(var(--color-grid-light), var(--color-grid-dark)) 1px,

transparent 1px

);

Copilot · 2026-01-03T15:34:37Z

+      background: light-dark(#fbf7ec, #161617);
+    }
+    body {
+      font-family: "Sentient", serif;
+      color: light-dark(#1c1917, #c9c7cd);
+      background: light-dark(#fbf7ec, #161617);
+      background-image:
+        linear-gradient(to right, light-dark(rgb(168 162 158 / 0.05), rgb(68 68 72 / 0.2)) 1px, transparent 1px),
+        linear-gradient(to bottom, light-dark(rgb(168 162 158 / 0.05), rgb(68 68 72 / 0.2)) 1px, transparent 1px);
+      background-size: 24px 24px;
+    }


The light-dark() CSS function is a relatively new CSS feature (part of CSS Color Module Level 5) that has limited browser support. According to browser compatibility data, it's only supported in Chrome/Edge 123+, Safari 17.5+, and Firefox 120+. Users on older browsers will not see the appropriate light/dark mode colors, which could result in poor contrast or readability issues. Consider adding fallback colors using the @supports rule or CSS custom properties with fallback values to ensure basic styling works in older browsers.

Suggested change

background: light-dark(#fbf7ec, #161617);

}

body {

font-family: "Sentient", serif;

color: light-dark(#1c1917, #c9c7cd);

background: light-dark(#fbf7ec, #161617);

background-image:

linear-gradient(to right, light-dark(rgb(168 162 158 / 0.05), rgb(68 68 72 / 0.2)) 1px, transparent 1px),

linear-gradient(to bottom, light-dark(rgb(168 162 158 / 0.05), rgb(68 68 72 / 0.2)) 1px, transparent 1px);

background-size: 24px 24px;

}

background: #fbf7ec;

}

body {

font-family: "Sentient", serif;

color: #1c1917;

background: #fbf7ec;

background-image:

linear-gradient(to right, rgb(168 162 158 / 0.05) 1px, transparent 1px),

linear-gradient(to bottom, rgb(168 162 158 / 0.05) 1px, transparent 1px);

background-size: 24px 24px;

}

@media (prefers-color-scheme: dark) {

html {

background: #161617;

}

body {

color: #c9c7cd;

background: #161617;

background-image:

linear-gradient(to right, rgb(68 68 72 / 0.2) 1px, transparent 1px),

linear-gradient(to bottom, rgb(68 68 72 / 0.2) 1px, transparent 1px);

}

}

Removed async CSS loading trick and inline critical CSS in favor of simple synchronous loading. This approach is cleaner and eliminates the flash of unstyled content without additional complexity.

Fix flash of unfocused content by adding critical inline CSS

a45ccc9

Added critical CSS inline in the <head> to prevent flash of unstyled content. The critical styles include color-scheme, background colors, and grid pattern to ensure the page displays correctly before the external CSS loads.

Copilot AI review requested due to automatic review settings January 3, 2026 15:31

vercel bot deployed to Preview January 3, 2026 15:31 View deployment

Copilot started reviewing on behalf of Tnixc January 3, 2026 15:32 View session

Copilot AI reviewed Jan 3, 2026

View reviewed changes

Simplify CSS loading by using synchronous stylesheet

ae0e01d

Removed async CSS loading trick and inline critical CSS in favor of simple synchronous loading. This approach is cleaner and eliminates the flash of unstyled content without additional complexity.

vercel bot deployed to Preview January 3, 2026 15:35 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix flash of unfocused content by adding critical inline CSS#8

Fix flash of unfocused content by adding critical inline CSS#8
Tnixc wants to merge 2 commits intomainfrom
claude/fix-content-flash-aGdwT

Tnixc commented Jan 3, 2026

Uh oh!

vercel bot commented Jan 3, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 3, 2026

Uh oh!

Copilot AI Jan 3, 2026

Uh oh!

Copilot AI Jan 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		linear-gradient(to right, light-dark(rgb(168 162 158 / 0.05), rgb(68 68 72 / 0.2)) 1px, transparent 1px),
		linear-gradient(to bottom, light-dark(rgb(168 162 158 / 0.05), rgb(68 68 72 / 0.2)) 1px, transparent 1px);

Conversation

Tnixc commented Jan 3, 2026

Uh oh!

vercel bot commented Jan 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel bot commented Jan 3, 2026 •

edited

Loading