0

How can one keep just some child elements clearly visible, when the parent is opaque, without affecting the rendering performances of the page?

I am trying to make specific elements under an overlay to react and to be rendered as if they were above the overlay.

  • is there any way in CSS to influence the rendering of specific underlaying elements when blending with the overlay? Or is the mix-blend-mode working just top-down direction? (e.g. I'd like to tell just .visible to blend with the overlay differently; while all the rest underneath should have the normal blending)

  • is filter working just on the selected element? Doesn't it affects the rendering of underlaying elements, when the selected element has opacity? (e.g. Make the overlay make everything below as greyscale)

And, since I assume the answers of both questions above won't help me, the actual question is:

  • Is it possible to visually compensate, on the .visible elements, the opacify effect

Note:

I know that one solution could be to use a selector:

div.data :not(.visible) { opacify: .5; }

rather than using an overlay, but I have doubts how performances would be (especially on not powerful mobiles) trying to apply opacify to the thousands of .data-subelements that would be :not(.visible). And also the click|hover on the opacified/disabled elements wouldn't be prevented (while I want just click on the area of the .visible to be caught).

Any performant solution? Or what I am asking is impossible nowadays?

I tried to write an example snippet but I couldn't find a way to solve my problem.

Javascript is also accepted

The priority is to have that visual/functional effect with decent performances on a generic mobile, when the number of li is above 100 and each of them contains 100 DOM elements.

/* structure */
div.data { display: table; }
ul { display: table-row-group; }
li { display: table-row; }
li > div { display: table-cell; }
/* style */
li > div.content { color: red; }
.visible { color: green; border: 1px dashed black; padding: 0 5px; }
/* Overlay */
.data:after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;
}
/* reduce emphasis */
.data:after {
  background-color: white;
  opacity: .5;
}
/* visual "disabled" effect */
.data:after {
  filter: grayscale(100%);
}
<div class="data">
  <ul>
   <li>
    <div class="content">Foobar1</div>
    <div>
     <span class="content">other content</span>
     <span class="visible">
      Not opaque
      <input type="checkbox" checked />
     </span>
    </div>
   </li>
   <li>
    <div class="content">Foobar2</div>
    <div>
     <span class="content">other content</span>
     <span class="visible">
      Not opaque
      <input type="checkbox" />
     </span>
    </div>
   </li>
  </ul>
</div>
doğukan
  • 23,073
  • 13
  • 57
  • 69
Kamafeather
  • 8,663
  • 14
  • 69
  • 99
  • "...but I have doubts how performances would be..." if they are just doubts, then test them? Perhaps you'll be surprised by the results – David784 Feb 23 '19 at 15:26
  • I didn't try that method before, just read about it, but actually that works only for the `.visible` element but doesn't work as intended with all the other semitransparent elements, because the `opacity` is halved more and more for each descendant of `.data`. My method was to add an `:after`-pseudo-element to each `table-cell` so to apply the effect there (on each single overlay); and that was killing performances when trying to add/remove those hundreds pseudo-elements on the fly (the overlay[s] need to be activated/deactivated with a click). – Kamafeather Feb 23 '19 at 17:17
  • [Here](https://stackoverflow.com/questions/19457057/disable-opacity-on-child-element-when-parent-element-has-opacity) is where I read of it, but that solution considers just one-level depth for the opaque/non-opaque sub-elements of `.data`. – Kamafeather Feb 23 '19 at 17:35

0 Answers0