| [Thread Prev]
| [Thread Next]
| [Date Next]
| [Thread Index]
| [List Home]
Subject: Re: [wsrp-comment] CSS classes
- From: Rich Thompson <firstname.lastname@example.org>
- To: email@example.com
- Date: Mon, 11 Apr 2005 14:39:09 -0400
Here is my take on your questions:
1. Switching a link's font class on
mouseover/out: I would suggest the mouseover is the special state and therefore
use the dim class for it. I would note however that most browsers already
provide some indication to the user that they are over a link and would
therefore urge caution in making such a switch.
2. Fonts: It is expected that a number
of the CSS classes will impact fonts. The portlet-font and portlet-font-dim
are restricted to only impacting font attributes, while the other classes
(msg, section, etc) can choose whether to specify font and other attributes.
Reasonable examples include the msg classes specifying the font color and
weight, but inheriting the font face and size. Overall, the definitions
should use the CSS definitions for composing the styling rather than requiring
a particular nesting.
3. I think realistic examples include:
portlet-msg-status: Most examples I can think of here
are rather simplistic and therefore likely to be done in some other manner.
portlet-msg-info: Reasonable choice for highlighting
to the user that they are about to cross some threshold (e.g. frequent
flier miles are near qualifying for a roundtrip ticket)
portlet-msg-error: Notice that a form validation error
happened and that a resubmit is needed after correction.
portlet-msg-alert: An example might be when submitted
data has violated some policy and the user is being prompted to verify
they want to proceed (e.g. travel itinerary violates company policy, but
such violations are allowed under limited conditions)
portlet-msg-success: Notice that a transaction request
(e.g. placing a order) has succeeded.
4. Sections are actually the more general purpose classes. When we began
to examine their usage within a table structure, the table set was also
introduced. Which are used will primarily be a question of how layout of
the Portlet's markup is achieved.
5. portlet-table-text: This is designed
to be an alternate textual style for information that does not want to
be confused with the content of the table. People often put such things
in a different font-face and style, but use of this class allows that to
be standardized across the page.
This is for use labeling standard icons.
This is for use labeling icons appearing in dialogs. We found systems
often specialize this labeling of an icon.
This is for labeling form fields, both input fields and checkboxes
... the text is unfortunate.
This is for noon-input type form fields.
7.A. I would encourage Consumers
to set their base styles for things such as menus so that all the CSS attributes
are set at the top level (menu, table or section) rather than have each
portlet's rendition of these types of things differ simply because they
chose different containment hierarchies.
7.D. The selected, hover and hover-selected
classes provide a rich set of choices as to the user experience. Basically
the hover and hover-selected classes relate to the mouse being over a menu
item. While not all systems would want to style these differently, the
choice is being put into the hands of the person designing the active CSS
classes. The selected and hover-selected classes apply to the selected
menu item, differing only in whether or not the mouse is over the menu
7.E. Your question about when a cascaded
menu item shows up mixes changing visibility of a control with the styling
issues of the control's appearance when it is visible. While hovering over
a menu item with a cascaded submenu is often when it should be shown, it
is not until the mouse leaves both the menu item and the cascaded menu
that one wants to rehide the cascaded menu. This tends to be a bit more
complicated than what is easily solved in CSS ...
This is used for a selected item in the submenu (it is likely the menu
item also shows as selected).
7.I. No one made a case for a portlet
menu caption being selected as this tends to be basic help info for the
I hope this has been helpful and would
encourage other TC members to comment on any points where this is too explicitly
OASIS WSRP TC Chair
IBM T.J. Watson Research Center / Yorktown Heights, NY
04/08/05 01:16 PM
Please respond to
|[wsrp-comment] Public Comment|
Comment from: firstname.lastname@example.org
I'm in the middle of writing a book on Portlets and Portals for Addison
Wesley and would like to cover the CSS class styles and am having some
issues with some of the classes and I would like to see if you could please
provide me with some feedback.
Perhaps it would be better if I gave you my understanding of where these
classes would be used and let you know which ones don't make sense to me.
Let's go through them one at a time:
1. Links (Anchors) - since no class is provided for this, I'm assuming
that portlet-font or portlet-font-dim could be used here. If the developer
or designer wishes to provide mouse over, both font classes could be used.
One for mouse-out and one for mouse-over. However, the question on most
developers minds will be "which one should I used for what".
2. Font - The description for these two classes states that "The font
style definitions affect the font attributes only". However, it is
difficult to define the other classes using some kind of inheritance on
this class. In other words, say we define a class named portlet-font, how
would we define portlet-msg-status to use the font specified in portlet-font?
The only way that I can think of, would be to have nested div tags. The
outer tag uses a class of portlet-font and the inner uses whatever else
it needs (like portlet-msg-status). Would this work?
Is this how it was meant to be used?
Can you provide me with two realistic examples where it would make sense
to use portlet-font and portlet-font-dim?
3. Messages - I can't think of a real-world example when I would just throw
a message (such as the ones used in the spec example) on the current page
being viewed by the user. The only thing I can come up with is perhaps
providing some kind of message under each input control as the user enters
the focus of the control (perhaps explaining what is expected in the input
control, e.g. telephone number and format). Another example is when you
popup a new window to let the user know what is happening, e.g. "Please
wait while those flights are checked...".
Can you provide some realistic examples for:
4. Sections - This one threw me bit because it seems to be so close to
Tables. The only thing I could imagine that you guys meant for their use
is the classic example of a news story. A news story has a Headline, a
possible subheader, body, and possibly a footer (containing the author's
information and background). However, I can't see what purpose the alternate
class would serve and I can't see the use for portlet-section-text (this
one sounds like it should be the same as portlet-section-body). As for
the portlet-section-selected, I could see this being used on a page that
offers input selection for copy and paste operations (like a CMS input
page). Am I right about my assumptions?
What other purposes would these classes serve?
5. Tables - the only one that wouldn't make sense to me is portlet-table-text.
All of the rest make sense. Can you provide me with an explanation for
Where would you use it?
6. Forms - This one I want to make sure that I get right. So here's the
classes and my thoughts or questions on them:
A. portlet-form-label - this is used for the Text that appears above or
to the side of the form, which is used to introduce the form or perhaps
name the form, e.g. "Customer Information".
B. portlet-form-input-field - this one is pretty obvious. The is the style
for the input field.
C. portlet-form-button - again, pretty obvious. This could be used for
the "Submit" or "Clear" buttons.
D. portlet-icon-label - "Text that appears beside a context dependent
action icon." This makes no sense to me. Can you explain it in more
E. portlet-dlg-icon-label - "Text that appears beside a 'standard'
icon". There is no such thing as a "standard" icon. Please
F. portlet-form-field-label - I understand that this one is used for the
text that appears next to a field. So, if you have an input box to collect
someone's last name, the text "Last Name:" would use this class.
Is this correct? What is mean by "Text for a separator of fields"?
What is a separator of fields?
G. portlet-form-field - Not sure about this one. Is this used for the text
that appears next to a radio button or check box? What about the text inside
of listboxes or combo boxes? What class style do they use?
7. Menus - again, let's go through each one:
A. portlet-menu - General menu settings. Again, how would you inherit these
general settings for use in the other class styles? Would you use nested
div or spans (as described above)?
B. portlet-menu-item - this is the text that all non-selected items in
the menu appear as by default (except for the caption, which uses menu
C. portlet-menu-item-selected - currently highlighted menu item (unless
the mouse is over the highlight item, in which case the hover--selected
D. portlet-menu-item-hover - this is used in the case of the mouse being
inside of the item, but it is not selected? I'm not sure what the difference
is when it is selected or hover or hover-selected, since most menus use
E. portlet-menu-item-hover-selected - mouse is inside the area of the item
and it is selected. However, wouldn't the menu disappear once you select
something? Is this meant to be used when you select an item pressing the
mouse button down but haven't released the button back up yet?
F. portlet-menu-cascade-item - this is used for the item that has a cascading
submenu. Do you simply have to hover over the item to show this class or
do non-selected or hovered items with submenus automatically appear with
G. portlet-menu-cascade-item-selected - this is used to represent the selected
item that has a submenu once you have physically selected and shown that
H. portlet-menu-description - this could be used on the text in a
pop-up bubble that would appear next to the item or on the window below
the menu item.
I. portlet-menu-caption - this is used for the caption of the menu. What
about the selected caption? There doesn't appear to be a style class
Thanks for all of your help...
| [Thread Prev]
| [Thread Next]
| [Date Next]
| [Thread Index]
| [List Home]