PDA

Click to See Complete Forum and Search --> : How is css processed?

lcscne
02-18-2004, 11:07 AM
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>
fredmv
02-18-2004, 12:12 PM
Originally posted by lcscne
My question is this: How often does the browser process the CSS data?</html> 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 id or name attribute.
lcscne
02-18-2004, 12:28 PM
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.
Ah, you'll have to explain that one to me bro
fredmv
02-18-2004, 12:48 PM
Originally posted by lcscne
what triggers the browser to consider that change?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 CSSStyleDeclaration object and thus the browser renders this change according to the rules in which you apply.Originally posted by lcscne
Ah, you'll have to explain that one to me broWhat I'm saying is that you should not write the code as you have done; it's non-standard. Simply saying foo.style isn't enough; you should generally use document.getElementById('foo').style.
lcscne
02-18-2004, 02:53 PM
Originally posted by fredmv
What I'm saying is that you should not write the code as you have done; it's non-standard. Simply saying foo.style isn't enough; you should generally use document.getElementById('foo').style.
Very well, rest asured I will start practicing this. Hopefully the author of the book will address this at some point. Thanks, much appreciated.
fredmv
02-18-2004, 02:54 PM
Originally posted by lcscne
Very well, rest asured I will start practicing this. Hopefully the author of the book will address this at some point. Thanks, much appreciated. You're very welcome; about the cross-posting issue earlier, don't worry about it. A very simple mistake to make.
ray326
02-18-2004, 10:21 PM
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).
fredmv
02-18-2004, 10:36 PM
Originally posted by ray326
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). You are of course completely correct. I should've more explictly implied that the JavaScript alters the CSS properties via the DOM API (which is actually what the CSSStyleDeclaration interface is all about).