compass utilities/clearfix

[Andrew Vit]

Hi Chris,

I tried to work out how you decided on the implementation of +clearfix
that appears in compass/utilities. It's different from the one in
Blueprint, and a google search for [clearfix moz-scrollbars] seems to
return mostly results for Compass! :-)

I was having an issue with scrollbars showing up on a clearfix element
in Safari. Changing overflow:auto to overflow:hidden took care of it,
and I'm sure you're aware that's the usual simple fix for enclosing
floats... I don't think overflow:auto is a strong solution, because
you might get scrollbars when you don't want them. Simply
overflow:hidden works great most of the time, but there are a few
cases when it's not suitable (e.g. it contains positioned elements),
and for that there's another alternative method using content:after.

=clearfix
&:after
:content " "
:display block
:height 0
:clear both
:overflow hidden
:visibility hidden
// This makes ie6 get layout
:display inline-block
// and this puts it back to block
&
:display block

That's basically how it's done in Blueprint. They also do a star-hack
to set height:1% before resetting it to block, I'm not sure if it's
necessary and I don't know how we could do that in a mixin...

Would you consider accepting a reworked +clearfix to make it more
robust? I'm wondering if the simple method using overflow:hidden
doesn't really need its own mixin (it's already a one-liner), or if
there should be an alternate syntax for both methods to make their
purpose look consistent...

Andrew

[Chris Eppstein]

I'm certainly willing to change the implementation of clearfix if we're having bugs in certain browsers. I'm not a big fan of the content after clearfix approach because it's a lot of css and I've had bugs with some browsers that give me 1 line-height below block elements when none was desired. If there is a different approach that uses overflow and works better, I'd like to pursue that approach before reverting to blueprint's implementation.

As far as the *hack goes, it works in Sass. Just use it like you expect. In fact, if you ever find a css hack that doesn't work in Sass, that's a bug -- please let us know.

-Chris

[Andrew Vit]

Yes, agreed... this solution is heavy-handed in most cases. That's why I was thinking of alternate syntax like +pie-clearfix or such for when that's needed, and change the regular one to just do overflow:hidden.

(pie = Position Is Everything)

When I have time I'll set up some tests for these...

For the :after method, the line-height gap is solvable, if not already addressed in this version (I think the height:0, overflow:hidden take care of that. If not, there's always line-height:0, etc. ).

Andrew

[Andrew Vit]

As usual, PPK has the scoop:

http://www.quirksmode.org/css/clearing.html

I think both methods are useful, but generally stick to
overflow:hidden for simplicity and it's usually enough. I've stayed
away from overflow:auto, probably because of past experience with
scrollbars. I wasn't aware that width played a role in this... have to
test that.

A refresher is good from time to time. :-)

Andrew

[Allan Grant]

I had a problem with the clearfix in Compass as well, which was resolved by using Blueprint's: a footer that was absolutely positioned to the bottom of a relative container was getting cropped as overflow.

Now I have both +clearfix (Compass default) and +clearfix-alt (BluePrint default).

--
Allan

On Mon, Mar 30, 2009 at 4:36 AM, Andrew Vit <and...@avit.ca> wrote:

[Chris Eppstein]

Andrew, this has been a good thread. Would you like to take a first pass at a patch?

chris

[Andrew Vit]

Will do.

--Andrew

[Alex Cabrera]

Just made the following change to my local version of _clearfix.sass

=clearfix
:overflow hidden
:overflow -moz-scrollbars-none
:display inline-block
&
:display block

and that seems to clear up the problem with scrollbar appearing in
Safari (specifically the beta of version 4). Don't know if this is any
help and I don't know how to get this change pushed (or if I'm blowing
everything else up by doing it), but it's helpful and fixes the
scrollbar issue.

[Andrew Vit]

Yeah, that's pretty much what I did as a first stab too... I think
that's what we should go with, but I'll remove the -moz-scrollbars-
none as it means nothing when you use hidden.

https://developer.mozilla.org/en/CSS/overflow
-moz-scrollbars-none
Obsolete
Use overflow:hidden instead.

I've updated my master branch. Chris, do you prefer to cherry-pick
from my repo, or a patch? I also added some +float helpers a few weeks
ago, for ensuring good margin behaviour in IE. Not sure if you want
thems too... have a look. I thought all this float utility stuff
belongs together as well, so I renamed _clearfix.sass to _float.sass,
let me know if that makes sense?

http://github.com/avit/compass/tree/master

--Andrew

[Chris Eppstein]

I left a couple of comments on github. Once you address those, I'll cherry-pick your changes.

[Andrew Vit]

Reviving a sleeping thread here: the ever-popular clearfix debate.

I just stumbled across these two articles on clearing today, and it brought up some thoughts about how we use the clearfix mixins in Compass:

http://aloestudios.com/2009/12/goodbye-overflow-clearing-hack/
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

About +clearfix:

The overflow:hidden technique has its side-effects, but it covers many cases, and it’s short. There are two specific situations where this technique would cause you problems, where content needs to show outside the box:

* Suckerfish-style dropdowns
* box-shadow or other CSS3 transformations

About +pie-clearfix:

The content:after technique avoids these side-effects, but it’s verbose. Compass will cause a fair amount of repetition in the output, so it would be especially bad for such a promiscuous mixin to be used as the default all over the place. You can get around this by grouping clearfixed rules, basically as shown on the site above:

.check-one, .check-two
+pie-clearfix

The bottom line is that Compass has to make a compromise. The +pie-clearfix mixin would probably be a stronger default to avoid side-effects, but the simpler overflow:hidden method is preferable to avoid massive repetition. As long as you’re aware of the issues +clearfix can present, you can decide where to switch methods or plan ahead by grouping your +pie-clearfix rules together.

(Wolfr, some of this info might be worthwhile to add to the docs if you get to it before I have a chance!)

Andrew Vit

>> --~--~---------~--~----~------------~-------~--~----~
>> You received this message because you are subscribed to the Google Groups "Compass" group.
>> To post to this group, send email to compas...@googlegroups.com
>> To unsubscribe from this group, send email to compass-user...@googlegroups.com
>> For more options, visit this group at http://groups.google.com/group/compass-users?hl=en
>> -~----------~----~----~----~------~----~------~--~---
>>
>