Problem: CSS fails to load (page unstyled/layout broken, console may show nothing) —— Trove problem library

What you will run into

The page opens with broken layout, stacked text, "missing" styles - like a plain-text page.

The trap: in the Network panel the .css status is 200 and the Preview is complete, yet the page is still unstyled; the console may show no errors at all; normal mode is broken while incognito works.

No matter how you search, you can't find the cause.

Why this happens

The browser decides whether to apply a stylesheet based on the response header Content-Type - a 200 status doesn't mean the style will be applied. The core root cause is almost always the server-side MIME config:

Two other common traps: cache trap (after fixing, normal mode is still unstyled while incognito works - the browser cached the old CSS and its response headers); font icon boxes (CSS fine but icons garbled - wrong font MIME).

Whether the browser applies a stylesheet is decided by the response header Content-Type, independent of the status code: a 200 CSS served as text/plain or application/octet-stream is discarded;

HTTP allows exactly one Content-Type value, and comma-joined multiples (text/css,text/html) are silently ignored by strict browsers — no console error, status 200, the hardest case to debug.

Caching is the second trap: after the fix, normal mode still shows unstyled pages while incognito works = the browser cached the old CSS and its headers.

Deterministic takeaway: on unstyled pages, first check the CSS request's response headers in the Network panel (is Content-Type text/css), then rule out cache (compare incognito); on the server side, nginx missing include mime.types is the most common root cause (falls back to text/plain);

after fixing, add Cache-Control or rename files to break the cache; fixed diagnostic: 200 + no console error = the problem is headers or cache — do not touch the CSS content.

Step by step

1. Locate in three steps — Diagnose

F12 console for errors -> Network panel filtered by .css for the status -> look at the response header Content-Type (the core battlefield: 200 + Preview fine but page unstyled = definitely an interpretation problem).

curl -I https://your-domain/style.css

Check whether Content-Type is text/css.

2. Fix the server MIME — Required

nginx: make sure include mime.types; exists, set the fallback default_type application/octet-stream;; or give css an explicit type:

location ~ \.css$ { types { text/css css; } }

Apache: AddType text/css .css; IIS: check the MIME mapping (.css -> text/css), any extra custom Content-Type response headers, and web.config <customHeaders>.

3. Font icon boxes: fix the font MIME — Required

.woff2 -> font/woff2, .woff -> font/woff, .ttf -> font/ttf, .otf -> font/otf, .svg -> image/svg+xml, .eot -> application/vnd.ms-fontobject.

4. Cache trap — Required

User side: clear cache (Ctrl+Shift+Delete -> Cached images and files); developers: Ctrl+F5 hard refresh; production: version the CSS:

<link rel="stylesheet" href="common.css?v=20260806">

How to confirm it works

Response-header assertion (expected output):

curl -I https://your-domain/style.css
-> Content-Type: text/css

Styles render normally; after a hard refresh normal mode matches incognito; font icons no longer show boxes.

Other environments

Symptom

The page opens with broken layout, stacked text, "missing" styles (like a plain-text page). Signs: .css status 200 in the Network panel with complete Preview, yet the page is still unstyled; the console may show no errors at all (browser "silently drops"); in some scenarios normal mode is broken while incognito works; font icons show as boxes.

Cause

The browser decides whether to apply a stylesheet based on the response header Content-Type; a server-side MIME config error is the core root cause (a 200 status doesn't mean the style will be applied):

1. Wrong Content-Type: text/plain (dropped as plain text), application/octet-stream (dropped as binary), text/html (refused) - common when the server has no MIME type table (e.g. nginx missing include mime.types, falling back to default_type text/plain).
2. Invalid Content-Type format: e.g. text/css,text/html comma-joined. The HTTP standard allows only one value; the server doesn't validate and sends it as-is, and strict browsers like Edge silently drop it (no console error, status still 200). This is the article's real case (common.css).
3. Cache trap: after fixing the server, normal mode is still unstyled while incognito works - the browser cached the old CSS and its response headers; hard refresh/clear cache/add a version solves it.
4. Others: 404/403/500, CORS cross-origin interception, browser extension blocking (ERR_BLOCKED_BY_CLIENT), expired SSL certificate (ERR_CERT_DATE_INVALID).

Solution

1. Locate in three steps: F12 console for errors -> Network panel filtered by .css for the status -> look at the response header Content-Type (core battlefield; 200 + Preview fine but page unstyled = 100% an interpretation problem).
2. Fix the server MIME:

• nginx: include mime.types; (.css -> text/css), fallback default_type application/octet-stream;; or location ~ \.css$ { types { text/css css; } }
• Apache: AddType text/css .css
• IIS: check three stacked configs - MIME type mapping (.css should be text/css), HTTP response headers custom Content-Type (delete extras), web.config <customHeaders> node

1. Font icon boxes (CSS fine but icons garbled): font MIME must be right too - .woff2 -> font/woff2, .woff -> font/woff, .ttf -> font/ttf, .otf -> font/otf, .svg -> image/svg+xml, .eot -> application/vnd.ms-fontobject.
2. Cache trap: user side clears cache (Ctrl+Shift+Delete -> Cached images and files) / developer Ctrl+F5 hard refresh / DevTools disable cache; production versions the CSS <link rel="stylesheet" href="common.css?v=20260806">.