470,648 Members | 1,608 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,648 developers. It's quick & easy.

Newbie - when is the CSS applied?

Hello, I'm new to CSS and I see lots of examples where Javascript is
used to apply styles to elements on page load - unobtrusive javascript
- so I assume the CSS must be applied last before the page is actually
displayed to the user. Am I correct? If not, when is the CSS
actually applied? And is there any tools that are used to debug CSS?

TIA
G
May 31 '08 #1
2 1802
GiJeet wrote:
Hello, I'm new to CSS and I see lots of examples where Javascript is
used to apply styles to elements on page load - unobtrusive javascript
- so I assume the CSS must be applied last before the page is actually
displayed to the user. Am I correct? If not, when is the CSS
actually applied? And is there any tools that are used to debug CSS?
CSS is typically applied at the time of page rendering, which (in modern
browsers), starts as the page is downloaded.

<technical>
Steps to display a web page:
1. Fetch the page and start downloading.
2. Hit the body and actual content. Start downloading external pages
(from style and script tags) as soon as you see those tags.
3. Start rendering the content currently downloaded as the page is
downloading.
4. If an external style page is loaded, reflow the current page to apply
those styles.
5. If a script tag without defer is hit, execute the script inside.
6. As more content is downloaded, reflow the page with the additional
content.
7. Once page is finished loading, fire the onload tags of the body and
execute the deferred scripts. Any dynamic modifications to the DOM or to
the styles cause a reflow.
</technical>

You should be able to see this effect if you load a moderate-sized
complex page and throttle your connection down to a few Kb/s.

As for tools to debug CSS, Firebug in Firefox and Dragonfly in Opera
should both be adequate.

--
Beware of bugs in the above code; I have only proved it correct, not
tried it. -- Donald E. Knuth
Jun 1 '08 #2
On Jun 1, 9:36 am, Joshua Cranmer <Pidgeo...@verizon.invalidwrote:
<technical>
Steps to display a web page:
1. Fetch the page and start downloading.
2. Hit the body and actual content. Start downloading external pages
(from style and script tags) as soon as you see those tags.
3. Start rendering the content currently downloaded as the page is
downloading.
4. If an external style page is loaded, reflow the current page to apply
those styles.
5. If a script tag without defer is hit, execute the script inside.
6. As more content is downloaded, reflow the page with the additional
content.
7. Once page is finished loading, fire the onload tags of the body and
execute the deferred scripts. Any dynamic modifications to the DOM or to
the styles cause a reflow.
</technical>

You should be able to see this effect if you load a moderate-sized
complex page and throttle your connection down to a few Kb/s.

As for tools to debug CSS, Firebug in Firefox and Dragonfly in Opera
should both be adequate.

--
Beware of bugs in the above code; I have only proved it correct, not
tried it. -- Donald E. Knuth
Thanks!
Jun 1 '08 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by Francois Grieu | last post: by
46 posts views Thread by Carlo Milanesi | last post: by
2 posts views Thread by GiJeet | last post: by
6 posts views Thread by HightowerC | last post: by
5 posts views Thread by SharkD | last post: by
reply views Thread by warner | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.