spango skrev:
Anledningen till att jag gjorde transformeringen till HTML var för att jag inte såg nåt vettigt sätt att få till rutorna med bara CSS, men nu kan vi nog kyssa XSLT-mallen farväl.
Hmm...
Visst kan du det - eller så kan du utnyttja en annan XSLT-mall för att göra lösningen mer generell och återanvändningsbar även för de fall du eventuellt behöver fler än fyra rutor i högerkanten;)
Om du använder XSLT för att lägga till rutorna direkt i XML:en "on the fly" (istället för att gå omvägen via HTML) - kan du förenkla CSS:en rätt avsevärt samtidigt som du slipper att CSS-hårdkoda kryssrutorna mha :before och :after-float-trixande i CSS:en ;)
XML:en skulle t.ex. kunna utökas såhär: (En extra processinstruktion innan CSS-instruktionen, och användning av en annan CSS-mall i övrigt samma kod)
<?xml version="1.0" encoding="UTF-8"?>
[b]<?xml-stylesheet href="spangolist2.xslt" type="text/xml"?>[/b]
<?xml-stylesheet href="[b]spangolist2.css[/b]" type="text/css" media="screen,print"?>
<list name="Somewhere">
<place name="Place 1">
<item>Item 1</item>
<item>Item 2</item>
<item>Item 3 - en hyfsat lång och ordrik förklaring som gör att texten radbryter när den når högerkanten</item>
<item>Item 4</item>
<item>Item 5</item>
</place>
<place name="Place 2">
<item>Item 6</item>
<item>Item 7</item>
<item>Item 8 - också en hyfsat lång och ordrik förklaring som gör att texten radbryter när den når högerkanten</item>
<item>Item 9</item>
</place>
</list>
Och då skulle t.ex. en XSLT-transform liknande denna (som stuvar om <item> lite) kunna köras innan CSS:en appliceras:
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- regel för rotelemenet -->
<xsl:template match="/">
<xsl:apply-templates />
</xsl:template>
<!-- mall för item -->
<xsl:template match="item">
<item>
<!-- skapa ett nytt underelement för innehållet i item -->
<!-- så att vi kan "lägga till" fler "kolumner i gridden" -->
<xsl:element name="text">
<xsl:value-of select="."/>
</xsl:element>
<!-- en checkbox per rutkolumn läggs till (ingen begränsning i antal !) -->
<checkbox/>
<checkbox/>
<checkbox/>
<checkbox/>
</item>
</xsl:template>
<!-- identity template (kopierar allt som explicit saknar egen regel)-->
<xsl:template match="@*|node()">
<xsl:copy>
<xsl:apply-templates select="@*|node()"/>
</xsl:copy>
</xsl:template>
</xsl:stylesheet>
Som du ser, läggs <checkbox/> element efter behag till inuti regeln för <item> samtidigt som originalinnehållet i <item> flyttas "ner" i ett <text>-element - detta gör att gamla "item" nu kan fungera som en "css-table-row" så att vi kan utnyttja tabellens alla trevliga egenskaper för layouten utan att göra avkall på semantiken i elementen :)
... och i det resulterade läget, skull man kunna förenkla CSS:en ganska avsevärt (till att helt sakna en massa "float hacks" och specialare)
list { display: block; padding: 10px; font-family:"Courier New", Courier, monospace;}
list:before {
display: block;
content: attr(name);
font-size: 26px;
font-weight: bold;
}
place { display: table; border-collapse: collapse; empty-cells:show; width: 100%;}
place:before {
content: attr(name);
display: table-row;;
font-size: 20px;
font-weight: bold;
}
item { display: table-row;}
text,
checkbox {
display: table-cell;
border: 1px solid silver;
font-size: 14px;
}
checkbox { width: 20px;}
Och voila som greven säger.... (testa)
Tricket är alltså att lägga på både en XSLT-omformning av innehållet och en CSS-mall direkt på XML-dokumentet i syfte att slippa skapa ett mellanläge som begränsas av HTML:s begränsade semantik, och som i värsta fall tvingar fram ett eller annat CSS-hack ;)
... och nu har du ett läge där du även kan välja om XSLT-transformen skall köras bara för skrivare (media="print" används även för XSLT-mallen ;) ) eller "alltid" som i exemplet oavsett om du har media-specifk CSS eller ej ...
Lycka till :birp
