[css-ui-3] Improve bikeshed markup

Author: frivoal

css-ui/Overview.bs

@@ -975,7 +975,7 @@ User agents may ignore the cursor property over native user-agent controls such
 
 Values have the following meanings:
 
-<dl>
+<dl dfn-type=value dfn-for=cursor>
 <dt>image cursors
 <dd>
 <dl>
@@ -1061,38 +1061,38 @@ they must be clamped (independently) to fit.
 <dd>
 
 <dl>
-<dt style="cursor:auto">auto</dt>
+<dt style="cursor:auto"><dfn>auto</dfn></dt>
 <dd>The UA determines the cursor to display based on the current
 context, specifically: auto behaves as ''cursor/text'' over text, and ''cursor/default'' otherwise.
 </dd>
 
-<dt style="cursor:default">default</dt>
+<dt style="cursor:default"><dfn>default</dfn></dt>
 <dd>The platform-dependent default cursor. Often rendered as an arrow.
 </dd>
-<dt style="cursor:none">none</dt>
+<dt style="cursor:none"><dfn>none</dfn></dt>
 <dd>No cursor is rendered for the element.</dd>
 </dl>
 
 <dt>links and status cursors
 <dd>
 
 <dl>
-<dt style="cursor:context-menu">context-menu</dt>
+<dt style="cursor:context-menu"><dfn>context-menu</dfn></dt>
 <dd>A context menu is available for the object under the cursor.
 Often rendered as an arrow with a small menu-like graphic next to it.</dd>
-<dt style="cursor:help">help</dt>
+<dt style="cursor:help"><dfn>help</dfn></dt>
 <dd>Help is available for the object under the cursor.
 Often rendered as a question mark or a balloon.
 </dd>
-<dt style="cursor:pointer">pointer</dt>
+<dt style="cursor:pointer"><dfn>pointer</dfn></dt>
 <dd>The cursor is a pointer that indicates a link.
 </dd>
-<dt style="cursor:progress">progress</dt>
+<dt style="cursor:progress"><dfn>progress</dfn></dt>
 <dd>A progress indicator.  The program is performing some processing,
 but is different from ''wait'' in that the user may still interact
 with the program. Often rendered as a spinning beach ball,
 or an arrow with a watch or hourglass.</dd>
-<dt style="cursor:wait">wait</dt>
+<dt style="cursor:wait"><dfn>wait</dfn></dt>
 <dd>Indicates that the program is busy and the user should wait.
 Often rendered as a watch or hourglass.
 </dd>
@@ -1101,83 +1101,83 @@ Often rendered as a watch or hourglass.
 <dt>selection cursors
 <dd>
 <dl>
-<dt style="cursor:cell">cell</dt>
+<dt style="cursor:cell"><dfn>cell</dfn></dt>
 <dd>Indicates that a cell or set of cells may be selected. Often rendered as a thick plus-sign with a dot in the middle.</dd>
-<dt style="cursor:crosshair">crosshair</dt>
+<dt style="cursor:crosshair"><dfn>crosshair</dfn></dt>
 <dd>A simple crosshair (e.g., short line segments resembling a "+" sign).
 Often used to indicate a two dimensional bitmap selection mode.
 </dd>
-<dt style="cursor:text">text</dt>
+<dt style="cursor:text"><dfn>text</dfn></dt>
 <dd>Indicates text that may be selected. Often rendered as a vertical I-beam.
 User agents may automatically display a horizontal I-beam/cursor
 (e.g. same as the ''vertical-text'' keyword)
 for vertical text, or for that matter,
 any angle of I-beam/cursor for text that is rendered at any particular angle.
 </dd>
-<dt style="cursor:vertical-text">vertical-text</dt>
+<dt style="cursor:vertical-text"><dfn>vertical-text</dfn></dt>
 <dd>Indicates vertical-text that may be selected. Often rendered as a horizontal I-beam.</dd>
 </dl>
 
 <dt>drag and drop cursors
 <dd>
 <dl>
-<dt style="cursor:alias">alias</dt>
+<dt style="cursor:alias"><dfn>alias</dfn></dt>
 <dd>Indicates an alias of/shortcut to something is to be created.
 Often rendered as an arrow with a small curved arrow next to it.</dd>
 
-<dt style="cursor:copy">copy</dt>
+<dt style="cursor:copy"><dfn>copy</dfn></dt>
 <dd>Indicates something is to be copied.
 Often rendered as an arrow with a small plus sign next to it.</dd>
 
-<dt style="cursor:move">move</dt>
+<dt style="cursor:move"><dfn>move</dfn></dt>
 <dd>Indicates something is to be moved.
 </dd>
-<dt style="cursor:no-drop">no-drop</dt>
+<dt style="cursor:no-drop"><dfn>no-drop</dfn></dt>
 <dd>Indicates that the dragged item cannot be dropped at the current cursor location.
 Often rendered as a hand or pointer with a small circle with a line through it.
 </dd>
-<dt style="cursor:not-allowed">not-allowed</dt>
+<dt style="cursor:not-allowed"><dfn>not-allowed</dfn></dt>
 <dd>Indicates that the requested action will not be carried out.
 Often rendered as a circle with a line through it.
 </dd>
-<dt style="cursor:grab">grab</dt>
+<dt style="cursor:grab"><dfn>grab</dfn></dt>
 <dd>Indicates that something can be grabbed (dragged to be moved). Often rendered as the backside of an open hand.</dd>
-<dt style="cursor:grabbing">grabbing</dt>
+<dt style="cursor:grabbing"><dfn>grabbing</dfn></dt>
 <dd>Indicates that something is being grabbed (dragged to be moved). Often rendered as the backside of a hand with fingers closed mostly out of view.</dd>
 </dl>
 
 <dt>resizing and scrolling cursors
 <dd>
 <dl>
 <dt>
-<span style="cursor:e-resize">e-resize</span>,
-<span style="cursor:n-resize">n-resize</span>,
-<span style="cursor:ne-resize">ne-resize</span>,
-<span style="cursor:nw-resize">nw-resize</span>,
-<span style="cursor:s-resize">s-resize</span>,
-<span style="cursor:se-resize">se-resize</span>,
-<span style="cursor:sw-resize">sw-resize</span>,
-<span style="cursor:w-resize">w-resize</span>
+<span style="cursor:e-resize"><dfn>e-resize</dfn></span>,
+<span style="cursor:n-resize"><dfn>n-resize</dfn></span>,
+<span style="cursor:ne-resize"><dfn>ne-resize</dfn></span>,
+<span style="cursor:nw-resize"><dfn>nw-resize</dfn></span>,
+<span style="cursor:s-resize"><dfn>s-resize</dfn></span>,
+<span style="cursor:se-resize"><dfn>se-resize</dfn></span>,
+<span style="cursor:sw-resize"><dfn>sw-resize</dfn></span>,
+<span style="cursor:w-resize"><dfn>w-resize</dfn></span>
 </dt>
 <dd>Indicates that some edge is to be moved. For example, the
 ''se-resize'' cursor is used when the movement starts from the
 south-east corner of the box.
 </dd>
 <dt>
-<span style="cursor:ew-resize">ew-resize</span>,
-<span style="cursor:ns-resize">ns-resize</span>,
-<span style="cursor:nesw-resize">nesw-resize</span>,
-<span style="cursor:nwse-resize">nwse-resize</span>
+<span style="cursor:ew-resize"><dfn>ew-resize</dfn></span>,
+<span style="cursor:ns-resize"><dfn>ns-resize</dfn></span>,
+<span style="cursor:nesw-resize"><dfn>nesw-resize</dfn></span>,
+<span style="cursor:nwse-resize"><dfn>nwse-resize</dfn></span>
 </dt>
 <dd>Indicates a bidirectional resize cursor.</dd>
-<dt style="cursor:col-resize">col-resize</dt>
+<dt style="cursor:col-resize"><dfn>col-resize</dfn></dt>
 <dd>Indicates that the item/column can be resized horizontally.
 Often rendered as arrows pointing left and right with a vertical bar separating them.</dd>
-<dt style="cursor:row-resize">row-resize</dt>
+<dt style="cursor:row-resize"><dfn>row-resize</dfn></dt>
 <dd>Indicates that the item/row can be resized vertically.
 Often rendered as arrows pointing up and down with a horizontal bar separating them.
 </dd>
-<dt style="cursor:all-scroll">all-scroll</dt>
+<dt style="cursor:all-scroll"><dfn>all-scroll</dfn></dt>
 <dd>Indicates that the something can be scrolled in any direction.
 Often rendered as arrows pointing up, down, left, and right with a dot in the middle.
 </dd>
@@ -1187,8 +1187,8 @@ Often rendered as arrows pointing up, down, left, and right with a dot in the mi
 <dd>
 <dl>
 <dt>
-<span style="cursor:zoom-in"> zoom-in</span>,
-<span style="cursor:zoom-out"> zoom-out</span>
+<span style="cursor:zoom-in"> <dfn>zoom-in</dfn></span>,
+<span style="cursor:zoom-out"> <dfn>zoom-out</dfn></span>
 </dt>
 <dd>
 Indicates that something can be zoomed (magnified) in or out, and