[css-transitions] Better hyperlinking for property values.

dbaron · dbaron · commit 2c88c7ca0a23 · 2015-01-26T23:48:19.000-08:00
diff --git a/css-transitions/Overview.bs b/css-transitions/Overview.bs
@@ -37,6 +37,7 @@ spec:css-values-3; type:type; text:<time>
 </pre>
 <pre class="anchors">
 url: http://dev.w3.org/csswg/css-backgrounds-3/#shadow-inset; type: value; for: shadow; text: inset;
+url: http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility; type: value; for: visibility; text: visible;
 </pre>
 </dl>
 
@@ -152,8 +153,8 @@ url: http://dev.w3.org/csswg/css-backgrounds-3/#shadow-inset; type: value; for:
       </p>
       <pre class="propdef">
         Name: transition-property
-        Value: none | <<single-transition-property>>#
-        Initial: all
+        Value: ''transition-property/none'' | <<single-transition-property>>#
+        Initial: ''transition-property/all''
         Applies to: all elements, :before and :after pseudo elements
         Inherited: no
         Animatable: no
@@ -164,7 +165,7 @@ url: http://dev.w3.org/csswg/css-backgrounds-3/#shadow-inset; type: value; for:
       </pre>
 
       <div class="prod">
-        <dfn type id="single-transition-property">&lt;single-transition-property&gt;</dfn> = all | <<custom-ident>>;
+        <dfn type id="single-transition-property">&lt;single-transition-property&gt;</dfn> = ''transition-property/all'' | <<custom-ident>>;
       </div>
 
       <p>
@@ -190,32 +191,34 @@ url: http://dev.w3.org/csswg/css-backgrounds-3/#shadow-inset; type: value; for:
 
       <p>
         The <<custom-ident>> production in <<single-transition-property>>
-        also excludes the keyword ''none'',
+        also excludes the keyword ''transition-property/none'',
         in addition to the keywords always excluded from <<custom-ident>>.
-        This means that ''none'', ''inherit'', and ''initial'' are not
+        This means that
+        ''transition-property/none'', ''inherit'', and ''initial'' are not
         permitted as items within a list of more that one identifier;
         any list that uses them is syntactically invalid.
       </p>
 
       <p>
-        For the keyword ''all'', or if one of the identifiers listed is a
+        For the keyword ''transition-property/all'',
+        or if one of the identifiers listed is a
         shorthand property, implementations must start transitions for
         any of its longhand sub-properties that are animatable (or, for
-        ''all'', all animatable properties), using the duration, delay,
+        ''transition-property/all'', all animatable properties), using the duration, delay,
         and timing function at the index corresponding to the shorthand.
       </p>
       <p>
         If a property is specified multiple times in the value of
         'transition-property' (either on its own, via a shorthand that
-        contains it, or via the ''all'' value), then the transition that
+        contains it, or via the ''transition-property/all'' value), then the transition that
         starts uses the duration, delay, and timing function at the
         index corresponding to the <em>last</em> item in the value of
         'transition-property' that calls for animating that property.
       </p>
       <p class="note">
-        Note:  The ''all'' value and 'all' shorthand
+        Note:  The ''transition-property/all'' value and 'all' shorthand
         property work in similar ways, so the
-        ''all'' value is just like a shorthand that
+        ''transition-property/all'' value is just like a shorthand that
         covers all properties.
       </p>
 
@@ -229,7 +232,7 @@ url: http://dev.w3.org/csswg/css-backgrounds-3/#shadow-inset; type: value; for:
       <pre class="propdef">
         Name: <dfn id="transition-duration">transition-duration</dfn>
         Value: <<time>>#
-        Initial: 0s
+        Initial: ''0s''
         Applies to: all elements, :before and :after pseudo elements
         Inherited: no
         Animatable: no
@@ -320,7 +323,7 @@ url: http://dev.w3.org/csswg/css-backgrounds-3/#shadow-inset; type: value; for:
       <pre class="propdef">
         Name: <dfn id="transition-timing-function">transition-timing-function</dfn>
         Value: <<single-transition-timing-function>>#
-        Initial: ease
+        Initial: ''transition-timing-function/ease''
         Applies to: all elements, :before and :after pseudo elements
         Inherited: no
         Animatable: no
@@ -396,7 +399,7 @@ url: http://dev.w3.org/csswg/css-backgrounds-3/#shadow-inset; type: value; for:
       <pre class="propdef">
         Name: <dfn id="transition-delay">transition-delay</dfn>
         Value: <<time>>#
-        Initial: 0s
+        Initial: ''0s''
         Applies to: all elements, :before and :after pseudo elements
         Inherited: no
         Animatable: no
diff --git a/css-transitions/Overview.html b/css-transitions/Overview.html
@@ -424,11 +424,11 @@ <h3 class="heading settled" data-level="2.1" id="transition-property-property"><
           </tr>
           <tr>
             <th>Value:</th>
-            <td class="prod">none <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="#single-transition-property">&lt;single-transition-property></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-comma">#</a></td>
+            <td class="prod"><a class="css" data-link-for="transition-property" data-link-type="maybe" href="#valdef-transition-property-none">none</a> <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="#single-transition-property">&lt;single-transition-property></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-comma">#</a></td>
           </tr>
           <tr>
             <th>Initial:</th>
-            <td>all</td>
+            <td><a class="css" data-link-for="transition-property" data-link-type="maybe" href="#valdef-transition-property-all">all</a></td>
           </tr>
           <tr>
             <th>Applies to:</th>
@@ -462,7 +462,7 @@ <h3 class="heading settled" data-level="2.1" id="transition-property-property"><
 
       
       <div class="prod">
-        <dfn class="css" data-dfn-type="type" data-export="" id="single-transition-property">&lt;single-transition-property><a class="self-link" href="#single-transition-property"></a></dfn> = all <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a>;
+        <dfn class="css" data-dfn-type="type" data-export="" id="single-transition-property">&lt;single-transition-property><a class="self-link" href="#single-transition-property"></a></dfn> = <a class="css" data-link-for="transition-property" data-link-type="maybe" href="#valdef-transition-property-all">all</a> <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a>;
       </div>
 
       
@@ -491,35 +491,37 @@ <h3 class="heading settled" data-level="2.1" id="transition-property-property"><
       
       <p>
         The <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a> production in <a class="production css" data-link-type="type" href="#single-transition-property">&lt;single-transition-property></a>
-        also excludes the keyword <a class="css" data-link-type="maybe" href="#valdef-transition-property-none">none</a>,
+        also excludes the keyword <a class="css" data-link-for="transition-property" data-link-type="maybe" href="#valdef-transition-property-none">none</a>,
         in addition to the keywords always excluded from <a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a>.
-        This means that <a class="css" data-link-type="maybe" href="#valdef-transition-property-none">none</a>, <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-cascade-3/#valuedef-inherit">inherit</a>, and <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-cascade-3/#valuedef-initial">initial</a> are not
+        This means that
+        <a class="css" data-link-for="transition-property" data-link-type="maybe" href="#valdef-transition-property-none">none</a>, <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-cascade-3/#valuedef-inherit">inherit</a>, and <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-cascade-3/#valuedef-initial">initial</a> are not
         permitted as items within a list of more that one identifier;
         any list that uses them is syntactically invalid.
       </p>
 
       
       <p>
-        For the keyword <a class="css" data-link-type="maybe" href="#valdef-transition-property-all">all</a>, or if one of the identifiers listed is a
+        For the keyword <a class="css" data-link-for="transition-property" data-link-type="maybe" href="#valdef-transition-property-all">all</a>,
+        or if one of the identifiers listed is a
         shorthand property, implementations must start transitions for
         any of its longhand sub-properties that are animatable (or, for
-        <a class="css" data-link-type="maybe" href="#valdef-transition-property-all">all</a>, all animatable properties), using the duration, delay,
+        <a class="css" data-link-for="transition-property" data-link-type="maybe" href="#valdef-transition-property-all">all</a>, all animatable properties), using the duration, delay,
         and timing function at the index corresponding to the shorthand.
       </p>
       
       <p>
         If a property is specified multiple times in the value of
         <a class="property" data-link-type="propdesc" href="#propdef-transition-property">transition-property</a> (either on its own, via a shorthand that
-        contains it, or via the <a class="css" data-link-type="maybe" href="#valdef-transition-property-all">all</a> value), then the transition that
+        contains it, or via the <a class="css" data-link-for="transition-property" data-link-type="maybe" href="#valdef-transition-property-all">all</a> value), then the transition that
         starts uses the duration, delay, and timing function at the
         index corresponding to the <em>last</em> item in the value of
         <a class="property" data-link-type="propdesc" href="#propdef-transition-property">transition-property</a> that calls for animating that property.
       </p>
       
       <p class="note" role="note">
-        Note:  The <a class="css" data-link-type="maybe" href="#valdef-transition-property-all">all</a> value and <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-cascade-3/#propdef-all">all</a> shorthand
+        Note:  The <a class="css" data-link-for="transition-property" data-link-type="maybe" href="#valdef-transition-property-all">all</a> value and <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-cascade-3/#propdef-all">all</a> shorthand
         property work in similar ways, so the
-        <a class="css" data-link-type="maybe" href="#valdef-transition-property-all">all</a> value is just like a shorthand that
+        <a class="css" data-link-for="transition-property" data-link-type="maybe" href="#valdef-transition-property-all">all</a> value is just like a shorthand that
         covers all properties.
       </p>
 
@@ -545,7 +547,7 @@ <h3 class="heading settled" data-level="2.2" id="transition-duration-property"><
           </tr>
           <tr>
             <th>Initial:</th>
-            <td>0s</td>
+            <td><span class="css">0s</span></td>
           </tr>
           <tr>
             <th>Applies to:</th>
@@ -675,7 +677,7 @@ <h3 class="heading settled" data-level="2.3" id="transition-timing-function-prop
           </tr>
           <tr>
             <th>Initial:</th>
-            <td>ease</td>
+            <td><a class="css" data-link-for="transition-timing-function" data-link-type="maybe" href="#valdef-transition-timing-function-ease">ease</a></td>
           </tr>
           <tr>
             <th>Applies to:</th>
@@ -825,7 +827,7 @@ <h3 class="heading settled" data-level="2.4" id="transition-delay-property"><spa
           </tr>
           <tr>
             <th>Initial:</th>
-            <td>0s</td>
+            <td><span class="css">0s</span></td>
           </tr>
           <tr>
             <th>Applies to:</th>
@@ -1859,12 +1861,12 @@ <h2 class="heading settled" data-level="7" id="animatable-types"><span class="se
         
         <li id="animtype-visibility"><a class="self-link" href="#animtype-visibility"></a>
           <strong>visibility</strong>: if one of the values is
-          <span class="css" data-link-for="visibility">visible</span>, interpolated as a discrete step where values of the
-          timing function between 0 and 1 map to <span class="css" data-link-for="visibility">visible</span> and other
+          <a class="css" data-link-for="visibility" data-link-type="maybe" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility">visible</a>, interpolated as a discrete step where values of the
+          timing function between 0 and 1 map to <a class="css" data-link-for="visibility" data-link-type="maybe" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility">visible</a> and other
           values of the timing function (which occur only at the
           start/end of the transition or as a result of <a class="css" data-link-type="maybe" href="#funcdef-cubic-bezier">cubic-bezier()</a>
           functions with Y values outside of [0, 1]) map to the closer
-          endpoint; if neither value is <span class="css" data-link-for="visibility">visible</span> then not interpolable.
+          endpoint; if neither value is <a class="css" data-link-for="visibility" data-link-type="maybe" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility">visible</a> then not interpolable.
         </li>
         
         
