giersig.eu/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

fix: prevent FOUC for images and SVG icons on first paint

Browse Source 
Add critical CSS rules to constrain images (max-width:100%) and inline
SVGs (default 1.25rem) before Tailwind loads. Add width/height HTML
attributes to avatar images in hero sections and h-card sidebar widget.

Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
This commit is contained in:
Ricardo
2026-03-07 15:46:43 +01:00
parent 2077b8d866
commit c71a7f38a8
4 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/critical.css
View File

@@ -55,3 +55,7 @@ a{color:#b45309}
.site-nav{display:flex;align-items:center;gap:1rem}
.site-nav>a,.site-nav .nav-dropdown-trigger{color:#5c5750;text-decoration:none;padding-top:0.5rem;padding-bottom:0.5rem}
.dark .site-nav>a,.dark .site-nav .nav-dropdown-trigger{color:#a09a90}
/* Prevent FOUC — constrain images and SVG icons before Tailwind loads */
img{max-width:100%;height:auto}
svg:not(:root):not([width]){width:1.25rem;height:1.25rem}