Test styles like this... maybe?

Tips & Tricks
,
#1

'dis a weird one. Don’t try to figure it out by just reading this post (you’ll fail), instead copy-paste this into a tiddler:

Directly edit this, e.g change "black" into "red":

<style contenteditable>
  p {
    color: black;
  }
</style>

No JavaScript, the `<style>` tag is set to `display: block` and using `contenteditable`

<style>
style[contenteditable] {
  display: block;
  background-color: #eee;
  padding: 20px;
  font-family: monospace;
}
</style>

https://css-tricks.com/did-you-know-that-style-and-script-tags-can-be-set-to-display-block/

Maybe it is useful for testing styles? Changing the value (as instructed in the text) does not change the actual tiddler content, so the modifications are not stored.

2 Likes
#2

That is fascinating! I’m not sure I have a practical use, but it sure is fun to play with. Also fun is the linked pen: https://codepen.io/jak_e/pen/PwLXXP.

#3

Thanks @twMat !

Woa! This is nice - I can test color changes without going through the usual process - (I have a dark-ish) background - and it shows me what will and what won’t work (not to mention I am forced to learn more colors than the usual red, green, blue,…) :grinning_face_with_smiling_eyes: !

I am so amazed at what can be done in TiddlyWiki - - ,…

(I am more of a consumer - - I spend about 99% of my time just using tiddlyWIki and less than 1% “designing” it - - but recently decided to delve - just a little - into the inner workings - like searches, dictionaries, etc - and boy - this is great!)

Thanks Again - for consumers like me - this is Huge!

TwN00b