Ik ben bezig met een soort preflight app die generated lists implementeerd. Hierbij kom ik wat dingen tegen die ik even wil bediscussieren, dan kan het vervolgens naar de wwwstyle mailing lijst denk ik.
Lees even door: http://www.w3.org/TR/css3-gcpm/#generated
stel nu dat ik een inhoud wil genereren, alleen dan liever in lijst vorm, dan zou dat als volgt gaan:
stel nu dat ik in die li een ander element heb waarin de generated content moet. Het is niet helemaal duidelijk hoe dat precies gaat, maar ik vermoed dat de volgende constructie voor de hand ligt:
dus make-element laten verwijzen naar het element wat je wilt repeteren en de prototype-insert-position setten op het element waar de content moet verschijnen
Nu wil ik eigenlijk de entries in die inhoud laten linken naar de hoofdstukken, daarvoor moeten de h1's een id krijgen en de entries in de inhoud een href. Volgens mij is daar nog niet echt een methode voor, dus ik gooi maar eens wat op tafel:
om een id voor de h1 te genereren:
waar de eerste parameter het te setten attribuut is en het tweede de value. Eventueel kunnen meer paren commaseperated worden toegevoegd. generate is een functie die een unieke string genereert, maar zou ook vervangen kunnen worden door iets anders, bijvoorbeeld alles van <content> (http://www.w3.org/TR/css3-gcpm/#setting).
vervolgens van hetzelfde idee gebruik maken om een href te setten:
waar source-attribute een functie is analoog aan source-counter() (http://www.w3.org/TR/css3-gcpm/#toc)
Graag jullie ideeen hierover, zou dit een aardige manier zijn, of misschien beter iets anders?
Lees even door: http://www.w3.org/TR/css3-gcpm/#generated
stel nu dat ik een inhoud wil genereren, alleen dan liever in lijst vorm, dan zou dat als volgt gaan:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| ...
<style>
#toc { prototype: container }
#toc-entry {
prototype-insert-position: current;
}
h1.chapter { make-element: toc-entry content }
</style>
...
<div>
<h1>Table of contents</h1>
<ul id="toc">
<li id="toc-entry"></li>
</ul>
</div>
...
<h1 class="chapter">Introduction</h1>
... |
stel nu dat ik in die li een ander element heb waarin de generated content moet. Het is niet helemaal duidelijk hoe dat precies gaat, maar ik vermoed dat de volgende constructie voor de hand ligt:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| ...
<style>
#toc { prototype: container }
#toc-target {
prototype-insert-position: current;
}
h1.chapter { make-element: toc-entry content }
</style>
...
<div>
<h1>Table of contents</h1>
<ul id="toc">
<li id="toc-entry"><a id="toc_target"></a></li>
</ul>
</div>
...
<h1 class="chapter">Introduction</h1>
... |
dus make-element laten verwijzen naar het element wat je wilt repeteren en de prototype-insert-position setten op het element waar de content moet verschijnen
Nu wil ik eigenlijk de entries in die inhoud laten linken naar de hoofdstukken, daarvoor moeten de h1's een id krijgen en de entries in de inhoud een href. Volgens mij is daar nog niet echt een methode voor, dus ik gooi maar eens wat op tafel:
om een id voor de h1 te genereren:
Cascading Stylesheet:
1
2
3
4
| h1.chapter { make-element: toc-entry content; make-attribute: id generate; } |
waar de eerste parameter het te setten attribuut is en het tweede de value. Eventueel kunnen meer paren commaseperated worden toegevoegd. generate is een functie die een unieke string genereert, maar zou ook vervangen kunnen worden door iets anders, bijvoorbeeld alles van <content> (http://www.w3.org/TR/css3-gcpm/#setting).
vervolgens van hetzelfde idee gebruik maken om een href te setten:
Cascading Stylesheet:
1
2
3
4
| #toc-target { prototype-insert-position: current; make-attribute: href "#" source-attribute(href); } |
waar source-attribute een functie is analoog aan source-counter() (http://www.w3.org/TR/css3-gcpm/#toc)
Graag jullie ideeen hierover, zou dit een aardige manier zijn, of misschien beter iets anders?