Toon posts:

[CSS3] Generated lists implementatie

Pagina: 1
Acties:

Verwijderd

Topicstarter
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:

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?

  • tec
  • Registratie: Juni 2001
  • Laatst online: 17-12-2024

tec

TEC

Stel ik begrijp het goed wat hier gebeurd.

Is het dan niet dat je nu vanuit de stylesheet allerlei structuur zaken probeert aan te passen in je html? Bedoel dat je je stylesheet niet meer echt als stylesheet gebruikt (de handelingen zijn niet meer style gerelateerd), en op dat moment lijkt me de stylesheet niet de juiste plaats om bovenstaande handelingen uit te voeren.

Verwijderd

Topicstarter
er wordt inderdaad content gegenereerd, maar geen informatie die niet al in het document staat. Het gaat om generated content for paged media, dus bijvoorbeeld het automatisch genereren van een inhoud, een index, headers en footers, footnotes etc, al dat soort grappen die je in boeken tegenkomt.

Dat is m.i. wel degelijk stijl, al ben ik met je eens dat het wat op het randje zit, desalniettemin is het eerste voorbeeld al gewoon opgenomen in de working draft en kan je in CSS2.1 al gewoon content aanpassen met de content property