Tantek-Mozilla-Projects: Difference between revisions
(sections, some criteria, specs) |
(→Styling HTML5 forms elements: added a bunch of specifics) |
||
Line 13: | Line 13: | ||
1. It must include pleasant and working UI, where appropriate. | 1. It must include pleasant and working UI, where appropriate. | ||
This is a big design challenge. Take a look at what Opera has done for example (in terms of dangers to avoid). | |||
2. You must be able to use CSS to style the element, especially the UI that we generate. This includes any pre-defined pseudo-selectors (invalid, required, icon, etc.) | 2. You must be able to use CSS to style the element, especially the UI that we generate. This includes any pre-defined pseudo-selectors (invalid, required, icon, etc.) | ||
Agreed, this is an absolute requirement. | |||
Whenever there is ''any'' custom appearance of a form control, e.g. based on the new types, designers ''must'' be able to restyle them to fit in with their design. This means at a minimum: | |||
* ability to select specific "pieces" of any compound/composite form control for styling | |||
** feeds into requirements for CSS pseudo-elements | |||
** existing pseudo-elements: | |||
** | |||
* ability to select specific "states" of any form control (may require ability to select states of specific pieces as well - that will be a challenge though as pseudo-elements themselves cannot have pseudo-classes in CSS) | |||
** existing [http://www.w3.org/TR/css3-selectors/#UIstates Selectors UI pseudo-classes], and some notes on [http://www.w3.org/TR/html5/interactive-elements.html#pseudo-classes how HTML5 DOM property states trigger these pseudo-classes] | |||
*** :enabled and :disabled - based on the state of the "disabled" property on the element. | |||
*** :checked - based on the "checked" property on input types "radio" and "checkbox", and also on the "selected" property on option element. | |||
*** :indeterminate - based on the "indeterminate" property of the input types "radio" and "checkbox". | |||
*** ... | |||
* typography | |||
** font properties | |||
** text properties | |||
** color | |||
* box properties | |||
** width | |||
** height | |||
** padding | |||
** border | |||
** margin | |||
** background | |||
** box-shadow | |||
3. If there's a constraint API the API must be complete. | 3. If there's a constraint API the API must be complete. |
Revision as of 19:51, 26 May 2010
Hi, I'm Tantek Çelik, and you've found my list of projects that I'm working on with Mozilla.
I'm currently (as of 2010-146) a Mozilla contractor working with Chris Blizzard, Arun Ranganathan, and the web standards team, focused on specification work, especially around web applications user interfaces and social/identity open web technologies.
In particular:
Web Apps UI
UI Styling
Styling HTML5 forms elements
Main Page: User:Mounir.lamouri/HTML5_Forms
Each HTML5 form element must be complete to the following criteria:
1. It must include pleasant and working UI, where appropriate.
This is a big design challenge. Take a look at what Opera has done for example (in terms of dangers to avoid).
2. You must be able to use CSS to style the element, especially the UI that we generate. This includes any pre-defined pseudo-selectors (invalid, required, icon, etc.)
Agreed, this is an absolute requirement.
Whenever there is any custom appearance of a form control, e.g. based on the new types, designers must be able to restyle them to fit in with their design. This means at a minimum:
- ability to select specific "pieces" of any compound/composite form control for styling
- feeds into requirements for CSS pseudo-elements
- existing pseudo-elements:
- ability to select specific "states" of any form control (may require ability to select states of specific pieces as well - that will be a challenge though as pseudo-elements themselves cannot have pseudo-classes in CSS)
- existing Selectors UI pseudo-classes, and some notes on how HTML5 DOM property states trigger these pseudo-classes
- :enabled and :disabled - based on the state of the "disabled" property on the element.
- :checked - based on the "checked" property on input types "radio" and "checkbox", and also on the "selected" property on option element.
- :indeterminate - based on the "indeterminate" property of the input types "radio" and "checkbox".
- ...
- existing Selectors UI pseudo-classes, and some notes on how HTML5 DOM property states trigger these pseudo-classes
- typography
- font properties
- text properties
- color
- box properties
- width
- height
- padding
- border
- margin
- background
- box-shadow
3. If there's a constraint API the API must be complete.
4. It should be fully accessible.
CSS3 UI
CSS3 Color
http://www.w3.org/TR/css3-color/
UI Layout
- CSS3 Flex Box
- need to get in touch with Tab Atkins and catch-up on the current state of his work vs. existing prefixed partial implementation in Firefox and Safari.
Social and Identity
- Accounts Manager
- ...