Any Ideas For Firefox column-span Solution?

[gpercifield]

I know Firefox does not support column-span (or -moz-column-span) after all this time. But I have checked with every resource I have and can’t seem to find a work-around solution.

Here is a simple snippet. Any ideas?
https://jsfiddle.net/gpercifield/sakmzvt3/

[Atelierbram]

One-off hacky work-around, not really bullet-proof solution maybe using @supports:

@supports not (column-span: all) {
  .span-3-columns {
    position: absolute;
    top:0;right:0;left:0;
  } 
}

http://codepen.io/atelierbram/pen/xRvrbd

[gpercifield]

@Atelierbram The problem there is that introducing extended or different amounts of content will create overlapping content.

A friend of mine just recent proposed a solution. It involves a little bit of js, but that sames to be the only way to do this.

Check this page out and resize the window to see it in action and view the source:
http://4-next.com/nv/test.cfm
Or on codepen…
http://codepen.io/gpercifield/pen/PbMQmO

It is in cfm just for some added functions of varying content sizes on refresh. You’ll see the js in the source.

Basically what it does:
1. Adds breakpoints to change the number of columns based on browser size (3 points – will change color of blocks for each.)
2. Adds some javascript to watch the size of the spanned div and then adjust the padding of the main container.

[Atelierbram]

Still quite minimal amount of JavaScript; I like it! But I like feature detection too, if only to be able to apply the CSS to supporting browsers. Apparently this also works in JavaScript:

function myFunction() { 
    // https://tiffanybbrown.com/2015/03/css-supports-api/
    // https://dev.opera.com/articles/native-css-feature-detection/
    var notSpanny = CSS.supports('not (column-span: all)');

    if (notSpanny) { 
         console.log('I do not support column-span:all!');
        // the code for the extra added padding here
    } else {
      console.log('I support column-span:all!');
    }
 }
myFunction()

now in CSS we can do:

.span-3-columns {
  column-span: all;
}

@supports not (column-span: all) {
    .span-3-columns {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
}

My fork of your demo

[flaviomauri]

Found this looking for a cross-solution as well since FF still doesn’t support the span in 2018(!)

If I understand correctly, you have a scenario like:

Title
Content Content Content

what I’ve done is targeting only the Content (P in my case) for the column behaviour.

Not sure if this is what you had been looking for but if that’s the case is very basic solution.

[Author]

Posts