[tw5] If your CSS isn't working ...

Google Group (Read Only)
#1

I just spent the last hour trying to figure out why some CSS wasn’t working.

My TiddlyWiki has 3 CSS tiddlers.

The CSS in “Tiddler B” has nothing wrong with it at all.

Turns out that the CSS in “Tiddler B” was not getting applied because the last line of CSS in “Tiddler A” was missing a lousy “}”. So all of the styling in Tiddler A was being applied, but the styling in Tiddler B was not happening because of the missing “}” at the end of Tiddler A.

So heads up. What may seem like a problem with CSS in one tiddler may actually be an issue with the CSS in some other tiddler.

Now, how to reattach all of this hair …

2 Likes
#2

Hi,

Have a closer look at: https://tiddlywiki.com/#Debugging%20Stylesheets
It may have helped you. … but it won’t give any hair back :wink:

-mario

2 Likes
#3

LOL, yeah, as PMario points out, a new feature was just introduced for exactly that.

Another CSS hair-puller is when I sometimes test styling by using local styleblocks. A local styleblock is obviously superior to avoid going back and forth between a dedicated stylesheet tiddler. Well, on some occasions things mysteriously don’t work… and, much hair later, it turns out the styling demands a dedicated stylesheet to work. It makes no sense to me, but OK, c’est la vie. Just like baldness. My avatar indicates how much CSS I’ve fumbled around with.

<:-)

#4

Relevant GitHub issue, for anyone willing to solve this : #6176

TL;DR

This happens because tiddlywiki put all the css in one <style> tag.

When errors occur in CSS, the parser attempts to recover gracefully, throwing away only the minimum amount of content before returning to parsing as normal. - https://www.w3.org/TR/css-syntax-3/#error-handling

Here, the minimum amount of content = ALL the css rules following the missing closing bracket.
Meaning that if the faulty stylesheet has a list-before field set to empty, the entire UI will break.

The easiest solution seems to encapsulate each stylesheets in their own <style> tag but it’s more tricky than it seems…

#5

(sorry for the double post)

@Mat : Things to look out for with inline style (that I know of) :

  • Space after the opening will break the css (tiddlywiki insert a p element)

  • -- are converted to –, which break CSS variables.

    You can use a pragma rule (source) like

\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline html

to avoid this, but it will affect the rest of the tiddler too …

To prevent that, you can put your CSS in a field with the pragma, then transclude the field in the tiddler. That way the pragma rule will only affect the CSS.