[css-ui-3] Bikeshed improvements

Closes w3c#147

Author: frivoal

css-ui/Overview.bs

@@ -125,20 +125,16 @@ of Cascading Style Sheets, level 2, revision 1 [[CSS21]]
 
 <h3 id="box-sizing">'box-sizing' property</h3>
 
-<table class="propdef"><tbody>
-<tr><th>Name:</th><td><dfn>box-sizing</dfn></td></tr>
-<tr><th>Value:</th><td>
-content-box |
-border-box
-</td></tr>
-<tr><th>Initial:</th><td>content-box</td></tr>
-<tr><th>Applies to:</th><td>all elements that accept width or height</td></tr>
-<tr><th>Inherited:</th><td>no</td></tr>
-<tr><th>Percentages:</th><td>N/A</td></tr>
-<tr><th>Media:</th><td>visual</td></tr>
-<tr><th>Computed&nbsp;value:</th><td>specified value</td></tr>
-<tr><th>Animatable:</th><td>no</td></tr>
-</tbody></table>
+<pre class="propdef"> 
+Name: box-sizing 
+Value: content-box | border-box
+Initial: content-box 
+Applies to: all elements that accept width or height 
+Inherited: no 
+Percentages: N/A 
+Media: visual 
+Computed value: specified value 
+</pre>
 
 <dl dfn-type=value dfn-for=box-sizing>
 <dt><dfn>content-box</dfn></dt>
@@ -278,62 +274,58 @@ The rendering of applying transforms to outlines is left explicitly undefined in
 
 <h3 id="outline">'outline' property</h3>
 
-<table class="propdef"><tbody>
-<tr><th>Name:</th><td><dfn>outline</dfn></td></tr>
-<tr><th>Value:</th><td>
-[ &lt;'outline-color'&gt; || &lt;'outline-style'&gt; ||
-&lt;'outline-width'&gt; ]
-</td></tr>
-<tr><th>Initial:</th><td>see individual properties</td></tr>
-<tr><th>Applies to:</th><td>all elements</td></tr>
-<tr><th>Inherited:</th><td>no</td></tr>
-<tr><th>Percentages:</th><td>N/A</td></tr>
-<tr><th>Media:</th><td>visual</td></tr>
-<tr><th>Computed&nbsp;value:</th><td>see individual properties</td></tr>
-<tr><th>Animatable:</th><td>see individual properties</td></tr>
-</tbody></table>
+<pre class="propdef"> 
+Name: outline 
+Value: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ]
+Initial: see individual properties 
+Applies to: all elements 
+Inherited: no 
+Percentages: N/A 
+Media: visual 
+Computed value: see individual properties 
+Animation type: see individual properties 
+</pre>
 
 <h3 id="outline-width">'outline-width' property</h3>
 
-<table class="propdef"><tbody>
-<tr><th>Name:</th><td><dfn>outline-width</dfn></td></tr>
-<tr><th>Value:</th><td><<'border-width'>></td></tr>
-<tr><th>Initial:</th><td>medium</td></tr>
-<tr><th>Applies to:</th><td>all elements</td></tr>
-<tr><th>Inherited:</th><td>no</td></tr>
-<tr><th>Percentages:</th><td>N/A</td></tr>
-<tr><th>Media:</th><td>visual</td></tr>
-<tr><th>Computed&nbsp;value:</th><td>absolute length; ''0'' if the outline style is ''outline-width/none''.</td></tr>
-<tr><th>Animatable:</th><td>as <a href="https://drafts.csswg.org/css3-transitions/#animtype-length">length</a></td></tr>
-</tbody></table>
+<pre class="propdef"> 
+Name: outline-width 
+Value: <'border-width'> 
+Initial: medium 
+Applies to: all elements 
+Inherited: no 
+Percentages: N/A 
+Media: visual 
+Computed value: absolute length; ''0'' if the outline style is ''outline-width/none''. 
+Amination type: <a href="https://drafts.csswg.org/css3-transitions/#animtype-length">length</a> 
+</pre>
 
 <h3 id="outline-style">'outline-style' property</h3>
 
-<table class="propdef"><tbody>
-<tr><th>Name:</th><td><dfn>outline-style</dfn></td></tr>
-<tr><th>Value:</th><td>auto | <<'border-style'>></td></tr>
-<tr><th>Initial:</th><td>none</td></tr>
-<tr><th>Applies to:</th><td>all elements</td></tr>
-<tr><th>Inherited:</th><td>no</td></tr>
-<tr><th>Percentages:</th><td>N/A</td></tr>
-<tr><th>Media:</th><td>visual</td></tr>
-<tr><th>Computed&nbsp;value:</th><td>specified value</td></tr>
-<tr><th>Animatable:</th><td>no</td></tr>
-</tbody></table>
+<pre class="propdef"> 
+Name: outline-style 
+Value: auto | <'border-style'> 
+Initial: none 
+Applies to: all elements 
+Inherited: no 
+Percentages: N/A 
+Media: visual 
+Computed value: as specified
+</pre>
 
 <h3 id="outline-color">'outline-color' property</h3>
 
-<table class="propdef"><tbody>
-<tr><th>Name:</th><td><dfn>outline-color</dfn></td></tr>
-<tr><th>Value:</th><td><<color>> | invert</td></tr>
-<tr><th>Initial:</th><td>invert</td></tr>
-<tr><th>Applies to:</th><td>all elements</td></tr>
-<tr><th>Inherited:</th><td>no</td></tr>
-<tr><th>Percentages:</th><td>N/A</td></tr>
-<tr><th>Media:</th><td>visual</td></tr>
-<tr><th>Computed&nbsp;value:</th><td>The computed value for ''invert'' is ''invert''. For <<color>> values, the computed value is as defined for the [[!CSS3COLOR]] 'color' property.</td></tr>
-<tr><th>Animatable:</th><td>as <a href="https://drafts.csswg.org/css3-transitions/#animtype-color">color</a></td></tr>
-</tbody></table>
+<pre class="propdef"> 
+Name: outline-color 
+Value: <<color>> | invert 
+Initial: invert 
+Applies to: all elements 
+Inherited: no 
+Percentages: N/A 
+Media: visual 
+Computed value: The computed value for ''invert'' is ''invert''. For <<color>> values, the computed value is as defined for the [[!CSS3COLOR]] 'color' property. 
+Animation Type: <a href="https://drafts.csswg.org/css3-transitions/#animtype-color">color</a> 
+</pre>
 
 The outline created with the outline properties is drawn "over" a box,
 i.e., the outline is always on top,
@@ -454,17 +446,17 @@ it may well overlap other elements on the page.
 By default, the outline is drawn starting just outside the <a>border edge</a>.
 However, it is possible to offset the outline and draw it beyond the <a>border edge</a>.
 
-<table class="propdef"><tbody>
-<tr><th>Name:</th><td><dfn>outline-offset</dfn></td></tr>
-<tr><th>Value:</th><td><<length>></td></tr>
-<tr><th>Initial:</th><td>0</td></tr>
-<tr><th>Applies to:</th><td>all elements</td></tr>
-<tr><th>Inherited:</th><td>no</td></tr>
-<tr><th>Percentages:</th><td>N/A</td></tr>
-<tr><th>Media:</th><td>visual</td></tr>
-<tr><th>Computed&nbsp;value:</th><td><<length>> value in absolute units (px or physical).</td></tr>
-<tr><th>Animatable:</th><td>as <a href="https://drafts.csswg.org/css3-transitions/#animtype-length">length</a></td></tr>
-</tbody></table>
+<pre class="propdef"> 
+Name: outline-offset 
+Value: <<length>> 
+Initial: 0 
+Applies to: all elements 
+Inherited: no 
+Percentages: N/A 
+Media: visual 
+Computed value: <<length>> value in absolute units (px or physical). 
+Animation Type: <a href="https://drafts.csswg.org/css3-transitions/#animtype-length">length</a> 
+</pre>
 
 If the computed value of 'outline-offset'
 is anything other than 0,
@@ -511,18 +503,17 @@ The 'resize' property allows the author
 to specify whether or not an element is resizable by the user,
 and if so, along which axis/axes.
 
-<table class="propdef"><tbody>
-<tr><th>Name:</th><td><dfn>resize</dfn></td></tr>
-<tr><th>Value: </th><td>none | both | horizontal | vertical</td></tr>
-<tr><th>Initial:</th><td>none</td></tr>
-<tr><th>Applies to:</th><td>elements with 'overflow' other than visible,
-and optionally replaced elements such as images, videos, and iframes</td></tr>
-<tr><th>Inherited:</th><td>no</td></tr>
-<tr><th>Percentages:</th><td>N/A</td></tr>
-<tr><th>Media:</th><td>visual</td></tr>
-<tr><th>Computed&nbsp;value:</th><td>specified value.</td></tr>
-<tr><th>Animatable:</th><td>no</td></tr>
-</tbody></table>
+<pre class="propdef"> 
+Name: resize 
+Value: none | both | horizontal | vertical 
+Initial: none 
+Applies to: elements with 'overflow' other than visible,
+ and optionally replaced elements such as images, videos, and iframes 
+Inherited: no 
+Percentages: N/A 
+Media: visual 
+Computed value: as specified
+</pre>
 
 <dl>
 <dt>none</dt>
@@ -638,31 +629,16 @@ too bad we don't have @viewport yet. otherwise this would be cool:
 <h3 id="text-overflow">
     Overflow Ellipsis: the 'text-overflow' property</h3>
 
-<table class="propdef"><tbody>
-<tr><th>Name:</th>
-    <td><dfn>text-overflow</dfn></td></tr>
-<tr><th>Value:</th>
-    <td> [
-clip |
-ellipsis |
-<<string>>
-]{1,2}
-</td></tr>
-<tr><th>Initial:</th>
-    <td>clip</td></tr>
-<tr><th>Applies to:</th>
-    <td>block containers</td></tr>
-<tr><th>Inherited:</th>
-    <td>no</td></tr>
-<tr><th>Percentages:</th>
-    <td>N/A</td></tr>
-<tr><th>Media:</th>
-    <td>visual</td></tr>
-<tr><th>Computed&nbsp;value:</th>
-    <td>as specified</td></tr>
-<tr><th>Animatable:</th>
-    <td>no</td></tr>
-</tbody></table>
+<pre class="propdef">
+Name: text-overflow
+Value: [ clip | ellipsis | <<string>> ]{1,2}
+Initial: clip
+Applies to: block containers
+Inherited: no
+Percentages: N/A
+Media: visual
+Computed value: as specified
+</pre>
 
 This property specifies rendering when inline content overflows
 its line box edge
@@ -957,29 +933,26 @@ then only the end ellipsis/string should be rendered.
 <h3 id="pointer-interaction">Pointer interaction</h3>
 
 <h4 id="cursor">'cursor' property</h4>
-<table class="propdef"><tbody>
-<tr><th>Name:</th><td><dfn>cursor</dfn></td></tr>
-<tr><th>Value:</th><td>
-[ [<<url>> [&lt;x&gt; &lt;y&gt;]?,]* <br>
-[ auto | default | none |<br>
+<pre class="propdef"> 
+Name: cursor 
+Value: [ [<<url>> [&lt;x&gt; &lt;y&gt;]?,]* <br>
+ [ auto | default | none |<br>
  context-menu | help | pointer | progress | wait | <br>
  cell | crosshair | text | vertical-text | <br>
  alias | copy | move | no-drop | not-allowed | grab | grabbing | <br>
  e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize |
  ew-resize | ns-resize | nesw-resize | nwse-resize |
  col-resize | row-resize |
- all-scroll
-| zoom-in | zoom-out
-<br>
-] ] </td></tr>
-<tr><th>Initial:</th><td>auto</td></tr>
-<tr><th>Applies to:</th><td>all elements</td></tr>
-<tr><th>Inherited:</th><td>yes</td></tr>
-<tr><th>Percentages:</th><td>N/A</td></tr>
-<tr><th>Media:</th><td>visual, interactive</td></tr>
-<tr><th>Computed&nbsp;value:</th><td>as specified, except with any relative URLs converted to absolute</td></tr>
-<tr><th>Animatable:</th><td>no</td></tr>
-</tbody></table>
+ all-scroll |<br>
+ zoom-in | zoom-out <br>
+ ] ] 
+Initial: auto 
+Applies to: all elements 
+Inherited: yes 
+Percentages: N/A 
+Media: visual, interactive 
+Computed value: as specified, except with any relative URLs converted to absolute 
+</pre>
 
 This property specifies the type of cursor to be displayed for the pointing device
 when the cursor's hotspot is within the element's <a>border edge</a>.
@@ -1268,17 +1241,18 @@ boxes are generated for it and its cursor is used for the canvas.
 <h3 id="insertion-caret">Insertion caret</h3>
 
 <h4 id="caret-color">Coloring the insertion caret: caret-color</h4>
-<table class="propdef"><tbody>
-<tr><th>Name: </th><td><dfn>caret-color</dfn></td></tr>
-<tr><th>Value: </th><td>auto | <<color>></td></tr>
-<tr><th>Initial:</th><td>auto</td></tr>
-<tr><th>Applies to:</th><td>elements that accept input</td></tr>
-<tr><th>Inherited:</th><td>yes</td></tr>
-<tr><th>Percentages:</th><td>N/A</td></tr>
-<tr><th>Media:</th><td>interactive</td></tr>
-<tr><th>Computed&nbsp;value:</th><td>The computed value for ''caret-color/auto'' is ''caret-color/auto''. For <<color>> values, the computed value is as defined for the [[!CSS3COLOR]] 'color' property.</td></tr>
-<tr><th>Animatable:</th><td>as <a href="https://drafts.csswg.org/css3-transitions/#animtype-color">color</a></td></tr>
-</tbody></table>
+<pre class="propdef"> 
+Name: caret-color 
+Value: auto | <<color>> 
+Initial: auto 
+Applies to: elements that accept input 
+Inherited: yes 
+Percentages: N/A 
+Media: interactive 
+Computed value: The computed value for ''caret-color/auto'' is ''caret-color/auto''.
+ For <<color>> values, the computed value is as defined for the [[!CSS3COLOR]] 'color' property. 
+Animation Type: <a href="https://drafts.csswg.org/css3-transitions/#animtype-color">color</a> 
+</pre>
 
 <dl>
 <dt>auto</dt>
@@ -1310,23 +1284,22 @@ Note: The caret-color property is at risk.
 <h3 id="keyboard">Keyboard control</h3>
 
 <h4 id="nav-dir">Directional focus navigation: the 'nav-up', 'nav-right', 'nav-down', 'nav-left' properties</h4>
-<table class="propdef"><tbody>
-<tr><th>Name: </th><td><dfn>nav-up</dfn>, <dfn>nav-right</dfn>, <dfn>nav-down</dfn>, <dfn>nav-left</dfn></td></tr>
-<tr><th>Value: </th><td>auto | &lt;id&gt; [ current | root | &lt;target-name&gt; ]? </td></tr>
-<tr><th>Initial:</th><td>auto</td></tr>
-<tr><th>Applies to:</th><td>all enabled elements</td></tr>
-<tr><th>Inherited:</th><td>no</td></tr>
-<tr><th>Percentages:</th><td>N/A</td></tr>
-<tr><th>Media:</th><td>interactive</td></tr>
-<tr><th>Computed&nbsp;value:</th><td>as specified</td></tr>
-<tr><th>Animatable:</th><td>no</td></tr>
-</tbody></table>
+<pre class="propdef"> 
+Name: nav-up , nav-right , nav-down , nav-left 
+Value: auto | <<id>> [ current | root | <<target-name>> ]? 
+Initial: auto 
+Applies to: all enabled elements 
+Inherited: no 
+Percentages: N/A 
+Media: interactive 
+Computed value: as specified 
+</pre>
 
 <dl>
 <dt>auto</dt>
 <dd>The user agent automatically determines which element to navigate the focus to in response to directional navigational input.</dd>
-<dt>&lt;id&gt;</dt>
-<dd><p>The &lt;id&gt; value is an ID selector [[SELECT]].
+<dt><dfn noexport><<id>></dfn></dt>
+<dd><p>The <<id>> value is an ID selector [[SELECT]].
 In response to directional navigation input corresponding to the property,
 the focus is navigated to the first element in tree order matching the selector.
 
@@ -1347,7 +1320,7 @@ while it is focused as such.
 Note: there were other options under consideration for such "not otherwise focusable" elements, including focus to the next otherwise focusable element in the document tree (including descendants of such a not otherwise focusable element). Input on such other options is welcome and explicitly solicited, especially from implementation experiences and author experience using the directional navigation properties in their content.
 
 </dd>
-<dt>&lt;target-name&gt;</dt>
+<dt><dfn noexport><<target-name>></dfn></dt>
 <dd>
 The &lt;target-name&gt; parameter indicates the target frame for the focus navigation.
 It is a <<string>> and it MUST NOT start with the underscore "_" character.