css3-ui

See also:

FAQ:

text-overflow for non-latin scripts

Q: Many non latin scripts use something else than 3 dots for the same effect as an ellipsis. How does this work?

A: The current editor's draft allows implementations to use something other than 3 dots:

“Implementations may substitute a more language/script-appropriate ellipsis character.”

from http://dev.w3.org/csswg/css3-ui/#text-overflow

text-overflow atomic inlines that would overlap the ellipsis

Q: What should an implementation do when an atomic inline element would overlap the ellipsis marker?

A: Remove it (the atomic inline element(s)) to make room for the ellipsis marker per the CSS3-UI spec (and Opera and IE9 appear to do this already).

css3-ui issues list

The CSS Basic User Interface Module Level 3 (CSS3-UI, latest public TR version) defines user interface related selectors, properties and values.

Current Issues

The following are known problems in/with the 11 May 2004 CSS3-UI Candidate Recommendation.

For latest edits/resolutions, see the editors draft:

Issue 1

Summary
css3-ui should have a test suite
Raised by
Tantek Çelik
URL
eventually http://www.w3.org/Style/CSS/Test/#css3-ui
Proposed Resolution
create at least one test case per feature, update “Current Issues” section above to add the text
See the [[http://www.w3.org/Style/CSS/Test/#css3-ui|released]] and 
  [[http://dev.w3.org/CSS/css3-ui-test-suite/src/|development]] versions 
  of the test suite for the "Tests" references.

Status
Resolved. LCWD has link to CSS Tests page. Update this to link to specific test suite page for CSS3-UI for the next CR. Pending contributions to test suite.

Issue 2

Summary
Change name/title of spec to be consistent with other CSS3 modules
Raised by
Tantek Çelik
URL
n/a
Proposed Resolution
Change name/title of CSS3-ui from “CSS3 Basic User Interface Module” to “CSS Basic User Interface Module Level 3”
Status
resolved in editor's draft. pending publication of public draft.

Issue 3

Summary
::value needs to specify which properties are allowed on that pseudo-element
Raised by
Tab Atkins
URL
http://lists.w3.org/Archives/Public/www-style/2010Mar/0158.html
URL
http://www.w3.org/TR/css3-selectors/#first-line
Proposed Resolution
specify the same properties (by listing them explicitly) that apply to ::first-line as applying to ::value: 'font-*', 'color', 'background-*', ‘word-spacing’, ‘letter-spacing’, ‘text-decoration’, ‘vertical-align’, ‘text-transform’, ‘line-height’.
Status
resolved in editor's draft. pending publication of public draft.

Issue 4

Summary
computed value of 'pointer-events' vs initial value vs SVG vs CSS3-UI conflict. A quick test shows that IE9 and Opera return 'visiblePainted', while WebKit and Firefox return 'auto'.
Raised by: Erik Dahlstrom
URL
http://lists.w3.org/Archives/Public/www-style/2010Sep/0818.html
URL
https://wiki.mozilla.org/Tantek-Mozilla-projects#pointer-events
Proposed Resolution
informative UA style sheet addition to explicitly set an SVG-specific value.
Status
editors draft updated with style sheet additions, awaiting input from Jonathan Watt, implementer of pointer-events in Firefox.

Issue 5

Summary
In SVG 1.1 the 'pointer-events' property only applies to 'graphics elements', but in css3-ui it applies to all elements. Why? (Details raised by Kevin Ar18: “svg tag should not trigger pointer events like the SVG spec states and as noted here: http://www.w3.org/2010/09/27-fx-minutes.html#item03 Originally, the plan was to include this explanation in an SVG spec, but it was concluded that it should be in the CSS specs instead.” )
Raised by: Erik Dahlstrom, Kevin Ar18
URL
http://lists.w3.org/Archives/Public/www-style/2010Sep/0818.html
URL
http://lists.w3.org/Archives/Public/www-style/2010Nov/0268.html
URL
http://lists.w3.org/Archives/Public/www-style/2010Nov/0304.html
URL
http://www.w3.org/2010/09/27-fx-minutes.html#item03
Proposed Resolution
1: Add whatever default style sheet rules are necessary to implement SVG's “applies only” special cases and then 2: add a new FAQ: Any element can be given dimensions with CSS and thus can potentially receive events. In general property dependence on specific elements or classes of elements (e.g. “graphics elements”) is bad design (for specification of properties). Much better to simply say “applies to all” (especially for inherited properties) and then use default style sheet rules and/or a computed abstraction like “has dimension” or “has a geometry”.
Status
resolved in editor's draft, awaiting public draft. proposed - add a default style sheet rule for the 'svg' pointer-events:none for SVG spec compat, and then move the “pointer-events: visiblePainted” declaration to a new rule for 'svg>*' elements. add more rules as necessary to mimic SVG's notion of “applies to 'graphics elements'”.

Issue 6

Summary
Normatively reference SVG 1.1 for 'fill' and 'stroke' property definitions.
Raised by: Erik Dahlstrom
URL
http://lists.w3.org/Archives/Public/www-style/2010Sep/0818.html
Proposed Resolution
inline links to SVG 1.1 property definitions
Status
Open. Proposed resolution incomplete - awaiting URLs

Issue 7

Summary
The note about how 'fill' and 'stroke' don't affect the result for 'all' is missing (compare with the SVG 1.1 pointer-events definition. http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty
Raised by: Erik Dahlstrom
URL
http://lists.w3.org/Archives/Public/www-style/2010Sep/0818.html
Proposed Resolution
state how 'all' is applied in svg separately from how it's applied otherwise. The same also applies to all the other pointer-event values, where svg is mentioned in parenthesis.
Status
Open. Proposed resolution incomplete.

Issue 8

Summary
pointer-events definition lacks many of the details from the SVG 1.1 specification http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty, e.g how 'clip-path' and 'mask' affects pointer-events, how text elements are handled etc.
Raised by: Erik Dahlstrom
URL
http://lists.w3.org/Archives/Public/www-style/2010Sep/0818.html
Proposed resolution
incorporate such details as necessary, as part of the goal here is not to not normatively depend on SVG 1.1 for the property definition itself. This is similar to how CSS3 color incorporates and defines the full set of color keywords instead of normatively depending on SVG.
Status
Open. Proposed resolution incomplete.

Issue 9

Summary
How opacity (and other forms of alpha, e.g rgba, fill-opacity, stroke-opacity etc) affects 'pointer-events' is undefined.
Raised by: Erik Dahlstrom
URL
http://lists.w3.org/Archives/Public/www-style/2010Sep/0818.html
Proposed resolution
incorporate such details as necessary
Status
Open. Proposed resolution incomplete.

Issue 10

Summary
How 'clip-path', 'mask' and 'filter' affect 'pointer-events' is undefined.
Raised by: Erik Dahlstrom
URL
http://lists.w3.org/Archives/Public/www-style/2010Sep/0818.html
Proposed resolution
incorporate such details as necessary.
Status
Open. Proposed resolution incomplete.

Issue 11

Summary
multiple issues from Kevin Ar18 2010-11-17
Raised by
Kevin Ar18
URL
http://lists.w3.org/Archives/Public/www-style/2010Nov/0257.html
Proposed Resolution
itemize and split into multiple sub-issues here. some may be merely details on Issue 5.
Status
Open. Collected.

Issue 12

Summary
what are effects of 'pointer-events' with regards to keyboard navigation?
Raised by
Doug Schepers
URL
http://lists.w3.org/Archives/Public/public-fx/2010OctDec/0106.html
URL
http://dev.w3.org/csswg/css3-ui/#pointer-events
Proposed resolution
informative note in the definition of the 'pointer-events' property would help steer authors to think about how they are using this (such as a suggestion that if pointer-events are turned off, authors should also consider making the element not focusable, as well).
Status
Resolved, informative note added to editor's draft. awaiting public draft.

Issue 13

Summary
should CSS3 UI (or some future version) incorporate a 'focusable' property (like in SVG)
Raised by
Tantek Çelik
URL
http://www.w3.org/TR/SVGTiny12/interact.html#focusable-attr
Proposed resolution
postpone til CSS4-UI.
Status
Resolved. Added to http://wiki.csswg.org/spec/css4-ui#focusable-property

Issue 14

Summary
example for 'appearance' values 'pop-up-menu' and 'radio-group' and 'list-menu' should use same content to illustrate different visualizations for same semantics.
Raised by
Charles Belov
URL
http://lists.w3.org/Archives/Public/www-style/2010Nov/0189.html
URL
http://lists.w3.org/Archives/Public/www-style/2011Jan/0224.html
Proposed resolution
rewrite example accordingly.
Status
OPEN. Collected.

Issue 15

Summary
add second 'list-menu' example that shows multiselect behavior and use same content as 'checkbox-group'
Raised by
Charles Belov
URL
http://lists.w3.org/Archives/Public/www-style/2010Nov/0189.html
URL
http://lists.w3.org/Archives/Public/www-style/2011Jan/0224.html
Proposed resolution
write new example accordingly.
Status
OPEN. Collected.

Issue 16

Summary
What happens if a semantic single-select element is styled as appearance 'checkbox-group'?
Raised by
Charles Belov
URL
http://lists.w3.org/Archives/Public/www-style/2010Nov/0189.html
URL
http://lists.w3.org/Archives/Public/www-style/2011Jan/0224.html
Proposed resolution
add note discouraging authors from doing this.
Status
OPEN. Collected.

Issue 17

Summary
What happens if a semantic multi-select element is styled as appearance 'radio-group' or 'pop-up-menu'?
Raised by
Charles Belov
URL
http://lists.w3.org/Archives/Public/www-style/2010Nov/0189.html
URL
http://lists.w3.org/Archives/Public/www-style/2011Jan/0224.html
Proposed resolution
add note discouraging authors from doing this.
Status
OPEN. Collected.

Issue 18

Summary
How does text-overflow:ellipsis work with overflow-style: marquee-line?
Dependency: Since CSS3 Marquee is already in CR and text-overflow is the “new” feature, it is up to text-overflow to define the interaction.
Raised by
Andrew Fedoniouk
URL
http://lists.w3.org/Archives/Public/www-style/2008Dec/0109.html
URL
http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#overflow-style
Proposed Resolution
Render same as user controlled scrolling. Add mention of overflow-style to parenthetical examples listed after “When an element is scrolled”.
Status
Resolved. Editor's draft updated, awaiting public draft.

Issue 19

Summary
CSS3-UI should define 'overflow-x' and 'overflow-y' properties
Raised by
David Hyatt / Tantek Çelik
URL
http://lists.w3.org/Archives/Public/www-style/2010Nov/0049.html
URL
https://developer.mozilla.org/En/CSS/Overflow-x
URL
https://developer.mozilla.org/En/CSS/Overflow-y
URL
http://www.w3.org/Style/Group/css3-src/css3-box/#overflow
URL
http://www.w3.org/Style/Group/css2-src/visufx.html#overflow
URL
http://www.w3.org/TR/css3-marquee/#the-overflow-style
Proposed Resolution
Postpone this to CSS4-UI or preferably CSS3-Box - whichever gets drafted/updated first: Define 'overflow-x' and 'overflow-y' properties already interoperably implemented by various browsers. Pull in entirety of section 16 from CSS3 Box draft. Sync (incorporate) any updates/changes in CSS 2.1 overflow definition. Check that css3-marquee overflow-style implicitly deals with overflow-x and overflow-y correctly. Clarify: box-shadow should never trigger overflow/scrollbars. Clarify: do margins trigger overflow/scrollbars? Maybe they don't trigger overflow but if there is overflow anyways (something else triggers scrollbars), then margins influence the dimensions of the scrollable area. Consider: define baseline behavior as depending only on overflow-y per Robert O'Callahan / David Hyatt emails.
Status
Resolved postponed to CSS3-Box or CSS4-UI.

Issue 20

Summary
text-overflow definition is ambiguous as to whether it applies to vertical overflow of text
Raised by
Alan Hogan in private email to Tantek Çelik
URL
http://dev.w3.org/csswg/css3-ui/#text-overflow0
URL
http://dl.dropbox.com/u/105727/web/text-wrap-ellipsis.html
Proposed Resolution
No one has implemented text-overflow for anything other than inline progress. Therefore we should explicitly clarify this deatil. Insert “in its inline progression direction and ” into “when text overflows its block container element that has ‘overflow’ other than ‘visible’” just after “element”.
Status
Resolved. Editor's draft edited accordingly. Awaiting public draft.

Issue 21

Summary
text-overflow definition must include <string> value and 2 values option, but with both explicitly at-risk.
Raised by
CSS WG
URL
http://dev.w3.org/csswg/css3-ui/#text-overflow0
URL
http://lists.w3.org/Archives/Public/www-style/2011Jun/0329.html
Proposed Resolution
Update text-overflow definition to include <string> value and {1,2} values option as described below.
Status
Resolved. Editor's draft edited accordingly. Awaiting public draft.

text-overflow string

text-overflow: <string>. consider incorporating dropped <string> value.

Originally text-overflow: <string> was defined in CSS3 Text CR 2003-05-14 - but no one implemented it. Thus any request for including this MUST include some justification as to why/how implementations would consider it differently than they did (and reject) for CSS3 Text CR 2003.

Real-world use-cases:

  • none.

Theoretical use-cases:

  • text-overflow:”” can be used to clip inline content on whole characters (grapheme clusters) / atomic elements rather than clipping them at a pixel boundary. (is there any evidence of designers wanting such an effect?)
  • multilingual (need specific examples here. which languages and which characters?)
  • author might wish to use ”(…)” for instance in citations (need a reference to this style of ellipsing in citations)
  • vertical ellipsis in maths (need a reference to this style of ellipsing in math)
  • a line that has nothing but images on it. Having two markers also motivates having a <string> value to be able to specify different symbols on each side.

CSSWG resolution: http://lists.w3.org/Archives/Public/www-style/2011Jun/0329.html - in particular:

  • syntax: “RESOLVED: Add the two-value syntax to text-overflow in css3-ui, marked at-risk”
  • semantic: “two strings (left and right) in addition to one string (both).”
  • unprefixed: ”[FF is] implementing it unprefixed, because everyone else already has.”

Possible spec markup:

<td>( clip | ellipsis | 
   <a class="noxref" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string">
     <span class="value-inst-string">&lt;string&gt;</span></a> ){1,2}
</td>
...
      <dt><dfn title="text-overflow:&lt;string&gt;">
           <var>&lt;string&gt;</var></dfn></dt>
        <dd>
        Render the given string to represent clipped text. 
        The string is treated as an independent paragraph for bidi purposes.
        </dd>
...
<p>
[At risk]. If there is one value, use it for both the left and right line edges. 
If there are two values, use the first value for the right edge, 
and the second value for the left edge.
</p>

Issue 22

Summary
How should text selection behave in the presence of a text-overflow ellipsis?
Raised by
Tantek Çelik
URL
http://www.w3.org/Style/CSS/Tracker/issues/279
URL
http://lists.w3.org/Archives/Public/www-style/2012Nov/0263.html
Resolution
Selecting the ellipsis SHOULD select the ellipsed text. If all of ellipsed text is selected, UAs SHOULD show selection of ellipsis. Behavior of partially-selected elided text is up to UA. Consider adding clarifying examples in spec, adding tests. RESOLVED at 2012-10-30 TPAC CSSWG f2f meeting.
Status
Resolved. Editor's draft edited accordingly. Awaiting public draft.
Notes: In Safari, you can see that the copy-pasted text is the complete text. This is what is expected by users, and implemented by other browsers.

Issue 23

Summary
Update CSS IS AWESOME example to show non-ellipsed last line.
Raised by
Rossen
URL
http://lists.w3.org/Archives/Public/www-style/2012Nov/0263.html
Resolution
Update CSS IS AWESOME text-overflow example in the spec to not ellipse the last line, but an earlier line. RESOLVED at 2012-10-30 TPAC CSSWG f2f meeting.
Status
Resolved. Editor's draft edited accordingly. Awaiting public draft.

Issue 24

Summary
Provide horizontal scrolling text-overflow example revealing more text that is elided
Raised by
Tantek Çelik
URL
http://www.xanthir.com/etc/text-overflow.html
URL
http://lists.w3.org/Archives/Public/www-style/2009Nov/0219.html
Proposed Resolution
Add horizontal scrolling text-overflow example akin to Tab's test case, note that it works in both Firefox and Opera (interop), but currently not in Webkit (Chrome, Safari).
Status
Resolved. Need to edit editor's draft.

Issue 25

Summary
nav-index property is not well implemented, nor expected to be. also, is problematic (per similar issues on tabindex in HTML).
Raised by
Tantek Çelik
URL
here's one: http://lists.w3.org/Archives/Public/www-style/2012Oct/thread.html#msg468
URL
http://wiki.csswg.org/spec/css4-ui#nav-properties
Proposed Resolution
drop nav-index property from CSS3-UI in next CR draft, move current text to a workspace page like I did for pointer-events: http://www.w3.org/wiki/User:Tantekelik#CSSWG , mark directional nav-* properties NOT at risk (note multiple implementations per http://www.w3.org/2013/11/27-css-irc )
Status
Need to edit editor's draft.

Issue 26

Summary
add 'cursor' values 'grab' and 'grabbing' per existing interop prefixed support by Gecko and WebKit
Raised by
Frank Yan / Tantek Çelik
URL
http://frankyan.com/labs/cursor/
URL
http://lists.w3.org/Archives/Public/www-style/2013Apr/0058.html
URL
https://bugzilla.mozilla.org/show_bug.cgi?id=880672
Proposed Resolution
edit the spec, add the values
Status
Resolved. Need to edit editor's draft

Issue 27

Summary
specify that 'cursor' propagates from the root to the viewport
Raised by
Tab Atkins
URL
http://krijnhoetmer.nl/irc-logs/whatwg/20130523#l-684
URL
http://lists.w3.org/Archives/Public/www-style/2013May/0301.html
Proposed Resolution
Edit definition of 'cursor' to state (similar to how 'background' does in CSS3 Backgrounds) that it propagates from the root element to the viewport.
Status
Resolved. Need to edit editor's draft

Issue 28

Summary
link to nav-* directional navigation tests from nav-* section, and in tests section in header
Raised by
Tantek Çelik
URL
http://test.csswg.org/source/contributors/opera/submitted/css3-ui/
URL
http://lists.w3.org/Archives/Public/www-style/2013Nov/0271.html
URL
https://github.com/w3c/csswg-test/pull/372
Proposed Resolution
Edit spec accordingly, note that Opera/Presto desktop supports nav-* directional navigation with “shift+arrow”.
Status
Resolved. Need to edit editor's draft

Issue 29

Summary
nav-* directional navigation properties definition prose fixes
Raised by
Simon Sapin
URL
http://lists.w3.org/Archives/Public/www-style/2013Oct/0102.html
Proposed Resolution
Edit spec accordingly, explicitly say what happens if ID selector does not match any elements.
Status
Resolved. Need to edit editor's draft

Issue 30

Summary
Re-add ::selection, define according to existing impl interop of ::selection
Raised by
Tantek Çelik
URL
http://www.w3.org/2013/12/11-css-irc#T18-01-59 (recent IRC discussion)
URL
http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html (list of questions/issues with ::selection)
URL
https://developer.mozilla.org/en-US/docs/Web/CSS/::selection (documentation of current support)
URL
http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#UIfragments (most recent spec text)
URL
http://www.w3.org/TR/2004/CR-css3-ui-20040511/ (most recent CR reference)
URL
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#UIfragments (most recent CR spec text)
URL
http://lists.w3.org/Archives/Public/www-style/2013Dec/0240.html (email about this proposal)
Proposed Resolution
  1. Create tests to answer questions raised in http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html
  2. Run tests in browsers: Chrome, Firefox (as ::-moz-selection), IE9+, Opera, Safari
  3. For all tests, if a majority of browsers agree on a test, codify that behavior into spec text. If not, explicitly list that test's behavior as undefined (browsers known to disagree)
  4. Add resulting spec text to a new ::selection section in CSS3-UI.
  5. Submit to CSS test-suite efforts each test where a majority of browsers agree on behavior.

Historical note
::selection introduced as :selection 1999-09-16: http://www.w3.org/TR/1999/WD-css3-userint-19990916#pseudo-selection
Status
Proposed resolution. Awaiting WG consensus (or absent objection), then need to perform above steps (create tests, run tests, spec majority behaviors, submit those tests).

Issue n

Summary
Raised by
Tantek Çelik
URL
Proposed Resolution
Status

css3-ui additional spec improvements

  • Consider adding clarifying examples in spec, adding tests. (per Issue 22)
 
spec/css3-ui.txt · Last modified: 2013/12/11 11:31 by tantek
Recent changes RSS feed Valid XHTML 1.0 Valid CSS Driven by DokuWiki