Report: organizing CSS and StyleSheet rendering

[Yakov]

I thought this can be of use for experimenting with CSS and perhaps
for developers (see rendering of StyleSheets).

Note 0. The organization described here has a purpose of good view and
further development, but not space economy.

Note 1. Long CSS-tables places in one /*{{{*/.../*}}}*/ pair of
"brackets" doesn't look good because the scrolling is on the bottom of
page.

Note 2. The above thing gets even worse if the reader has an opened
bookmark panel.

The simpliest solution is to split the CSS into some parts wrapped in
different /*{{{*/.../*}}}*/ brackets.

However, sliders can make this a bit more good-looking, with beatiful
navigation. Now I'll describe the syntax which is a bit tricky
compared the one you probably expect.

Before writing this, let's say a bit about sliders which implement
transclusion of some other tiddlers, not sections.

* tiddler, slider and tabs macros transclude the text of other
tiddlers but no CSS, CSS is transcluded by the PrettyLinks [1]

* all the wikified comments should be placed into /*** ***/ wrapping
(see [2])

* if using transclusion of other StyleSheet tiddlers, a good idea is
to write

/***
<<slider .. [[IncludedStyleSheet]] ..>>
***/
[[IncludedStyleSheet]]

so that you have a slider which shows the content and a link right
above the slider which directs you to editing room.

* the transclusion approach has two main problems:
** reprocessing (after changing a tiddler with CSS included into
StyleSheet you need to open and save the latter; or.. see [3]
** splitting: when you experiment with CSS, you can move
"experimental" rules to "standart", or "semantics" for example, so
there's a reason not use transclusion widely

Now I describe the syntax of sections which allows to make spoilers in
CSS tiddlers:

/***
Experimental {{Sm{part}}}:
<<slider chkSliderCSSsectionInStyleSheet {{tiddler.title+"##CSS-
section"}} "second part of CSS" "">>
/%
!CSS-section
*
***/
/*{{{*/
.Sm { font-size: smaller; }
/*}}}*/
/***
/%
!end section%/
***/

The structure is rather simple: comment with spoiler, hidden beginning
of a section, CSS, hidden end of a section. It would be beatiful to
edit this with EditSectionPlugin [4] but unfortunately sections don't
have tree structure, so the following construction wouldn't get the
effect:

/***
!Experimental {{Sm{part}}}:
<<slider chkSliderCSSsectionInStyleSheet {{tiddler.title+"##CSS-
section"}} "second part of CSS" "">>
/%
!!CSS-section
*
***/
/*{{{*/
.Sm { font-size: smaller; }
/*}}}*/
/***
/%
!!end section
!end section%/
***/

As you can see, here the evaluated parameter is used so that you can
change the name if this tiddler or copy-paste this code from one
tiddler to another [5].

[see StyleSheet rendering below]

The most interesting are the extra "/%" before "!end section" which
suppreses the "!end section%/" line inside the slider content and
extra "*". The latter suppreses the appearence of a list item with "/"
content which appears in both Opera and FireFox. Also it appears
sometimes after a wiki-comment placed after all other content of CSS-
tiddler. This is somewhat that needs to be fixed, is it?

Let me know if some of this deserves place in tiddlywiki.org, I
personaly have no idea about this.

[1] http://tiddlywiki.org/wiki/StyleSheet
[2] http://tiddlywiki.org/wiki/Escaping
[3] https://groups.google.com/group/tiddlywiki/browse_thread/thread/e6d523cd587f10ae?hl=ru
[4] http://tiddlytools.com/#EditSectionPlugin
[5] http://tiddlywiki.org/wiki/Macro

[Yakov]

A bit of old discussions:

[#1] https://groups.google.com/group/tiddlywiki/browse_thread/thread/3fe78f17f5d54376
[#2] https://groups.google.com/group/tiddlywiki/browse_thread/thread/ad98ca4e750a3b51

The [#2] discussion reminds me one more thing about organizing CSS-
tiddlers. If you want see CSS as a code when editing, you can use tag-
based CSS: choose a tag (CSS, for example) and write the following
CSS:

div[tags~="CSS"].tiddler.editor { font-family:monospace; }

The quesion about orginizing evolution of CSS I haven't made clear yet
is the usage of common CSS for some documents. Implying the "not doing
twice" method I can only think of @import dirrective for achieving
this, but this causes to open outer style sheets manually with some
other editors.