[Dynamic Styles] a question of performance and efficient solution

[Mohammad Rahmani]

A dynamic css can be like a below tiddler 

Title: my-custom-style

Tags: $:/tags/Stylesheet

[data-tags ~= "recipe"] .tc-tiddler-body {
font-family: "Roboto";
font-weight: 500;
font-size:   32px;
line-height: 48px;
}

Now assume I need to apply the above styles to any tiddler has tag recipe AND also has a parent tag from american, european or asian all child of continental.

so I may use below code as body of above  my-custom-style  tiddler 

<$list filter="[[continental]tagging[]]" variavle=sl>

  [data-tags*="<<sl>>"] [data-tags ~= "recipe"] .tc-tiddler-body {
font-family: "Roboto";
font-weight: 500;
font-size:   32px;
line-height: 48px;
}  

</$list>

Note in real case I use much more complicated css here.

The issue is as my wiki grows with children of continental parent tag I got a very large  my-custom-style so my question is:

1. What is the performance impact using the above approach?

2. What simpler solution do you propose?

I appreciate your input here.

Best wishes

Mohammad

[Saq Imtiaz]

This is a good question and something I have been wondering about recently while working on some performance improvements for Streams.

In general terms, there is a cost to having wikitext in CSS tiddlers when refreshing the styles in refreshStyles()
However most of the time this is negligible compared to the time taken by the actual rendering process. 

This might make for a good dev discussion on Github.

[Mohammad Rahmani]

Thank you Saq. 

So I will start a thread in the GitHub discussion board.

Best wishes

Mohammad

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/9614cc2e-52b1-47d8-b619-f605f90f9d09n%40googlegroups.com.

[Mohammad Rahmani]

Another question of dynamic stylesheet in Tiddlywki:

1. Goto  https://tiddlywiki.com/

2. Create a new tiddler and put the below scripts(wikitext) as its body and save

<$button set="$:/state/SampleReveal1" setTo="show">Hide scrollbars</$button>
<$button set="$:/state/SampleReveal1" setTo="hide">Show scrollbars</$button>

<$reveal type="match" state="$:/state/SampleReveal1" text="show">

<style>body { overflow: hidden; /* Hide scrollbars */ }</style>

Show scrollbars!

</$reveal>

3. Click on the Hide scrollbars

4. Click on the Show scrollbars

You can nicely hide and show the scrollbars, but this is a dynamic stylesheet, I wish to know

Q1. Do you recommend these kinds of wikitext? What is the best practice?

Q2. What is the performance effect? Does it cause Tiddlywiki to delete and regenerate the big stylesheet tiddler every time and force a DOM refresh? If so, what do you recommend?

Best wishes

Mohammad