Orbeon Forms community mailing list

CSS Style questions

Classic

List

Threaded

2 messages Options

Jimmy Royer

CSS Style questions

Hi everyone,

I'd like to know what is the best example making extensive use of form
styling with css (no tables).
And what is the best practice to manage multiple css files depending on
the user browser.

I struggled a bit with CSS styling and decided for the moment to only
develop for Internet Explorer.
Shame on me.. but so far my impressions are it will be easier to
maintain different CSSs for each
browsers (IE, Mozilla+Opera).

I didn't see many questions concerning styling with Orbeon. As example,
if I put a general width for
all my input:

.xforms-input-input {
height: 19px;
width: 250px;
}

And I want to define a different width for a specific input, I must use
the generated element name
like that:

#xforms-element-135 input { width:180px; } /* contact 1 name */

Its very hard on the maintenance as the elements always change name as
soon as I add something
in between the model and the specific target input. Tell me if there is
something simpler! :)

To resume:

1- What is the best styling example to follow?
2- What is the best practice with Orbeon to determine user browser and
give him a specific CSS? Javascript?
3- Is there any way to style directly the input tag? (I'm sorry if we
can with the CVS version I didn't test with it yet).

Regards,
Jimmy

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Erik Bruchez

Re: CSS Style questions

Administrator

Jimmy,

You are of course asking an excellent question. A few data points:

o The XForms spec has a non-normative part that recommends using
pseudo-classes such as :enabled, which browsers don't support at the
moment. [1]

o Some of those pseudo-classes and more are now part of CSS 3
(currently in working draft). I believe the intent is that all the
pseudo-classes suggested by XForms end up in CSS 3. [2]

o The XForms working group has informally and so far internally only
agreed to recommend the use of classes starting with -pc- (for
Pseudo Class) and -pe- (for Pseudo Element) to replace
pseudo-classes, so that current implementations can standardize on a
single practice. For example, you would use -pc-enabled instead of
:enabled. Currently, OPS uses xforms-enabled for the same purpose.

o Of course like any mortal you will struggle with CSS because IE's
implementation of CSS is the worst on the planet. Even IE 7 won't
implemenent CSS 2 entirely, although many bugs have been fixed :-(

Now back to your actual questions.

> 1- What is the best styling example to follow?

We have tried in the "DMV Forms" example to use what we thought
were the best practices at the moment, however this is fairly
small, incomplete, and we definitely want user feedback. Check out
style.css on this page (I can't seem to be able to put a direct
link):

http://www.orbeon.com/ops/goto-source/forms/detail/detail-model.xpl

The biggest issue comes from the fact that with OPS, the browser
doesn't see XForms elements but HTML elements. So an xforms:input
will look like this in the browser:

<label class="fixed-width xforms-label"
for="xforms-element-59">Age:</label>


<input type="text" name="xforms-element-59" value="35"
class="xforms-input-input xforms-type-string">


<label class="xforms-alert xforms-alert-inactive"
for="xforms-element-59"></label>
<label class="xforms-hint" for="xforms-element-59">Positive
number</label>

This result is not 100% consistent between controls, when in fact
we believe it should be. See:

http://forge.objectweb.org/tracker/index.php?func=detail&aid=304679&group_id=168&atid=350207

and suggestions for more changes:

http://forge.objectweb.org/tracker/index.php?func=detail&aid=305318&group_id=168&atid=350207

So currently, you must be aware of that structure when doing
styling with CSS, and write things like:

.xforms-input input { background: red }

as:

.xforms-input { background: red }

won't produce the exact result you are expecting. I hope this puts
you on the right track.

> 2- What is the best practice with Orbeon to determine user browser and
> give him a specific CSS? Javascript?

You can:

o Pass the User-Agent header to theme.xsl, by configuring the
Request processor in epilogue-servlet.xpl to also produce that
header. The result is already passed to theme.xsl.

o Then make the decision in theme.xsl based on the content of the
variable $request.

> 3- Is there any way to style directly the input tag? (I'm sorry if we
> can with the CVS version I didn't test with it yet).

I believe the above answers this question ;-)

-Erik

[1] http://www.w3.org/TR/xforms/index-all.html#style
[2] http://www.w3.org/TR/css3-selectors/#UIstates

Jimmy Royer wrote:
> Hi everyone,
>
> I'd like to know what is the best example making extensive use of form
> styling with css (no tables).
> And what is the best practice to manage multiple css files depending on
> the user browser.
>
> I struggled a bit with CSS styling and decided for the moment to only
> develop for Internet Explorer.
> Shame on me.. but so far my impressions are it will be easier to
> maintain different CSSs for each
> browsers (IE, Mozilla+Opera).
>
> I didn't see many questions concerning styling with Orbeon. As example,
> if I put a general width for
> all my input:
>
> .xforms-input-input {
> height: 19px;
> width: 250px;
> }
>
> And I want to define a different width for a specific input, I must use
> the generated element name
> like that:
>
> #xforms-element-135 input { width:180px; } /* contact 1 name */
>
> Its very hard on the maintenance as the elements always change name as
> soon as I add something
> in between the model and the specific target input. Tell me if there is
> something simpler! :)
>
> To resume:
>
> 1- What is the best styling example to follow?
> 2- What is the best practice with Orbeon to determine user browser and
> give him a specific CSS? Javascript?
> 3- Is there any way to style directly the input tag? (I'm sorry if we
> can with the CVS version I didn't test with it yet).
>
> Regards,
> Jimmy

--
Orbeon - XForms Everywhere:
http://www.orbeon.com/blog/

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws