Wykrywanie nie wyczyszczonych CSS::float

Wczoraj na Ajaxianie pojawiła się krótka notka o sposobie na szybkie sprawdzenie który z elementów nie jest odpowiednio “wyclearowany”. Feature wydaje się być o tyle fajny, że pod IE6 czasem ciężko stwierdzić dlaczego layout się rozjeżdża, a Developer Toolbar przy zainstalowanym Multiple Ie działa tylko w IE7…

Jako że w naszej pracy głównie używamy biblioteki mootools, postanowiłem nieco zmienić przedstawioną wersję tak by z współpracowała z nią a nie z jQuery. A oto rezultat:

checkClear = function(){
  function checkNext(element, floating) {
    if(element.getStyle('clear') != 'none') {
      var clearing = true;
    } else {
      if(element.getNext()) {
        var clearing = false;
        checkNext(element.getNext(), floating);
      } else {
        element.setStyles({border:'2px solid', 'border-color':'#000'});
      }
    }
  }
  $ES('', document.body).each(function(pEl){
    var element = pEl;
    if(element.getStyle('float') !== 'none' && element.getNext()) {
        checkNext(element.getNext(), element.getStyle('float'));
    }
  });
};
checkClear();

Bookmarklet – wystarczy wejść na stronę i wkleić tę linie do pasku adresu po czym kliknąć enter, lub jak sama nazwa wskazuje dodać do zakładek :)

javascript:eval('checkClear=function(){function A(B,D){if(B.getStyle("clear")!="none"){var C=true}else{if(B.getNext()){var C=false;A(B.getNext(),D)}else{B.setStyles({border:"2px solid","border-color":"#000"})}}}$ES("",document.body).each(function(C){var B=C;if(B.getStyle("float")!=="none"&&B.getNext()){A(B.getNext(),B.getStyle("float"))}})};checkClear()');