Any Ideas For Firefox column-span Solution? - CSS-Tricks

This topic is empty.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
December 28, 2016 at 9:50 pm #249408

gpercifield
Participant

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/

December 29, 2016 at 3:40 am #249409
Atelierbram
Participant
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
December 29, 2016 at 9:56 am #249445

gpercifield
Participant

@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.

December 29, 2016 at 1:15 pm #249454
Atelierbram
Participant
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
August 16, 2018 at 3:44 am #275397

flaviomauri
Participant

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

Viewing 5 posts - 1 through 5 (of 5 total)

The forum ‘CSS’ is closed to new topics and replies.