Issue link: https://read.uberflip.com/i/1146286
Working Around the Problem | 53 function altBgcolor(elem) { elem.style.backgroundColor = (new Date()).getHours( )%2 ? "#F08A00" : "#B8D4FF"; } The CSS expression calls the altBgcolor( ) function, which sets the style's background-color property to an explicit value, and this replaces the CSS expression. This style is associated with the 10 paragraphs in the page. Even after resizing, scroll- ing, and moving the mouse around the page, the CSS expression is evaluated only 10 times, much better than the tens of thousands in the previous example. One-Time Expressions http://stevesouders.com/hpws/onetime-expressions.php Event Handlers In most situations where I've seen CSS expressions used, it was possible to find an alternative that didn't require them. CSS expressions benefit from being automati- cally tied to events in the browser, but that's also their downfall. Instead of using CSS expressions, the frontend engineer can do the "heavy lifting" by tying the desired dynamic behavior to the appropriate event using event handlers. This avoids the evaluation of the expression during unrelated events. The event handler example demonstrates a fix to the min-width problem by setting the style's width property with the onresize event, avoiding tens of thousands of unnecessary evaluations during mouse movements, scrolling, etc. Event Handler http://stevesouders.com/hpws/event-handler.php This example uses the setMinWidth( ) function to resize all paragraph elements when the browser is resized: function setMinWidth( ) { setCntr( ); var aElements = document.getElementsByTagName("p"); for ( var i = 0; i < aElements.length; i++ ) { aElements[i].runtimeStyle.width = ( document.body.clientWidth<600 ? "600px" : "auto" ); } } if ( -1 != navigator.userAgent.indexOf("MSIE") ) { window.onresize = setMinWidth; } This sets the width dynamically when the browser is resized, but it does not size the paragraph appropriately when it is first rendered. Therefore, the page also uses the approach shown in the "One-Time Expressions" section to set the initial width using CSS expressions, while overwriting the CSS expression after its first evaluation.