8000 [css3-ui] edits for issues 45, 56, 57, 58, 61, 63, 67 · w3c/csswg-drafts@faed1d1 · GitHub
Skip to content

Commit faed1d1

Browse files
tantektantek
committed
[css3-ui] edits for issues 45, 56, 57, 58, 61, 63, 67
1 parent 9287868 commit faed1d1

1 file changed

Lines changed: 80 additions & 55 deletions

File tree

‎css-ui/Overview.html‎

Lines changed: 80 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -825,7 +825,7 @@ <h2 class="no-num no-toc no-ref heading settled" id="contents"><span class="cont
825825
<li><a href="#purpose"><span class="secno">1.1</span> <span class="content">Purpose</span></a></li>
826826
</ul>
827827
</li>
828-
<li><a href="#dependencies"><span class="secno">2</span> <span class="content">Dependencies on other modules</span></a></li>
828+
<li><a href="#interaction"><span class="secno">2</span> <span class="content">Module Interactions</span></a></li>
829829
<li><a href="#selectors"><span class="secno">3</span> <span class="content">User Interface Selectors</span></a>
830830
<ul class="toc">
831831
<li><a href="#pseudo-elements"><span class="secno">3.1</span> <span class="content">User interface element fragments: pseudo-elements</span></a>
@@ -875,7 +875,12 @@ <h2 class="no-num no-toc no-ref heading settled" id="contents"><span class="cont
875875
</li>
876876
<li><a href="#keyboard"><span class="secno">7.3</span> <span class="content">Keyboard control</span></a>
877877
<ul class="toc">
878-
<li><a href="#nav-dir"><span class="secno">7.3.1</span> <span class="content">Directional focus navigation: the <span class="property" data-link-type="propdesc" title="nav-up">nav-up</span>, <span class="property" data-link-type="propdesc" title="nav-right">nav-right</span>, <span class="property" data-link-type="propdesc" title="nav-down">nav-down</span>, <span class="property" data-link-type="propdesc" title="nav-left">nav-left</span> properties</span></a></li>
878+
<li><a href="#nav-dir"><span class="secno">7.3.1</span> <span class="content">Directional focus navigation: the <span class="property" data-link-type="propdesc" title="nav-up">nav-up</span>, <span class="property" data-link-type="propdesc" title="nav-right">nav-right</span>, <span class="property" data-link-type="propdesc" title="nav-down">nav-down</span>, <span class="property" data-link-type="propdesc" title="nav-left">nav-left</span> properties</span></a>
879+
<ul class="toc">
880+
<li><a href="#example-positioned-buttons"><span class="secno">7.3.1.1</span> <span class="content">Example: positioned buttons</span></a></li>
881+
<li><a href="#example-moving-focus-to-inside-a-frame"><span class="secno">7.3.1.2</span> <span class="content">Example: moving focus to inside a frame</span></a></li>
882+
</ul>
883+
</li>
879884
<li><a href="#input-method-editor"><span class="secno">7.3.2</span> <span class="content">Input method editor: the <span class="property" data-link-type="propdesc" title="ime-mode">ime-mode</span> property</span></a></li>
880885
</ul>
881886
</li>
@@ -964,44 +969,24 @@ <h3 class="heading settled" data-level="1.1" id="purpose"><span class="secno">1.
964969
</li></ul>
965970

966971

967-
<h2 class="heading settled" data-level="2" id="dependencies"><span class="secno">2. </span><span class="content">Dependencies on other modules</span><a class="self-link" href="#dependencies"></a></h2>
968-
969-
970-
<p>This CSS3 module depends on the following other specifications.</p>
971-
972-
973-
<ul>
974-
975-
<li><a data-biblio-type="normative" data-link-type="biblio" href="#biblio-select" title="SELECT">[SELECT]</a>
976-
</li>
977-
<li><a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css3color" title="CSS3COLOR">[CSS3COLOR]</a>
978-
</li>
979-
<li><a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css21" title="CSS21">[CSS21]</a>
980-
</li>
981-
<li><a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css3val" title="CSS3VAL">[CSS3VAL]</a>
982-
</li>
983-
<li><a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css3-writing-modes" title="CSS3-WRITING-MODES">[CSS3-WRITING-MODES]</a>
984-
</li></ul>
985-
986-
972+
<h2 class="heading settled" data-level="2" id="interaction"><span class="secno">2. </span><span class="content">Module Interactions</span><a class="self-link" href="#interaction"></a></h2>
987973

988974

989-
<p>The following work is related to the CSS Basic User Interface Module Level 3 (CSS3 Basic UI).</p>
975+
<p>This document defines new features not present in earlier specifications.
976+
In addition, it replaces and supersedes the following:</p>
990977

991978

992979
<ul>
993980

994-
<li><a data-biblio-type="informative" data-link-type="biblio" href="#biblio-html401" title="HTML401">[HTML401]</a>
995-
</li>
996-
<li><a data-biblio-type="informative" data-link-type="biblio" href="#biblio-html5" title="HTML5">[HTML5]</a>
981+
<li><a href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">Section 18.1</a>
982+
and
983+
<a href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">section 18.4</a>
984+
of Cascading Style Sheets, level 2, revision 1 <a data-biblio-type="informative" data-link-type="biblio" href="#biblio-css21" title="CSS21">[CSS21]</a>
997985
</li>
998-
<li><a data-biblio-type="informative" data-link-type="biblio" href="#biblio-uaag10" title="UAAG10">[UAAG10]</a>
986+
<li><a href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">User Interface for CSS3 (16 February 2000)</a> <a data-biblio-type="informative" data-link-type="biblio" href="#biblio-cssui" title="CSSUI">[CSSUI]</a>
999987
</li></ul>
1000988

1001989

1002-
<p>This specification does not define what is a form element.</p>
1003-
1004-
1005990
<h2 class="heading settled" data-level="3" id="selectors"><span class="secno">3. </span><span class="content">User Interface Selectors</span><a class="self-link" href="#selectors"></a></h2>
1006991

1007992

@@ -1470,27 +1455,44 @@ <h3 class="heading settled" data-level="5.4" id="outline-color"><span class="sec
14701455
<p>Outlines may be non-rectangular.
14711456
For example, if the element is broken across several lines,
14721457
the outline should be an outline or minimum set of outlines
1473-
that encloses all the element’s boxes.
1474-
Each part of the outline should be fully connected
1458+
that encloses all the element’s boxes.</p>
1459+
1460+
1461+
<p>Each part of the outline should be fully connected
14751462
rather than open on some sides
1476-
(as borders on inline elements are when lines are broken).
1477-
The parts of the outline are not required to be rectangular.
1478-
The position of the outline may be affected by descendant boxes.
1479-
User agents should use an algorithm for determining
1463+
(as borders on inline elements are when lines are broken).</p>
1464+
1465+
1466+
<p>The parts of the outline are not required to be rectangular.
1467+
To the extent that the outline follows the border edge,
1468+
it should follow the border-radius curve.</p>
1469+
1470+
1471+
<p>The position of the outline may be affected by descendant boxes.</p>
1472+
1473+
1474+
<p>User agents should use an algorithm for determining
14801475
the outline that encloses a region appropriate
14811476
for conveying the concept of focus to the user.</p>
14821477

14831478

1479+
<p class="note" role="note">Note: This specification does not define the exact position or shape of the outline, but it is typically drawn immediately outside the border box.</p>
1480+
1481+
1482+
14841483
<p>The <a class="property" data-link-type="propdesc" href="#propdef-outline-width">outline-width</a> property accepts
14851484
the same values as
14861485
<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/box.html#propdef-border-width">border-width</a>
1487-
(<a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css21" title="CSS21">[CSS21]</a>, section 8.5.1).</p>
1486+
(<a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css3bg" title="CSS3BG">[CSS3BG]</a>,
1487+
<a href="http://www.w3.org/TR/css3-background/#the-border-width">Section 4.3</a>).</p>
14881488

14891489

14901490
<p>The <a class="property" data-link-type="propdesc" href="#propdef-outline-style">outline-style</a> property accepts
14911491
the same values as
14921492
<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/box.html#propdef-border-style">border-style</a>
1493-
(<a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css21" title="CSS21">[CSS21]</a>, section 8.5.3), except that
1493+
(<a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css3bg" title="CSS3BG">[CSS3BG]</a>,
1494+
<a href="http://www.w3.org/TR/css3-background/#the-border-style">Section 4.2</a>),
1495+
except that
14941496
<a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-backgrounds-3/#hidden">hidden</a> is not a legal outline style.
14951497
In addition, in CSS3,
14961498
<a class="property" data-link-type="propdesc" href="#propdef-outline-style">outline-style</a>
@@ -2356,7 +2358,7 @@ <h4 class="heading settled" data-level="7.1.1" id="cursor"><span class="secno">7
23562358

23572359

23582360
This property specifies the type of cursor to be displayed for the pointing device
2359-
when over the element’s border, padding, and content.
2361+
when within the element’s border-box.
23602362
Values have the following meanings:
23612363

23622364

@@ -2372,8 +2374,15 @@ <h4 class="heading settled" data-level="7.1.1" id="cursor"><span class="secno">7
23722374
If the user agent cannot handle any user-defined cursor,
23732375
it must use the cursor keyword at the end of the list.
23742376
Conforming User Agents may, instead of &lt;uri>, support &lt;image> which is a superset.
2375-
The optional &lt;x> and &lt;y> coordinates
2376-
identify the exact position within the image which is the pointer position (i.e., the hotspot).
2377+
2378+
2379+
<p>The <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-images-3/#default-object-size">default object size</a> for cursor images is
2380+
a UA-defined size that should be based on
2381+
the size of a typical cursor on the UA’s operating system.</p>
2382+
2383+
2384+
<p>The optional &lt;x> and &lt;y> coordinates
2385+
identify the exact position within the image which is the pointer position (i.e., the hotspot).</p>
23772386
</dd>
23782387

23792388
<dt>&lt;x></dt>
@@ -2385,15 +2394,19 @@ <h4 class="heading settled" data-level="7.1.1" id="cursor"><span class="secno">7
23852394
The x-coordinate and y-coordinate of the position
23862395
in the cursor’s coordinate system (left/top relative)
23872396
which represents the precise position that is being pointed to.
2388-
If the values are unspecified,
2397+
2398+
2399+
<p>If the values are unspecified,
23892400
then the intrinsic hotspot defined inside the image resource itself is used.
23902401
If both the values are unspecific and the referenced cursor has no defined hotspot,
2391-
the effect is as if a value of "0 0" were specified.
2392-
If the coordinates of the hotspot,
2402+
the effect is as if a value of "0 0" were specified.</p>
2403+
2404+
2405+
<p>If the coordinates of the hotspot,
23932406
as specified either inside the image resource or
23942407
by &lt;x> and &lt;y> values,
23952408
fall outside of the cursor image,
2396-
they must be clamped (independently) to fit.
2409+
they must be clamped (independently) to fit.</p>
23972410
</dd>
23982411
</dl>
23992412

@@ -2838,8 +2851,7 @@ <h4 class="heading settled" data-level="7.3.1" id="nav-dir"><span class="secno">
28382851

28392852
<div class="example">
28402853

2841-
2842-
<p>Example: positioned buttons</p>
2854+
<h5 class="heading settled" data-level="7.3.1.1" id="example-positioned-buttons"><span class="secno">7.3.1.1. </span><span class="content">Example: positioned buttons</span><a class="self-link" href="#example-positioned-buttons"></a></h5>
28432855

28442856

28452857
<p>Here is an example of buttons positioned in a diamond shape
@@ -2882,6 +2894,23 @@ <h4 class="heading settled" data-level="7.3.1" id="nav-dir"><span class="secno">
28822894
</div>
28832895

28842896

2897+
<div class="example">
2898+
2899+
<h5 class="heading settled" data-level="7.3.1.2" id="example-moving-focus-to-inside-a-frame"><span class="secno">7.3.1.2. </span><span class="content">Example: moving focus to inside a frame</span><a class="self-link" href="#example-moving-focus-to-inside-a-frame"></a></h5>
2900+
2901+
2902+
<p>Moving the focus to an element in a specific frame requires both the element’s id and the frame’s name.</p>
2903+
2904+
2905+
<p>This example shows how to make navigating left from the button with id "foo" move the focus to the element with id "bar" within the frame named "sidebar".</p>
2906+
2907+
2908+
<pre><code class="lang-css">button#foo { nav-left: #bar "sidebar"; }
2909+
</code></pre>
2910+
</div>
2911+
2912+
2913+
28852914
<h4 class="heading settled" data-level="7.3.2" id="input-method-editor"><span class="secno">7.3.2. </span><span class="content">Input method editor: the <a class="property" data-link-type="propdesc" href="#propdef-ime-mode">ime-mode</a> property</span><a class="self-link" href="#input-method-editor"></a></h4>
28862915

28872916

@@ -3441,10 +3470,10 @@ <h3 class="no-num heading settled" id="normative"><span class="content">Normativ
34413470
<dd>Bert Bos; et al. <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a></dd>
34423471
<dt id="biblio-css3-writing-modes" title="CSS3-WRITING-MODES"><a class="self-link" href="#biblio-css3-writing-modes"></a>[CSS3-WRITING-MODES]</dt>
34433472
<dd>Elika J. Etemad; Koji Ishii. <a href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">CSS Writing Modes Module Level 3</a>. 15 November 2012. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a></dd>
3473+
<dt id="biblio-css3bg" title="CSS3BG"><a class="self-link" href="#biblio-css3bg"></a>[CSS3BG]</dt>
3474+
<dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">CSS Backgrounds and Borders Module Level 3</a>. 24 July 2012. W3C Candidate Recommendation. (Work in progress.) URL: <a href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a></dd>
34443475
<dt id="biblio-css3color" title="CSS3COLOR"><a class="self-link" href="#biblio-css3color"></a>[CSS3COLOR]</dt>
34453476
<dd>Tantek Çelik; Chris Lilley; L. David Baron. <a href="http://www.w3.org/TR/2011/REC-css3-color-20110607">CSS Color Module Level 3</a>. 7 June 2011. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a></dd>
3446-
<dt id="biblio-css3val" title="CSS3VAL"><a class="self-link" href="#biblio-css3val"></a>[CSS3VAL]</dt>
3447-
<dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a href="http://www.w3.org/TR/2013/CR-css3-values-20130730/">CSS Values and Units Module Level 3</a>. 30 July 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a href="http://www.w3.org/TR/2013/CR-css3-values-20130730/">http://www.w3.org/TR/2013/CR-css3-values-20130730/</a></dd>
34483477
<dt id="biblio-select" title="SELECT"><a class="self-link" href="#biblio-select"></a>[SELECT]</dt>
34493478
<dd>Tantek Çelik; et al. <a href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/">Selectors Level 3</a>. 29 September 2011. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/">http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a></dd>
34503479
<dt id="biblio-uax29" title="UAX29"><a class="self-link" href="#biblio-uax29"></a>[UAX29]</dt>
@@ -3458,14 +3487,10 @@ <h3 class="no-num heading settled" id="informative"><span class="content">Inform
34583487
<dd>Håkon Wium Lie; Bert Bos. <a href="http://www.w3.org/TR/CSS1/">Cascading Style Sheets (CSS1) Level 1 Specification</a>. 11 April 2008. REC. URL: <a href="http://www.w3.org/TR/CSS1/">http://www.w3.org/TR/CSS1/</a></dd>
34593488
<dt id="biblio-css2" title="CSS2"><a class="self-link" href="#biblio-css2"></a>[CSS2]</dt>
34603489
<dd>Bert Bos; et al. <a href="http://www.w3.org/TR/CSS2">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="http://www.w3.org/TR/CSS2">http://www.w3.org/TR/CSS2</a></dd>
3490+
<dt id="biblio-cssui" title="CSSUI"><a class="self-link" href="#biblio-cssui"></a>[CSSUI]</dt>
3491+
<dd>Tantek Çelik. <a href="http://www.w3.org/TR/2002/WD-css3-userint-20020802">User Interface for CSS3</a>. 16 February 2000. W3C Working Draft. (Superseded) URL: <a href="http://www.w3.org/TR/2002/WD-css3-userint-20020802">http://www.w3.org/TR/2002/WD-css3-userint-20020802</a></dd>
34613492
<dt id="biblio-svg10" title="SVG10"><a class="self-link" href="#biblio-svg10"></a>[SVG10]</dt>
34623493
<dd>Jon Ferraiolo. <a href="http://www.w3.org/TR/2001/REC-SVG-20010904">Scalable Vector Graphics (SVG) 1.0 Specification</a>. 4 September 2001. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2001/REC-SVG-20010904">http://www.w3.org/TR/2001/REC-SVG-20010904</a></dd>
3463-
<dt id="biblio-uaag10" title="UAAG10"><a class="self-link" href="#biblio-uaag10"></a>[UAAG10]</dt>
3464-
<dd>Ian Jacobs; Jon Gunderson; Eric Hansen. <a href="http://www.w3.org/TR/UAAG10/">User Agent Accessibility Guidelines 1.0</a>. 17 December 2002. REC. URL: <a href="http://www.w3.org/TR/UAAG10/">http://www.w3.org/TR/UAAG10/</a></dd>
3465-
<dt id="biblio-html401" title="html401"><a class="self-link" href="#biblio-html401"></a>[html401]</dt>
3466-
<dd>Dave Raggett; Arnaud Le Hors; Ian Jacobs. <a href="http://www.w3.org/TR/html401">HTML 4.01 Specification</a>. 24 December 1999. REC. URL: <a href="http://www.w3.org/TR/html401">http://www.w3.org/TR/html401</a></dd>
3467-
<dt id="biblio-html5" title="html5"><a class="self-link" href="#biblio-html5"></a>[html5]</dt>
3468-
<dd>Ian Hickson; et al. <a href="http://www.w3.org/TR/html5/">HTML5</a>. 28 October 2014. REC. URL: <a href="http://www.w3.org/TR/html5/">http://www.w3.org/TR/html5/</a></dd>
34693494
</dl>
34703495
<h2 class="no-num heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
34713496
<ul class="indexlist">

0 commit comments

Comments
 (0)