0

I'm looking for an alt of contain: content; CSS property for old browsers compatibility. Is there any? Or at the least is there a CSS trick for that?

Mat Sz
  • 2,524
  • 1
  • 10
  • 23
  • Please explain your problem by giving real example what do you want to achieve? This question doesn't explain everything. – user3337667 Jan 26 '20 at 20:00
  • This new css rule can make any element contain its content so it will not gonna displayed outside its border, for example if u applied a blur filter on it, it will not gonna affect the outside at all. –  Jan 26 '20 at 21:26
  • The problem is I can't use it because not all browser support it –  Jan 26 '20 at 21:27
  • Alternative is to use data attributes in your html and apply css to data attributes. – user3337667 Jan 26 '20 at 22:39

2 Answers2

1

It depends what you're using contain: content for, but in some situations you can substitute:

overflow: hidden

and you will be okay.

This is because contain: content is a shorthand for contain: layout paint.

It is contain: paint which (visually, at least) produces an outcome which greatly resembles overflow: hidden.

Working Example:

.outer {
  position: relative;
  float: left;
  margin-right: 12px;
  width: 100px;
  height: 100px;
  background-color: rgb(255, 0, 0);
}

.outer p {
  position: absolute;
  top: 0;
  right: 0;
  margin: 3px;
  padding: 0;
  color: rgb(255, 255, 255);
  font-size: 24px;
  font-weight: bold;
}

.outer-3 {
  contain: content;
}

.outer-4 {
  overflow: hidden;
}

.inner {
  width: 50px;
  height: 50px;
  background-color: rgb(255, 255, 0);
}

.inner-2,
.inner-3,
.inner-4 {
  margin-top: 75px;
}
<div class="outer outer-1">
<p>1</p>
<div class="inner outer-1"></div>
</div>

<div class="outer outer-2">
<p>2</p>
<div class="inner inner-2"></div>
</div>

<div class="outer outer-3">
<p>3</p>
<div class="inner inner-3"></div>
</div>

<div class="outer outer-4">
<p>4</p>
<div class="inner inner-4"></div>
</div>

In the example above:

  1. Outer has no special rules and Inner has no margin-top
  2. Outer has no special rules and Inner has a margin-top of 75px
  3. Outer has contain: content and Inner has a margin-top of 75px
  4. Outer has overflow: hidden and Inner has a margin-top of 75px

Further Reading:

Rounin
  • 27,134
  • 9
  • 83
  • 108
0

Alternative is to use data attributes in your html and apply css to data attributes.

Refer this answer: Select elements by data attribute in CSS

user3337667
  • 161
  • 1
  • 10