People began swapping various variations on the technique on Twitter and on blogs. The height equals 0 trick wasn’t really a requirement anymore, and in fact, the trick was a lot more reliable when display: table was used instead. By sprinkling in Begevin’s conditional comment, Aslett was able to make his code work in just about every browser with no JavaScript at all.floatcontainer:after /* IE < 8 */ 2011: The Micro Clearfixīut even when it was published in 2010, clearfix reloaded brought with it some unnecessary baggage from older browsers. Thankfully, the web is a place of iteration, and one message board user pointed Aslett in the direction of the aforementioned Holly Hack. In those days, JavaScript was a relatively untested technology, and relying on it in such a fundamental way was less than ideal. Having never heard of the Holly Hack, Aslett’s code required a bit of JavaScript to fix issues that were specifically popping up on IE for Mac. There was one pretty massive drawback in Aslett’s first version of the clearfix. He called the trick a clearfix because it centered around clearing the floated elements to fix the issue.Īslett’s approach took advantage of what were, at the time, still very new CSS pseudo-selectors (specifically :after) to automatically clear out two floated elements. Tony Aslett posted a new thread to his message board, CSS Creator, proposing a new approach. That same year, in May, there were a few more browsers to deal with, and not all of them could be patched with one line of CSS. Odd, I know, but it only gets more complicated. The result was a CSS trick that looked like this: /* Hides from IE5-mac \*/ For that, Begevin added a conditional comment which used a backslash inside of her CSS, which strangely enough, blocked individual CSS rules from IE for Mac in the old days. Unfortunately, the 1% trick didn’t work on a Mac. Begevin noticed that if you apply a height of just 1% to each of the floated elements in the above scenario, the problem would actually fix itself (and only because it activated an entirely different bug) in Internet Explorer for Windows. The Holly hack combines two different CSS techniques that worked in the days of Netscape Navigator and Internet Explorer (IE) 4 to solve some layout issues. The Holly hack is named for its creator, Holly Begevin, a developer and blogger at CommunityMX. 2004: The Holly Hack and the origin of Clearfix An early illustration of the issue from Position is Everythingīut to understand the clearfix, you have to go back even further, to the 2004 and a particular technique called the Holly hack. The clearfix was invented to solve all that. To complicate things further, the bug is inconsistent across browsers. All you might be trying to do is position a sidebar to the left of your main content block, but the result would be two elements that overlap and collapse on each other. When elements are aligned this way, the parent container ends up with a height of 0, and it can easily wreak havoc on a layout. The clearfix, for those unaware, is a CSS hack that solves a persistent bug that occurs when two floated elements are stacked next to each other. To take a look at a popular CSS trick, the clearfix, and find out exactly how a web design technique comes to be. I thought it might be fun (and fascinating) to actually follow this creative exchange all the way through. As such, a lot of the best development techniques happen right out in the open, on blogs and in forums, evolving as they’re passed around and improved. Then the element will move down below the floated element.The web community has, for the most part, been a spectacularly open place. Unless you apply clear to that element in the same direction as the float. If the element can fit horizontally in the space next to another element which is floated, it will. The clear property is directly related to floats.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |