Monday, March 31st, 2008
Browser CSS float error detection with jQuery
Category: Browsers
, CSS, Debugging, jQuery
Mario Heiderich of Ormigo has created a jQuery based code snippet/bookmarklet that is capable of detecting floating errors and adding a dotted orange border to elements which should be cleared - but aren't.
It saved me a huge bunch of time debugging complex layouts for all browsers - especially IE6. If jQuery isn't already loaded on the page it can easily be fetched with the several jQuerify approaches.
Snippet
JAVASCRIPT:
-
-
(function(){
-
function checkNext(element, floating) {
-
if(element.css('clear') != 'none') {
-
var clearing = true;
-
} else {
-
if(element.next().length !== 0) {
-
var clearing = false;
-
checkNext(element.next(), floating);
-
} else {
-
console.log(element);
-
element.css({border:'2px dotted orange;'})
-
}
-
}
-
}
-
$('body *').each(function(){
-
var element = $(this);
-
if(element.css('float') !== 'none' && element.next().length !== 0) {
-
checkNext(element.next(), element.css('float'));
-
}
-
eval('');
-
});
-
})();
-
Bookmarklet
JAVASCRIPT:
-
-
javascript:eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(3(){3 5(a,b){4(a.2(\'p\')!=\'9\'){6 c=h}d{4(a.1().7!==0){6 c=o;5(a.1(),b)}d{n.m(a);a.2({l:\'j i k;\'})}}}$(\'g *\').f(3(){6 a=$(e);4(a.2(\'8\')!==\'9\'&&a.1().7!==0){5(a.1(),a.2(\'8\'))}q(\'\')})})();',27,27,'|next|css|function|if|checkNext|var|length|float|none||||else|this|each|body|true|dotted|2px|orange|border|log|console|false|clear|eval'.split('|'),0,{}))
-
4.3 rating from 23 votes
Mhhm. The bookmarklet says $ is not defined?
The code won’t really work. It totally ignores new block formatting contexts. So if you’ve got an overflow:hidden applied to a parent element (which, if you didn’t know, creates a BFC), then this code blindly carries on searching sibling elements ignoring the fact that floats are not contained by ancestors, they’re contained by BFC’s.
Oh - and it will break if your not using Safari or Firebug[lite].
Hi!
The code works - but not for any situation. When I find find some more time I will maybe work on all the special cases like clearfix and your mentioned case. Anyway - yes: firebug is necessary but to be honest I don’t know too much web devs not using it during work. Consider it herewith mentioned as requirement ;)
So - to wrap it up:
Requirements:
- jQuery
- Firebug (llite)
Greetings,
.mario
Just for fun a quick port to Prototype \w bonus Element#css added :)
http://pastie.caboo.se/173214
alt link: http://www.pastie.org/173224
Great idea ;) I prepare version for Mootools here: http://blog.desmart.com/2008/04/01/34/
Thx Mario!
Nice idea. I’ll check out the implementation. It would be sweet to have this integrated into a front end test suite like Selenium. Set it up as part of the automated build that happens on each check-in and you have another fine tool for catching front-end errors before users do.
Thanks.Good article