CSS element() function

#1

I played around with this in TiddlyWiki over the weekend:

Warning: FF only. Experimental tech.

I imagine @Mohammad might make use of it as a mapped scroller beside the Section Editor. Similar, a long storyriver might benefit from it, too.

Ignore the examples on the MDN page – they’re beyond ridiculous. Check this out instead:

Announcing Monaco (VS Code) Editor for TiddlyWiki
A multi-column Layout / Storyview
#2

Very nice! I will play with this and see if I can use it!
It seems only Firefox supports it!

#3

So to make use of the CSS element() effectivly in TiddlyWIki we need html ID’s for the following and others

  • The whole story
  • The current edit text (for long tiddlers)
  • The current tiddler view for reading long tiddlers

It may also help with a tiddler preview on links?

Presumably there is additional code to allow click to select place actions

I am no CSS expert but it seems we may be able to create a generic solution at least for FireFox, but having it available ion any or one browser could be very helpful in some

#4

Any solution is likely to be a custom one. There are so many ifs and buts I don’t see this becoming a usable proposition any time soon.

List of issues (possibly incomplete) :

  1. It’s not a published standard (yet. see: "element()" | Can I use... Support tables for HTML5, CSS3, etc CSS Image Values and Replaced Content Module Level 4)
  2. It’s a Firefox-only “Experiment” at the moment.
  3. It only works with elements that have a populated ID attribute. TW does not use IDs and I don’t ever imagine that changing – it’s not the “TW way” of doing things.

A custom solution could use JavaScript to give the element of choice an ID. But if that element is frequently refreshed, expect the CSS element() to repaint often – which itself might be a performance issue. Hard to say for sure without experimentation.

My take: Do nothing right now. Wait for #1 and #2 to be completed. Only then would I consider addressing #3 with a JS solution.

#5

But surely all we have to do is find the right tiddler and add an ID to a div or span?

If it works well that is a trivial update for a particularly effective solution.

Nor is popup peviews and navigators part of TiddlyWiki so I believe it would be fine to use these for particular case, especially when it’s part of the page template (eg story/TOC) and not individual tiddlers.

#6

I did that when I played around with it.

Of course. I had that and similar in mind when I posted up top.

1 Like