CODEWITHSUNDEEP
htmlcss
user10294268
user10294268

Reputation:

Is there an alternative version of the "contain: content;" CSS property?

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?

Upvotes: 0

Views: 1688

Answers (2)

Rounin
Rounin

Reputation: 29463

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:

Upvotes: 1

user3337667
user3337667

Reputation: 161

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

Upvotes: 0

Related Questions