/    Sign up×
Community /Pin to ProfileBookmark

How is css processed?

Logically thinking the server sends the CSS data embedded inside the HTML data, both of which are encapsulated in the HTTP response and sent to the browser for rendering. My question is this: How often does the browser process the CSS data? Seems to me it would be parsed only once along with the HTML stream. However I’m reading a JavaScript beginners book where I’ve just created a script that makes changes to the styles (specifically the position property) and moves text across the screen by changing the position property. I’m a little baffled right now in understanding how CSS is processed by the browser. Does the browser continually monitor CSS for updates or does the page have to go through a complete reload using the updated CSS or maybe my lack of understanding is in the JavaScript portion?

<script language=”JavaScript”>
<!–
var paraOneLeft = 100;
var paraTwoLeft = 400;
var switchDirection = false;

function window_onload() {
window.setInterval(“moveParas()”,50)
}

function moveParas() {
if (switchDirection) {
paraOneLeft–;
paraTwoLeft++;
if (paraOneLeft == 100) {
switchDirection = false;
}
}
else {
paraOneLeft++;
paraTwoLeft–;
if (paraOneLeft == 400) {
switchDirection = true;
}
}
para1.style.left = paraOneLeft + “px”;
para2.style.left = paraTwoLeft + “px”;
}
–>
</script>
</head>

<body language=”JavaScript” onload=”window_onload();”>

<p style=”position: relative; left: 100px; top: 30px;” id=”para1″>Para 1</p>
<p style=”position: relative; left: 100px; top: 30px;” id=”para2″>Para 2</p>

</body>
</html>

to post a comment
CSS

7 Comments(s)

Copy linkTweet thisAlerts:
@fredmvFeb 18.2004 — [i]Originally posted by lcscne [/i]

[B]My question is this: How often does the browser process the CSS data?</html> [/B][/QUOTE]
That would be correct; the page is parsed then rendered according to your CSS rules and markup. When you set CSS rules via JavaScript, the CSS is not necessarily parsed again, rather the values are just updated according to what CSS values you change.

If you think about it, that would make sense because there is no point to walk through and parse the entire stylesheet if there's only one CSS rule you're changing.

Moreover, note that you are using non-standard JavaScript and that will only work under IE due to it polluting the global namespace with any element given an [font=courier]id[/font] or [font=courier]name[/font] attribute.
Copy linkTweet thisAlerts:
@lcscneauthorFeb 18.2004 — simply updating the css property isn't where I lack the uderstanding. I understand the javascript is updating css, but what triggers the browser to consider that change? In my mind I'm changing a string value, however that string value is meaningless unless it is processed. I'ts the same as when you write html and save it to disk, what good is it until you refresh your browser.
Moreover, note that you are using non-standard JavaScript and that will only work under IE due to it polluting the global namespace with any element given an id or name attribute.[/QUOTE]
Ah, you'll have to explain that one to me bro
Copy linkTweet thisAlerts:
@fredmvFeb 18.2004 — [i]Originally posted by lcscne [/i]

[B]what triggers the browser to consider that change?[/B][/QUOTE]
The fact that the script is dynamically changing the CSS associated with the element. What's going on behind the scenes is that the script is dynamically accessing the element's [font=courier]CSSStyleDeclaration[/font] object and thus the browser renders this change according to the rules in which you apply.[i]Originally posted by lcscne [/i]

[B]Ah, you'll have to explain that one to me bro[/B][/QUOTE]
What I'm saying is that you should not write the code as you have done; it's non-standard. Simply saying [font=courier]foo.style[/font] isn't enough; you should generally use [font=courier]document.getElementById('foo').style[/font].
Copy linkTweet thisAlerts:
@lcscneauthorFeb 18.2004 — [i]Originally posted by fredmv [/i]

[B]What I'm saying is that you should not write the code as you have done; it's non-standard. Simply saying [font=courier]foo.style[/font] isn't enough; you should generally use [font=courier]document.getElementById('foo').style[/font]. [/B][/QUOTE]

Very well, rest asured I will start practicing this. Hopefully the author of the book will address this at some point. Thanks, much appreciated.
Copy linkTweet thisAlerts:
@fredmvFeb 18.2004 — [i]Originally posted by lcscne [/i]

[B]Very well, rest asured I will start practicing this. Hopefully the author of the book will address this at some point. Thanks, much appreciated. [/B][/QUOTE]
You're very welcome; about the cross-posting issue earlier, don't worry about it. A very simple mistake to make.
Copy linkTweet thisAlerts:
@ray326Feb 19.2004 — Actually the Javascript isn't altering the CSS; they are both working on the DOM. The CSS statically sets various values for various attributes of various elements in the page's DOM. Then the CSS is done. The Javascript then alters some of those attribute values using the Javascript DOM binding (API).
Copy linkTweet thisAlerts:
@fredmvFeb 19.2004 — [i]Originally posted by ray326 [/i]

[B]Actually the Javascript isn't altering the CSS; they are both working on the DOM. The CSS statically sets various values for various attributes of various elements in the page's DOM. Then the CSS is done. The Javascript then alters some of those attribute values using the Javascript DOM binding (API). [/B][/QUOTE]
You are of course completely correct. I should've more explictly implied that the JavaScript alters the CSS properties [b]via the DOM API[/b] (which is actually what the [font=courier]CSSStyleDeclaration[/font] interface is all about).
×

Success!

Help @lcscne spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.3,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...