Skip to main content

Forums

This topic contains 4 replies, has 3 voices, and was last updated by  flaviomauri 7 months, 1 week ago.

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;
      } 
    }
    

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

    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)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star