CSS3 for Behaviors and Hypertext
WWW 2004, New York
19 May 2004
Style and behavior
What makes it a button?
- Looks like one (3D look...)
- ... but slightly non-standard color/font
- Behaves like one (changes when you press it)
- Has an effect (send to server...)
CSS does 1, does not do 3.
How much of 2 does it do?
Why behavior should not be in style
- Is gray, has shadow → is button
- people don't have time to read, they only scan
- Shadow inverts on non-button → confusion
- it shouldn't be possible to confuse readers
- CSS isn't a suitable language for anything more complex than
“behave like a button”
- so, by extension, it shouldn't do the button either
Why behavior should be in style
- A button in the style of the text is less distracting
- buttons outside the Web aren't all gray, either
- The renderer doesn't always know the element
- & function can change, based on context or metadata
- Common behaviors should be as easy as CSS
We started carefully...
New Candidate Recommendation:
Basic User Interface Module”
- Selectors (pseudo-elements) for parts of forms
- match XForms, but also applicable elsewhere
- look/behave as a button, honor color, font… if possible
- Icons (replace element, for drag & drop, etc.)
- Mouse and keyboard
- cursor images, 2D navigation, tabbing to elements
So how about that button?
- 'appearance: button' looks like platform-native button:
- color, font and cursor can be changed:
- background, border, padding, outline & text-decoration
should have influence
- but may not be possible on all platforms
- margin, display, float, height, width, line-height apply normally
In CSS1 & CSS 2.1, rendering was undefined.
The advanced UI module
... doesn't really exist yet
- All the ideas we're not sure about
- Grid-based layouts, fixed and flexible sizes...
- Rebinding keys
- Complex behaviors, external objects
Hyperlinks and behavior
Hyperlinks exist by virtue of their behavior.
A link becomes a hyperlink when it
- can be activated in a single action (click...)
- has immediate feedback
- has fast result (seconds)
- has no side-effect (you can go back and “nothing”
Semantic part (what it links to)
and style/behavior part:
- how to make it look like a link
- what feedback when you activate it
- how the target is shown w.r.t. the source
Semantic is fixed, style depends on context
Hyperlinks and CSS
So it makes sense to put the style/behavior in CSS:
- The look of the source anchor already in CSS1
- The feedback partly in CSS1, partly in CSS2
- but feedback outside of canvas (spinning logo) not part of CSS
- Very early draft of behavior
Assuming we have a hyperlink (something that matches ':link' or
':visited'), what can we do with it?
- Make target replace current document
- Make target pop-up in transitory window
- Insert target into current document
- Make new window/new tab