Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #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/

    #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

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

    #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

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.