Recently I was working on a problem where some DOM elements inherited the absolute position from their ancestors. Well this is pretty rare, but however it happens from time to time. If you’re wandering, as I was, how to disable this and to call the default property value just stop hesitating. The default property is static. So you can simply write:
#element_id {
position:static;
}
Well someone can ask how you can have CSS that contains selectors that aren’t used on the site. There are two reasons to happen and most of the cases both of them are true.
The first reason is that not all of the pages in a site need all of the selectors. Imagine large web based application with lines of CSS and one of the sites’ pages is the “about” page where you’ve only the header, the footer and some text. That’s my favorite example! In fact you don’t need to load the whole CSS file just to apply only few selectors for this page. In most of the cases this is the reason to have unused selectors.
The second reason is that during the development process most of the code become old and therefore unused. You start by writing some CSS selectors which after changing the requirements, and the layout are no longer used. But the fear to ruine the layout because some other page can break after the removal of some selectors make the CSS to grow and fill with unused code.
Now you can overcome this problem by simply using a software (JavaScript) that helps you determine which selectors are never used. Check out this brilliant solution called helium.
We all know, or at least all of us reading every new coming news on the web development sky, that making your browser reflow and repaint is expensive. Actually it is quite expensive.
What I’m about to say comes under the tag of “very good news” for those how didn’t know what repaint as and what cssText is.
When it comes to the repaint and reflow, which sounds really strange, there are lots and lots of articles what this is, but in breve, just to let you know what is and where’s the bad part of it I’ll describe it again. Continue reading cssText and how it can be very very useful
Related to the previous several posts jQuery comes with two functions that help you dynamically get the width and height of an element.
Have you ever asked about the width of an element in pixels which is 100% wide from the CSS? Well $.width() gives you the answer. Everything else is about experiments.
Well these are function which help you modify different CSS properties with JavaScript. You know you can do that in “pure” evangelistic JS, but normally every library comes with its own bunch of functions that do the job. In fact in jQuery the things are little bit more complicated because the returned value of those CSS modifiers is yet again a object of the element you modify, which is the same object as this you’ve selected with one of the selectors in jQuery.
This is extremely useful when it comes to chains and you chain several functions using the dot operator. Thus you call more and more functions for every selector and perform a modifier every time you call them.