1 | # function-linear-gradient-no-nonstandard-direction
|
2 |
|
3 | Disallow direction values in `linear-gradient()` calls that are not valid according to the
|
4 | [standard syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Syntax).
|
5 |
|
6 |
|
7 | ```css
|
8 | .foo { background: linear-gradient(to top, #fff, #000); }
|
9 | /** ↑
|
10 | * This (optional) first argument is the "direction" */
|
11 | ```
|
12 |
|
13 | A valid and standard direction value is one of the following:
|
14 |
|
15 | - an angle
|
16 | - `to` plus a side-or-corner (`to top`, `to bottom`, `to left`, `to right`; `to top right`, `to right top`, `to bottom left`, etc.)
|
17 |
|
18 | A common mistake (matching outdated non-standard syntax) is to use just a side-or-corner without the preceding `to`.
|
19 |
|
20 | ## Options
|
21 |
|
22 | ### `true`
|
23 |
|
24 | The following patterns are considered violations:
|
25 |
|
26 |
|
27 | ```css
|
28 | .foo { background: linear-gradient(top, #fff, #000); }
|
29 | ```
|
30 |
|
31 |
|
32 | ```css
|
33 | .foo { background: linear-gradient(bottom, #fff, #000); }
|
34 | ```
|
35 |
|
36 |
|
37 | ```css
|
38 | .foo { background: linear-gradient(left, #fff, #000); }
|
39 | ```
|
40 |
|
41 |
|
42 | ```css
|
43 | .foo { background: linear-gradient(45, #fff, #000); }
|
44 | ```
|
45 |
|
46 |
|
47 | ```css
|
48 | .foo { background: linear-gradient(to top top, #fff, #000); }
|
49 | ```
|
50 |
|
51 | The following patterns are _not_ considered violations:
|
52 |
|
53 |
|
54 | ```css
|
55 | .foo { background: linear-gradient(to top, #fff, #000); }
|
56 | ```
|
57 |
|
58 |
|
59 | ```css
|
60 | .foo { background: linear-gradient(to bottom right, #fff, #000); }
|
61 | ```
|
62 |
|
63 |
|
64 | ```css
|
65 | .foo { background: linear-gradient(45deg, #fff, #000); }
|
66 | ```
|
67 |
|
68 |
|
69 | ```css
|
70 | .foo { background: linear-gradient(1.57rad, #fff, #000); }
|
71 | ```
|
72 |
|
73 |
|
74 | ```css
|
75 | /* Direction defaults to "to bottom" */
|
76 | .foo { background: linear-gradient(#fff, #000); }
|
77 | ```
|