For example, in that html code I add list-style-type: none; in external test.css. When FireFox loads that page, the dots (list-style-type without none) could be seen for about a second. Only inline css works <ul id="categories" style="list-style-image: none; list-style-type: none;">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>TODO write content</div>
<ul id="categories">
<li><a>Test1</a></li>
<li><a>Test2</a></li>
<li><a>Test3</a></li>
</ul>
</body>
</html>
I have just tried it on both Windows and Mac in Firefox, and both worked fine for me. Apparently, this Flash Of Unstyled Content (FOUC) doesn’t happen on everyone’s browser.
If you insist fixing this, you might think about using some workarounds, such as placing the
<link>inbody, using@importto import your css, or google it…