Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Updated clearfix #1151

Closed
wants to merge 4 commits into from

5 participants

Sam Richard Eric M. Suzanne Chris Eppstein Scott Kellum cimmanon
Sam Richard

The clearfix currently in Compass is kinda old and not so great. This mixin adapts itself to the level of legacy support you need and writes different clearfixes. It also makes $legacy-support-for-mozilla a user-configurable variable.

Snugug added some commits
Sam Richard Snugug User Configurable $legacy-support-for-mozilla 7cdc7f0
Sam Richard Snugug A Better Clearfix mixin
The current clear fix mixin was out and out the Legacy clearfix. This mixin adapts depending on the amount of legacy support you need, and will write different clearfixes depending on the amount of support you need.
b628f8b
frameworks/compass/stylesheets/compass/_support.scss
@@ -10,6 +10,10 @@ $legacy-support-for-ie7: $legacy-support-for-ie !default;
// Setting this to false will result in smaller output, but no support for legacy ie8 hacks
$legacy-support-for-ie8: $legacy-support-for-ie !default;
+// Setting this to false will result in smaller output, but no support for legacy Mozilla hacks.
+$legacy-support-for-mozilla: true !default;
Eric M. Suzanne Owner
ericam added a note

This already exists in the master branch. Can you re-submit on that branch, for release in 0.13?

Sam Richard
Snugug added a note

Thought I had. I'll reroll

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
.../stylesheets/compass/utilities/general/_clearfix.scss
((11 lines not shown))
@mixin clearfix {
- overflow: hidden;
Eric M. Suzanne Owner
ericam added a note

It is actually quite useful to have the choice between a clearfix that uses pseudo-elements and one that does not. Pseudo-elements are used regularly for other purposes these days.

For the same reason, I'm hesitant to include the :before hacks, when only :after is actually needed for clearing floats. I know some people like to un-collapse their top margins, but that seems like a separate issue to me. Margins are supposed to collapse, and I don't want that changing just because I need my floats cleared.

Maybe we need some optional defaults and arguments here?

Sam Richard
Snugug added a note

I can rewrite the micro clearfix to a different method but I can't seem to find a clearfix that supports legacy Mozilla other than this one that doesn't also include overflow: hidden which is an even worse offender IMO that :before and :after.

@ericam I don't find the current clearfix mixin to be useful at all. The time it takes me to type out overflow: hidden is the same as the time it takes to type out @include clearfix I do use both methods of clearing floats, but when I invoke a clearfix mixin, I want it to be one that uses pseudo elements. Otherwise, I can just type it out like a big girl.. A mixin that only emits a single line that isn't configurable in any way feels wrong to me.

Messing with overflow is not an appropriate choice for clearing floats when you have content that you want to overflow (eg. drop menus). A pseudo element clearfix is the better choice for an all-round solution.

Eric M. Suzanne Owner
ericam added a note

I agree. All the options suck, and overflow is offensive. :) But sometimes we need it, and that's why I want to supply options rather than one-size-fits-all solutions. I don't think our options necessarily need to live in separate mixins like they have. I love how smart this combined mixin is. But we could add a toggle to it as well, for people that need the overflow hack in some cases.

It's not about saving keystrokes. The advantage of clearfix over overflow: hidden; in your code is that you have added meaning. When the w3c invents a proper way to clear floats (or we get a better hack), you can simply change the clearfix mixin one place, and all your overflow problems go away.

Clearfix and overflow: hidden are two completely different things though. From what I have seen overflow: hidden being included in the clearfix by default has driven lots of people away from using the Compass clearfix.

cimmanon
cimmanon added a note

I would suggest a compromise. This is what my own clearfix mixin looks like:

$default-clearfix: modern !default;

@mixin clearfix($type: $default-clearfix) {
    @if $type == modern {
        @include clearfix-modern;
    } @else if $type == traditional {
        @include clearfix-traditional;
    } @else {
        @include clearfix-overflow;
    }
}

// http://www.positioniseverything.net/easyclearing.html
@mixin clearfix-traditional {
    zoom: 1; // fix for IE

    &:after {
        content: ' ';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
}

// http://nicolasgallagher.com/micro-clearfix-hack/
@mixin clearfix-modern {
    zoom: 1; // fix for IE

    &:before, &:after { content: ' '; display: table; }
    &:after { clear: both; }
}

@mixin clearfix-overflow {
    overflow: hidden;
}

Those of us who prefer the micro clearfix as their goto clearfix technique can get what they want and instances where overflow is used for clearing purposes remains clearly defined.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Sam Richard

I've updated my pull request to remove the $legacy-support-for-mozilla variable and added an optional parameter to the clearfix mixin to force the overflow: hidden if wanted (although I still maintain that it's a poor excuse for a clearfix and doesn't actually function as a clearfix so much as a really terrible hack for something similar)

Eric M. Suzanne
Owner

They're all hacks, and they are all terrible. :) Before/after are no better for those of us who use generated content on a regular basis.

This looks good to me, but it should have updated tests and be pulled into master, not stable. I also think this replaces any need for pie-clearfix, which should be deprecated.

Thanks!

Sam Richard

I'll do that. That being said, the nice thing about these Clearfix methods is you can Clearfix and still use generated content (I know I do), so that's not so bad.

Eric M. Suzanne
Owner

Thanks! I'll have to play with the combination of generated-clearfix and generated content.

Chris Eppstein

This needs to be reworked on top of the legacy browser support system.

@Snugug do you care to take another swing at this for an upcoming release?

Sam Richard

Yah I will this weekend.

Sam Richard Snugug referenced this pull request
Closed

Snugug clearfix #1485

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 28, 2013
  1. Sam Richard
  2. Sam Richard

    A Better Clearfix mixin

    Snugug authored
    The current clear fix mixin was out and out the Legacy clearfix. This mixin adapts depending on the amount of legacy support you need, and will write different clearfixes depending on the amount of support you need.
Commits on Apr 3, 2013
  1. Sam Richard
  2. Sam Richard
This page is out of date. Refresh to see the latest.
1  frameworks/compass/stylesheets/compass/_support.scss
View
@@ -10,6 +10,7 @@ $legacy-support-for-ie7: $legacy-support-for-ie !default;
// Setting this to false will result in smaller output, but no support for legacy ie8 hacks
$legacy-support-for-ie8: $legacy-support-for-ie !default;
+
// @private
// The user can simply set $legacy-support-for-ie and 6, 7, and 8 will be set accordingly,
// But in case the user set each of those explicitly, we need to sync the value of
64 frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss
View
@@ -4,14 +4,62 @@
@import "hacks";
-// This basic method is preferred for the usual case, when positioned
-// content will not show outside the bounds of the container.
-//
-// Recommendations include using this in conjunction with a width.
-// Credit: [quirksmode.org](http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html)
-@mixin clearfix {
- overflow: hidden;
- @include has-layout;
+// And advanced clearfix mixin that will write the correct clearfix depending on what level of browser support you need.
+// Adapted from: [The very latest new new way to do "clearfix"](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php) and [Better float containment in IE using CSS expressions](http://nicolasgallagher.com/better-float-containment-in-ie/)
+
+@mixin clearfix($overflow: false) {
+ // If you truly want the Overflow clearfix, you'd simply call @include clearfix(true) to get the old Compass clearfix.
+ @if $overflow {
+ overflow: hidden;
+ @include has-layout;
+ }
+ // If you prefer the much more comprehensive and intelligent variations on clearfix, you can have them.
+ @else {
+ // Legacy Clearfix
+ @if $legacy-support-for-ie6 and $legacy-support-for-ie7 and $legacy-support-for-mozilla {
+ /* for IE 6/7 */
+ *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
+ /* non-JS fallback */
+ *zoom: 1;
+
+ &:before,
+ &:after {
+ content: ".";
+ display: block;
+ height: 0;
+ overflow: hidden;
+ }
+
+ &:after {
+ clear: both;
+ }
+ }
+ // Micro Clearfix
+ @else if $legacy-support-for-ie6 and $legacy-support-for-ie7 and not $legacy-support-for-mozilla {
+ /* for IE 6/7 */
+ *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
+ /* non-JS fallback */
+ *zoom: 1;
+
+ &:before,
+ &:after {
+ content: "";
+ display: table;
+ }
+
+ &:after {
+ clear: both;
+ }
+ }
+ // Modern Clearfix
+ @else {
+ &:after {
+ content: "";
+ display: table;
+ clear: both;
+ }
+ }
+ }
}
// This older method from Position Is Everything called
Something went wrong with that request. Please try again.