CODEWITHSUNDEEP
cssshapescss-shapes
Florian Gl
Florian Gl

Reputation: 6014

Css shapes support in IE/Firefox

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

Upvotes: 1

Views: 1531

Answers (1)

Persijn
Persijn

Reputation: 14990

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>

Upvotes: 8

Related Questions