Search code examples
cssshapescss-shapes

Css shapes support in IE/Firefox


Does anyone know if and when IE and firefox will support the css shape features, especially shape-outside?


Solution

  • CSS Shapes Module

    What is this?
    W3 shape module (2014)
    W3 newest shape module (2015)

    From W3 documentation

    CSS Shapes describe geometric shapes for use in CSS. For Level 1, CSS Shapes can be applied to floats. A circle shape on a float will cause inline content to wrap around the circle shape instead of the float’s bounding box

    The current status of the specification is Candidate Recommendation. So its almost in the current recommendation so it can more or less be considered in the current web specification.


    IE support?

    Lets take a look. There is hope!
    So Jonathan Sampson shared this idea.

    Currently for the newest Edge browser, its current IE status is on the backlog. Tagged with medium priority.

    Can I use it now?

    TL;DR

    Run this to see if you can use it:

    .left {
      shape-outside: polygon(0 0, 100% 100%, 0 100%);
      float: left;
      width: 40%;
      height: 12ex;
      transform: scaleX(-1);
      position: relative;
      overflow: hidden;
    }
    .left:before {
      content: " ";
      position: absolute;
      width: 100%;
      background-color: rgba(50, 50, 50, 0.6);
      height: 100%;
      transform: rotate(-17deg);
      transform-origin: bottom right;
    }
    p {
      width: 300px;
      text-align: center;
    }
    <div class="left"></div>
    <p>
      If this text is inside the shape or all the text is below it, it's not working. If it is aligned to the top edge of the shape, then it is working.
    </p>