Scope inline CSS to the current tiddler

Tips & Tricks
#1

I found I wanted the effect of <style scoped> in my tiddlers but since that is not available in most browsers I found an alternative. With the modern support of nested CSS and the idea that TW adds a data-tiddler-title attribute to all tiddlers, we can have our cake and eat it to:

<style>
  [data-tiddler-title="<<currentTiddler>>"] {
    /* Put all your scoped CSS here */
  }
</style>

An example:

<style>
  [data-tiddler-title="<<currentTiddler>>"] {
    .long-list {
      display: grid;
      grid-auto-flow: column;
      grid-template-rows: repeat(10, 1fr);
    }
  }
</style>

@@.long-list
<<list-links "[tag[Jounal]nsort[created]]">>
@@

I thought others might find that pretty cool.

5 Likes
#2

That’s pretty cool @sukima. Thanks for sharing.

Because <style scoped> was dropped from the spec in favor of @scope in CSS.

https://caniuse.com/css-cascade-scope

#3

Very useful! Especially when one uses inline css.

1 Like
#4

list-links should understand a class parameter. See:https://tiddlywiki.com/#list-links%20Macro

So it should be possible to use <<list-links filter:"..." class:"long-list">>

#5

Of course a class could be applied anywhere it makes sense, but it’s not about application of style, @sukima’s point is about the definition, encapsulation, composibility, and re-usability – without the fear of css leakage. IOW scope.