cocoon-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From BURGHARD √Čric <>
Subject XMLCSS
Date Wed, 24 Nov 2004 14:46:46 GMT

I've submited a patch several month ago, to handle css in a browser
independant way (different css may be generated from a common xmlcss
depending on user-agent string submitted by the browser (ie no more css

I've just enhance the process to include named rules and macros with
parameters, and i think that it could allow us to share a library of css
macros for styling sites (menus for example), in a simple and soc manner.
So let me explain (sorry it's quite long but i want to be the clearest

First just a remainder:

an xmlcss file is writen like that:
 <rule select=".myclass">
   <padding value="0"/>
   <margin top="10px/>

and is converted by an xsl transformation in
.myclass {
 padding: 0;
 margin-top: 10px;

Now you can use variable
 <define name="blue" value="#0000CC"/>

 <rule select=".myclass">
   <padding value="0"/>
   <margin top="10px"/>
   <color value="{$blue}"/>

Now IE5 is boring you with one of its (numerous) irritating bug. you know
how to fix it in an "IE way", but don't want to poluate other css browser
that works well without:

 <rule select=".myclass">
   <padding value="0"/>
   <margin top="10px"/>
   <color value="{$blue}"/>
   <float value="none" agent="ie5"/>

 float: none;

will appear only on browser that claims to be IE.

Now you can use named rule to reuse a set of rules

<rule name="item-spacing">
   <padding value="0"/>
   <margin top="10px"/>
   <float value="none" agent="ie5"/>

<rule name="blue">
  <background color="white"/>
  <color value="{$blue}"/>

<rule select=".my1class" apply="item-spacing">
<rule select=".my2class" apply="item-spacing blue">

Ok. Now you want to style different <ul> for implementing horizontal,
vertical, 3D, and so on menus. To achieve that, you could inject the
appropriate classes in your xhtml code, but doing that way is against the
SOC concepts (xhtml is tied with the way ul should appear). You could not
change that later without changing the generatig code or css rules
semantics (for example you had to change the .threed class definition if
you don't want 3D aspect anymore so the choosen name become a nonsens)

The better way (i think) is name your xhtml elements (id and class) by what
they are and not by what they should like, and use macros to generate
appropriate rules.

for example lets say you had a ul which is your "mainmenu" in your page. in
xmlcss, once you had defined the macro "menu" this could be simple as
putting in your xmlcss file

 <menu div=".mainmenu" orient="horizontal" anchor="right"/>
 <menu div=".secondarymenu" orient="vertical" anchor="left"/>

so how its working. quite simple in fact. Say that your xhtml looks like

<div class="mainmenu">
  <li><a>first item</a>
  <li><a>first item</a>

to style this as a menu you had to define rules on div, ul, li and a. so you
had to declare a macro that way

   <define name="menu">
        <param name="div"/>
        <!-- horizontal by default -->
        <param name="orient" select="'horizontal'"/>
        <!-- left aligned by default -->
        <param name="anchor" select="'left'"/>
        <rule select="{$div}" apply="{$orient}-{$anchor}-div"/>
        <rule select="{$div} ul" apply="{$orient}-{$anchor}-ul"/>
        <rule select="{$div} li" apply="{$orient}-{$anchor}-li"/>
        <rule select="{$div} a" apply="{$orient}-{$anchor}-a"/>

and define the named rules which contains the rules
<rule name="horizontal-left-div">...</rule>
<rule name="horizontal-left-ul">...</rule>
<rule name="horizontal-left-li">...</rule>
<rule name="horizontal-left-a">...</rule>

and so on..

you could now put all that stuff in a separate file and include it with
  <include src="cssmacros_menu.xml"/>

any thought ?


To unsubscribe, e-mail:
For additional commands, e-mail:

View raw message