|
20 | 20 |
|
21 | 21 | <h1>CSS Image Values and Replaced Content Module Level 3</h1> |
22 | 22 |
|
23 | | - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 9 June 2011</h2> |
| 23 | + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 1 July 2011</h2> |
24 | 24 |
|
25 | 25 | <dl> |
26 | 26 | <dt>Latest Version: |
@@ -433,10 +433,11 @@ <h3 id=url><span class=secno>4.1. </span> Image References and Image |
433 | 433 | the SVG directly.</small></p> |
434 | 434 | </div> |
435 | 435 |
|
436 | | - <p class=note>Note however that a UA that doesn't understand the media |
437 | | - fragments notation will display the entirety an image specified with |
438 | | - ‘<code class=css>url</code>’. However, since URLs with media |
439 | | - fragment identifiers can also be used in the ‘<code |
| 436 | + <p class=note>Unfortunately, a UA that doesn't understand the media |
| 437 | + fragments notation will ignore the fragment and simply display the |
| 438 | + entirety of an image specified with ‘<code |
| 439 | + class=css>url</code>’. However, since URLs with media fragment |
| 440 | + identifiers can also be used in the ‘<code |
440 | 441 | class=css>image()</code>’ notation defined below, authors can take |
441 | 442 | advantage of CSS's forward-compatible parsing rules to provide a fallback |
442 | 443 | when using an image fragment URL: |
@@ -780,28 +781,22 @@ <h4 class=no-toc id=linear-gradient-syntax><span class=secno>5.1.1. </span> |
780 | 781 | <a href="#gradient-line"><i>gradient-line</i></a> are determined by |
781 | 782 | extending a line in both directions from the center of the box. If a |
782 | 783 | single keyword is specified, the line assumes the necessary angle to place |
783 | | - the ending-point of the <a href="#gradient-line"><i>gradient-line</i></a> |
784 | | - in the center of the side specified by the keyword; if two keywords are |
785 | | - specified, the line assumes the necessary angle to place the ending-point |
786 | | - of the <a href="#gradient-line"><i>gradient-line</i></a> in the specified |
787 | | - corner of the box. The starting-point of the gradient-line is then where |
788 | | - the line intersects the opposite side or corner of the box. |
789 | | - |
790 | | - <p class=note>This means that the keyword ‘<code |
791 | | - class=property>bottom</code>’ (the default) makes the gradient point |
792 | | - towards the bottom, equivalent to specifying ‘<code |
793 | | - class=css>180deg</code>’. The keywords ‘<code class=css>top |
794 | | - left</code>’ make the gradient point towards the top-left corner of |
795 | | - the box, which is equivalent to an angle somewhere between 0deg and 90deg |
796 | | - (exclusive). |
797 | | - |
798 | | - <p class=note>The behavior of keywords is now exactly opposite what it has |
799 | | - been for a long time. Previously, specifying ‘<code |
800 | | - class=property>top</code>’ made it start at the top and point down, |
801 | | - but feedback suggests that this was confusingly different from how |
802 | | - <angle>s worked: giving an <angle> makes the gradient point towards |
803 | | - the specified direction, while giving keywords made the gradient point |
804 | | - <em>away</em> from the specified side/corner. |
| 784 | + the starting-point of the <a |
| 785 | + href="#gradient-line"><i>gradient-line</i></a> in the center of the side |
| 786 | + specified by the keyword; if two keywords are specified, the line assumes |
| 787 | + the necessary angle to place the starting-point of the <a |
| 788 | + href="#gradient-line"><i>gradient-line</i></a> in the specified corner of |
| 789 | + the box. The ending-point of the gradient-line is then where the line |
| 790 | + intersects the opposite side or corner of the box. |
| 791 | + |
| 792 | + <p class=issue>This usage of keywords appears to be subtly confusing. When |
| 793 | + you ask solely about how keywords should work, most people prefer the |
| 794 | + above model (keyword denotes starting point). Similarly, most people |
| 795 | + prefer the way angles currently work. When you ask about whether "bottom" |
| 796 | + and "0deg" should be the same direction or opposite, though, most people |
| 797 | + prefer them to be opposite, despite that being contradictory with one of |
| 798 | + their previous answers. I am exploring alternate solutions that resolve |
| 799 | + this problem of expectations. |
805 | 800 |
|
806 | 801 | <div class=example> |
807 | 802 | <div style="overflow: hidden"> <img alt="[An image showing a box with a |
@@ -849,18 +844,18 @@ <h4 class=no-toc id=linear-gradient-examples><span class=secno>5.1.2. |
849 | 844 | <p>Below are various ways of specifying a basic vertical gradient:</p> |
850 | 845 |
|
851 | 846 | <pre><code>linear-gradient(yellow, blue); |
852 | | -linear-gradient(bottom, yellow, blue); |
| 847 | +linear-gradient(top, yellow, blue); |
853 | 848 | linear-gradient(180deg, yellow, blue); |
854 | | -linear-gradient(top, blue, yellow); |
855 | | -linear-gradient(bottom, yellow 0%, blue 100%);</code></pre> |
| 849 | +linear-gradient(bottom, blue, yellow); |
| 850 | +linear-gradient(top, yellow 0%, blue 100%);</code></pre> |
856 | 851 |
|
857 | 852 | <p><img alt="" src=linear1.png></p> |
858 | 853 | </div> |
859 | 854 |
|
860 | 855 | <div class=example> |
861 | 856 | <p>This gradient goes from the top-left to the bottom-right corner.</p> |
862 | 857 |
|
863 | | - <pre><code>linear-gradient(bottom right, yellow, blue);</code></pre> |
| 858 | + <pre><code>linear-gradient(top left, yellow, blue);</code></pre> |
864 | 859 |
|
865 | 860 | <p><img alt="" src=linear2.png></p> |
866 | 861 | </div> |
@@ -2355,34 +2350,34 @@ <h3 id=interpolating-gradients><span class=secno>9.3. </span> Interpolating |
2355 | 2350 | explicit form. |
2356 | 2351 |
|
2357 | 2352 | <li>Otherwise, if the direction is specified as a single keyword, change |
2358 | | - ‘<code class=property>top</code>’ to ‘<code |
| 2353 | + ‘<code class=property>bottom</code>’ to ‘<code |
2359 | 2354 | class=css>0deg</code>’, ‘<code |
2360 | | - class=property>right</code>’ to ‘<code |
| 2355 | + class=property>left</code>’ to ‘<code |
2361 | 2356 | class=css>90deg</code>’, ‘<code |
2362 | | - class=property>bottom</code>’ to ‘<code |
| 2357 | + class=property>top</code>’ to ‘<code |
2363 | 2358 | class=css>180deg</code>’, or ‘<code |
2364 | | - class=property>left</code>’ to ‘<code |
| 2359 | + class=property>right</code>’ to ‘<code |
2365 | 2360 | class=css>270deg</code>’. |
2366 | 2361 |
|
2367 | 2362 | <li>Otherwise, if the direction is specified as two keywords, change the |
2368 | 2363 | direction to an <angle> in the following ranges that would produce |
2369 | | - an equivalent gradient: for ‘<code class=css>top |
2370 | | - right</code>’ or ‘<code class=css>right top</code>’, |
| 2364 | + an equivalent gradient: for ‘<code class=css>bottom |
| 2365 | + left</code>’ or ‘<code class=css>left bottom</code>’, |
2371 | 2366 | the angle must be between 0deg and 90deg; for ‘<code |
2372 | | - class=css>bottom right</code>’ or ‘<code class=css>right |
2373 | | - bottom</code>’, the angle must be between 90deg and 180deg; for |
2374 | | - ‘<code class=css>bottom left</code>’ or ‘<code |
2375 | | - class=css>left bottom</code>’, the angle must be between 180deg |
2376 | | - and 270deg; for ‘<code class=css>top left</code>’ or |
2377 | | - ‘<code class=css>left top</code>’, the angle must be |
| 2367 | + class=css>top left</code>’ or ‘<code class=css>left |
| 2368 | + top</code>’, the angle must be between 90deg and 180deg; for |
| 2369 | + ‘<code class=css>top right</code>’ or ‘<code |
| 2370 | + class=css>right top</code>’, the angle must be between 180deg and |
| 2371 | + 270deg; for ‘<code class=css>bottom right</code>’ or |
| 2372 | + ‘<code class=css>right bottom</code>’, the angle must be |
2378 | 2373 | between 270deg and 360deg. |
2379 | 2374 | </ul> |
2380 | 2375 |
|
2381 | 2376 | <p>If both the start and end gradients had their direction specified with |
2382 | 2377 | keywords, and the absolute difference between the angles their |
2383 | 2378 | directions mapped to is greater than 180deg, add 360deg to the direction |
2384 | 2379 | of the gradient with the smaller angle. <span class=note>This ensures |
2385 | | - that a transition from, for example, "left" (270deg) to "top" (0deg) |
| 2380 | + that a transition from, for example, "right" (270deg) to "bottom" (0deg) |
2386 | 2381 | rotates the gradient a quarter-turn clockwise, as expected, rather than |
2387 | 2382 | rotating three-quarters of a turn counter-clockwise.</span></p> |
2388 | 2383 |
|
|
0 commit comments