CODEWITHSUNDEEP
htmlcssweb
EvenBoy
EvenBoy

Reputation: 395

How is multiple-level css rendered for html pages?

This situation starts from our project which is launching not in Chrome on PC, but on Video cloud streaming service on Tv Settop operated by our customer company.

Following their explanation, the streaming service renders an application made of html/javascript web pages(called an app) which we've made and sent to them.

They said their streaming service displays the application by printing the result screens of our web application by 15 or 30 fps.

Issue: In 15 fps the app displaying are okay, but in 30 fps, the app shows something like ink-spreading when pages are replaced, newly rendered or popups are opened in the app, and they insist they should displays the app by 30 fps for launching.

Absurdly, they say "the cause is in our app because most of the html tags refer or load many(not quite, but maybe over 10 times) css properties from stylesheet. This causes the spreading issue. the number of loading css on each tag should be lower than 10."

We guess they think the algorithm of loading css is run by loading and printing(rendering) multiple level of css properties at each level for any tag.

So, Checking into their insists, I've tried making some html tags of multiple loading too much css level (1000 times).

Just like 

<div class="sub1">
 <div class="sub2"> 
  ......
   <div class="sub1000"> Is This Text Changing at lest once?
   </div> 
  ......
</div>

.css :

.sub1 { font-size: 20px; color: blue; }
.sub2 { font-size: 50px; color: green; }
.....
.sub1000 { font-size: 100px; color: brown; }

Of course, and as all could expect, No any re-loading and spreading phenomenon is found when loading the html app.

You can check the result of my test above at https://jsfiddle.net/MaggiePhalk/ex30xb6k/7/

In this case,
1) How is css rendered for html tags when tags refer to multiple css properties caused by css-inheritance or multiple pointing of css rules? Is the each tag rendering each of css properties for its own? Or, Is this rendering the final css property decided by a system in css rules?

Can anyone let me know the internal algorithm?
2) If the first question is no matter in general browsers like Chrome, Does the cloud streaming service matter on this case?

Added: If is there any research or referrence related, please leave them, to prove our customer company that the css loading is not a problem. Thx.

Upvotes: 1

Views: 195

Answers (2)

c-smile
c-smile

Reputation: 27470

I am an author of Sciter engine that is an embeddable HTML/CSS rendering engine. So have inside information of how it gets rendered.

Considering your markup and styles:

That text will be drawn only once.

These CSS rules: 

.sub1 { font-size: 20px; color: blue; }
.sub2 { font-size: 50px; color: green; }

will not have any effect on rendering as they applied to elements having no direct text nodes. Only this

.sub1000 { font-size: 100px; color: brown; }

will affect rendering as it defines color and sizes of only glyphs you see in your document.

But! If you will define backgrounds on all those 1000 elements:

.sub1 { font-size: 20px; background-color: blue; }
.sub2 { font-size: 50px; background-color: green; }
...
.sub1000 { font-size: 100px; background-color: white; }

then all of them will be drawn under the hood. As topmost element has (here) white background that covers the whole stack of elements you will not see that rainbow underneath. Thus use that responsibly.

With solid background colors you probably will not notice too much slowdown but many semitransparent layers may create some noticeable delays.

Even that could be OK if the rendering engine uses GPU rendering (as Sciter does). But in some cases, when rendering is done by CPU, you will see slowdown. I suspect that this is your case if they say about "printing" (WM_PRINTCLIENT I suspect).

The best results can be achieved if those two layers use the same GPU backend.

Like here for example, when Sciter renders HTML/CSS directly into DirectX 3D scene: http://sciter.com/sciter-and-directx/

And by the way here is another screencast that shows rendering of <video> inside HTML/CSS that is inside 3D scene:

https://www.youtube.com/watch?v=6nuDkwJwUuY

Upvotes: 1

Vivek Solanki
Vivek Solanki

Reputation: 462

as for your first question, for any element, more specific css rule for it will have the highest priority over other generalize css rules. check this --

check here

also check this fiddle >> i have created this fiddle

as per your requirement , just for demo it is working as per your needs i hope,

HTML :

 <div class="sub1">yeah
 <div class="sub2"> cool
   <div class="sub1000"> Is This Text Changing at lest once?
   <div class="sub1001">
   helo world
   </div>
     </div>
</div>
</div>

CSS: 

.sub1 { font-size: 20px; color: blue; background-color:black}
.sub2 { font-size: 50px; color: green; background-color:white}

.sub1000{ font-size: 100px; color: black;background-color:red}
.sub1001{font-size: 10px; color:red}

hope this helps :)

Upvotes: 0

Related Questions