mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2026-10-11 10:31:42 +00:00
Code Issues Releases Wiki Activity

Improve discoverability of the style attribute feature (#9975)

Browse Source 
* Improve discoverability of the style attribute feature

* Add missing tiddler  "Style Attributes"
This commit is contained in:
Théophile Desmedt
2026-08-21 09:04:34 +02:00
committed by GitHub
parent f9d5ee0ad7
commit 6680967875
2 changed files with 31 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
editions/tw5.com/tiddlers/wikitext/HTML in WikiText.tid
+2 -24
View File
@@ -1,6 +1,6 @@
caption: HTML
created: 20131205160816081
modified: 20241025073517909
modified: 20260821065251883
tags: WikiText
title: HTML in WikiText
type: text/vnd.tiddlywiki
@@ -68,26 +68,4 @@ In an extension of conventional HTML syntax, attributes of elements and widgets
!! Style Attributes
TiddlyWiki supports the usual HTML ''style'' attribute for assigning CSS styles to elements:
```
<div style="color:red;">Hello</div>
```
<<.from-version "5.2.2">> In an extension to HTML, TiddlyWiki also supports accessing individual CSS styles as independent attributes. For example:
```
<div style.color="red">Hello</div>
```
The advantage of this syntax is that it simplifies assigning computed values to CSS styles. For example:
```
<div style.color={{!!color}}>Hello</div>
```
<<.from-version "5.3.6">> TiddlyWiki also supports setting [[CSS custom properties|https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties]] as independent attributes. For example:
```
<div --bg-color={{{ [[red]] }}}>Hello</div>
```
{{Style Attributes}}
editions/tw5.com/tiddlers/wikitext/Style Attributes.tid
+29
View File
@@ -0,0 +1,29 @@
created: 20260821065249926
modified: 20260821065326363
tags: [[HTML in WikiText]] [[How to apply custom styles]]
title: Style Attributes
type: text/vnd.tiddlywiki
TiddlyWiki supports the usual HTML ''style'' attribute for assigning CSS styles to elements:
```
<div style="color:red;">Hello</div>
```
<<.from-version "5.2.2">> In an extension to HTML, TiddlyWiki also supports accessing individual CSS styles as independent attributes. For example:
```
<div style.color="red">Hello</div>
```
The advantage of this syntax is that it simplifies assigning computed values to CSS styles. For example:
```
<div style.color={{!!color}}>Hello</div>
```
<<.from-version "5.3.6">> TiddlyWiki also supports setting [[CSS custom properties|https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties]] as independent attributes. For example:
```
<div --bg-color={{{ [[red]] }}}>Hello</div>
```