0

I have a problem that seems very strange!

When I refresh my page (an absolute static page only with HTML and CSS, but no JavaScript), there is a short time the color of text shows are change to blue, which is defined by the default of browser. And after a while, the text color change to the color which I defined in my css file.

This problem does not happened every time. I am sure I have not use any asynchronous css. Who can tell me this is why? Any help will be appreciate!

<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/sprite_small.css">
<link rel="stylesheet" type="text/css" href="css/sprite.css" media="(min-width:1440px)">
<link rel="stylesheet" type="text/css" href="css/nav.css">
<link rel="stylesheet" type="text/css" href="css/media.css">
<link rel="stylesheet" type="text/css" href="css/history.css">
Tasos K.
  • 7,979
  • 7
  • 39
  • 63
LiuGui
  • 330
  • 1
  • 3
  • 9
  • used to this *{color:#000;} – Rohit Azad Malik Oct 29 '15 at 09:31
  • May I ask where abouts in your document you load the css file? – OliverRadini Oct 29 '15 at 09:33
  • is your css file hosted somewhere else or does your page need to fetch a lot of other resources like images, fonts, ..? – KristofMols Oct 29 '15 at 09:33
  • @Donutttt I put the css file in my tag and it. – LiuGui Oct 29 '15 at 09:40
  • @Molske Not too much css, just this: – LiuGui Oct 29 '15 at 09:40
  • ``` ``` – LiuGui Oct 29 '15 at 09:41
  • I add the color about the text in history.css – LiuGui Oct 29 '15 at 09:43
  • How exactly are we supposed to help here? You just show us how you linked your stylesheets, not whats in them and thats the bit thats not working. Also, `link` tags, to be valid, should be closed with `/>` at the end. – somethinghere Oct 29 '15 at 09:46
  • @somethinghere I am sorry, there are two many css and I can not past it all,,, – LiuGui Oct 29 '15 at 10:02
  • But the issue with that is that we _can't_ really help you. Like asking a doctor to diagnose a flu but he can only look at a square centimetre around the bellybutton - it's not going to be very effective. You will have to narrow down the problem - remove stylesheets, remove code until it works again. Good luck. – somethinghere Oct 29 '15 at 10:04
  • @somethinghere Thanks for your advice , I will try it! – LiuGui Oct 29 '15 at 10:06
  • Also, try the correctly closing your link tags first, like this: `` (note the `/>` at the end - because the link tag, like an image tag, has no content inside it you have to close it as such). Just guessing but thats the only issue I can see immediately with your code. – somethinghere Oct 29 '15 at 10:09
  • Also, this may help: http://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/ – OliverRadini Oct 29 '15 at 10:26
  • One other think to note, and please someone correct me if I'm wrong, but the large number of separate style sheets may be causing a problem, are you able to concatenate them into one file? – OliverRadini Oct 29 '15 at 12:25
  • @OliverRadini They are a potentially bigger debug task, but having multiple stylesheets is not a problem at all. In fact, old IE stylesheets were limited to 4000 instructions each, so you had to split up there anyhow. Browser can handle this :) – somethinghere Oct 30 '15 at 10:43
  • @somethinghere That's interesting - I was under the impression that more stylesheets means more http requests, and thus a slower loading time. My understanding was that it is best practice to concatenate stylesheets before using them on live code. http://stackoverflow.com/questions/2336302/single-huge-css-file-vs-multiple-smaller-specific-css-files discusses the issue, but is a little old, so perhaps things have changed? – OliverRadini Oct 30 '15 at 12:53
  • @oliverradini Well yes, its not best practise but in this case, it isn't going to contribute to the problem, so concatenating here wont help solving the issue. Otherwise, agreed :) – somethinghere Oct 30 '15 at 13:19
  • @somethinghere I wonder if you could explain why it wouldn't affect the problem? I'm still learning about these things so it'd be good to know. My thinking on it was that if the styling was in one of the last css files listed it would take proportionally longer to reach that styling due to the number of stylesheets prior. However that is presuming that the stylesheets are not cached, and are loading each time – OliverRadini Oct 30 '15 at 13:24
  • 1
    @oliverradini With regards to caching it makes no difference whether theres one file or many, they will all have the same caching problem. Regarding loading, as long as all of them load, it makes no difference to the browser. Regarding best practise for production, yes, use concatenation and reduce http requests, but in development it might be beneficial to have it in multiple files as your can easily pinpoint issues (js logging tells you the filename and linenumber and CSS does the same with the inspector). :) – somethinghere Oct 30 '15 at 13:33

0 Answers0