You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@cocoon.apache.org by BURGHARD Éric <er...@systheo.com> on 2004/07/03 15:43:07 UTC
[CONTRIB] css engine
Hi again,
I just finished a css engine which we use in our project which can help you
to virtualize all your css in a pipeline, and handle browser specificities
in a clean way (no more css syntax hacking). Perhaps it could be valuable
for others.
Here is the description:
- it's xml syntax
- it has a preprocesseur engine (variables -- string, number, xpath
expressions -- and include)
- it's browser aware (it's his main purpose)
- it's entirely based on xslt (fast enough anyway ;-)
Example:
<css>
<!-- defines or rules can be put in a separate file and included with
include src="some_macros_css.xml" anywhere -->
<define name="color-bg" value="#FF2345"/>
<define name="medium-r" value="2"/>
<define name="width-rp" value="{100 - (2 * $medium-r)}" agent="! ie6"/>
<!-- width on a floated box with relative padding is alway 100 for ie6 ??
-->
<define name="width-rp" value="100" agent="ie6"/>
<define name="box" left="4pt" right="4pt" top="1pt" bottom="1pt/>
<rule select="#body-container">
<marging value="{@box}"/>
<padding value="{$medium-r}%"/>
<width value="{$width-rp}%"/>
<float value="left"/>
</rule>
<rule select="#body-container li"/>
<margin value="0"/>
<!-- float only on ie5mac ? -->
<float value="left "agent="ie5mac"/>
</rule>
<rule select="#body-container li a>
<padding value="{@box}"/>
<background color="{$color-bg}"/>
</rule>
<rule select="#body-container p" agent="ie6">
<!-- thif f%*#ing browser drive me crazy -->
</rule>
</css>
I guess i had to use nagoya (mispelled ?) to submit the stylesheets+install
proc, but tell me first if it's cocoon or lenya/forrest relevant ?
Regards
Re: [CONTRIB] css engine
Posted by Antonio Gallardo <ag...@agssa.net>.
Stefano Mazzocchi dijo:
> BURGHARD Éric wrote:
>
>> Hi again,
>>
>> I just finished a css engine which we use in our project which can help
>> you
>> to virtualize all your css in a pipeline, and handle browser
>> specificities
>> in a clean way (no more css syntax hacking). Perhaps it could be
>> valuable
>> for others.
>>
>> Here is the description:
>> - it's xml syntax
>> - it has a preprocesseur engine (variables -- string, number, xpath
>> expressions -- and include)
>> - it's browser aware (it's his main purpose)
>> - it's entirely based on xslt (fast enough anyway ;-)
>>
>> Example:
>>
>> <css>
>> <!-- defines or rules can be put in a separate file and included with
>> include src="some_macros_css.xml" anywhere -->
>> <define name="color-bg" value="#FF2345"/>
>> <define name="medium-r" value="2"/>
>> <define name="width-rp" value="{100 - (2 * $medium-r)}" agent="!
>> ie6"/>
>> <!-- width on a floated box with relative padding is alway 100 for ie6
>> ??
>> -->
>> <define name="width-rp" value="100" agent="ie6"/>
>> <define name="box" left="4pt" right="4pt" top="1pt" bottom="1pt/>
>>
>> <rule select="#body-container">
>> <marging value="{@box}"/>
>> <padding value="{$medium-r}%"/>
>> <width value="{$width-rp}%"/>
>> <float value="left"/>
>> </rule>
>>
>> <rule select="#body-container li"/>
>> <margin value="0"/>
>> <!-- float only on ie5mac ? -->
>> <float value="left "agent="ie5mac"/>
>> </rule>
>>
>> <rule select="#body-container li a>
>> <padding value="{@box}"/>
>> <background color="{$color-bg}"/>
>> </rule>
>>
>> <rule select="#body-container p" agent="ie6">
>> <!-- thif f%*#ing browser drive me crazy -->
>> </rule>
>> </css>
>>
>> I guess i had to use nagoya (mispelled ?) to submit the
>> stylesheets+install
>> proc, but tell me first if it's cocoon or lenya/forrest relevant ?
>
> Nice!!!
>
> I personally don't mind the CSS syntax, but I do agree that with a
> different syntax you lose the ability to apply pipeline tools to it, so
> I think this is a great thing.
>
> I would suggest you put a patch in bugzilla.
+1
Just one thing, nagoya is being replaced by a new machine. Was recomended
to talk about issues.apache.org instead.
Best Regards,
Antonio Gallardo
Re: [CONTRIB] css engine
Posted by Stefano Mazzocchi <st...@apache.org>.
BURGHARD Éric wrote:
> Hi again,
>
> I just finished a css engine which we use in our project which can help you
> to virtualize all your css in a pipeline, and handle browser specificities
> in a clean way (no more css syntax hacking). Perhaps it could be valuable
> for others.
>
> Here is the description:
> - it's xml syntax
> - it has a preprocesseur engine (variables -- string, number, xpath
> expressions -- and include)
> - it's browser aware (it's his main purpose)
> - it's entirely based on xslt (fast enough anyway ;-)
>
> Example:
>
> <css>
> <!-- defines or rules can be put in a separate file and included with
> include src="some_macros_css.xml" anywhere -->
> <define name="color-bg" value="#FF2345"/>
> <define name="medium-r" value="2"/>
> <define name="width-rp" value="{100 - (2 * $medium-r)}" agent="! ie6"/>
> <!-- width on a floated box with relative padding is alway 100 for ie6 ??
> -->
> <define name="width-rp" value="100" agent="ie6"/>
> <define name="box" left="4pt" right="4pt" top="1pt" bottom="1pt/>
>
> <rule select="#body-container">
> <marging value="{@box}"/>
> <padding value="{$medium-r}%"/>
> <width value="{$width-rp}%"/>
> <float value="left"/>
> </rule>
>
> <rule select="#body-container li"/>
> <margin value="0"/>
> <!-- float only on ie5mac ? -->
> <float value="left "agent="ie5mac"/>
> </rule>
>
> <rule select="#body-container li a>
> <padding value="{@box}"/>
> <background color="{$color-bg}"/>
> </rule>
>
> <rule select="#body-container p" agent="ie6">
> <!-- thif f%*#ing browser drive me crazy -->
> </rule>
> </css>
>
> I guess i had to use nagoya (mispelled ?) to submit the stylesheets+install
> proc, but tell me first if it's cocoon or lenya/forrest relevant ?
Nice!!!
I personally don't mind the CSS syntax, but I do agree that with a
different syntax you lose the ability to apply pipeline tools to it, so
I think this is a great thing.
I would suggest you put a patch in bugzilla.
--
Stefano.
Re: [CONTRIB] css engine
Posted by Pier Fumagalli <pi...@betaversion.org>.
I was thinking more-or-less at something similar... Good to see that
someone is actually implementing it...
One nifty comment, is how to handle the "cascading" part of "style
sheets": wouldn't it be better to rewrite your example below into
something like this:
<css>
<define name="color-bg" value="#FF2345"/>
<define name="medium-r" value="2"/>
<define name="width-rp" value="{100 - (2 * $medium-r)}" agent="!
ie6"/>
<define name="width-rp" value="100" agent="ie6"/>
<define name="box" left="4pt" right="4pt" top="1pt" bottom="1pt/>
<rule select="#body-container">
<marging value="{@box}"/>
<padding value="{$medium-r}%"/>
<width value="{$width-rp}%"/>
<float value="left"/>
<rule select="li">
<margin value="0"/>
<float value="left "agent="ie5mac"/>
<rule select="a">
<padding value="{@box}"/>
<background color="{$color-bg}"/>
</rule>
</rule>
<rule select="#body-container p" agent="ie6">
<!-- thif f%*#ing browser drive me crazy -->
</rule>
</rule>
</css>
Nesting the children of the cascade into elements themselves?
Pier
On 3 Jul 2004, at 14:43, BURGHARD Éric wrote:
> Hi again,
>
> I just finished a css engine which we use in our project which can
> help you
> to virtualize all your css in a pipeline, and handle browser
> specificities
> in a clean way (no more css syntax hacking). Perhaps it could be
> valuable
> for others.
>
> Here is the description:
> - it's xml syntax
> - it has a preprocesseur engine (variables -- string, number, xpath
> expressions -- and include)
> - it's browser aware (it's his main purpose)
> - it's entirely based on xslt (fast enough anyway ;-)
>
> Example:
>
> <css>
> <!-- defines or rules can be put in a separate file and included with
> include src="some_macros_css.xml" anywhere -->
> <define name="color-bg" value="#FF2345"/>
> <define name="medium-r" value="2"/>
> <define name="width-rp" value="{100 - (2 * $medium-r)}" agent="!
> ie6"/>
> <!-- width on a floated box with relative padding is alway 100 for
> ie6 ??
> -->
> <define name="width-rp" value="100" agent="ie6"/>
> <define name="box" left="4pt" right="4pt" top="1pt" bottom="1pt/>
>
> <rule select="#body-container">
> <marging value="{@box}"/>
> <padding value="{$medium-r}%"/>
> <width value="{$width-rp}%"/>
> <float value="left"/>
> </rule>
>
> <rule select="#body-container li"/>
> <margin value="0"/>
> <!-- float only on ie5mac ? -->
> <float value="left "agent="ie5mac"/>
> </rule>
>
> <rule select="#body-container li a>
> <padding value="{@box}"/>
> <background color="{$color-bg}"/>
> </rule>
>
> <rule select="#body-container p" agent="ie6">
> <!-- thif f%*#ing browser drive me crazy -->
> </rule>
> </css>
>
> I guess i had to use nagoya (mispelled ?) to submit the
> stylesheets+install
> proc, but tell me first if it's cocoon or lenya/forrest relevant ?
>
> Regards
>
>