While You Weren't Looking, CSS Gradients Got Better

Improvements to CSS gradients: Double position syntax simplifies gradient stripes

There is one in the list of Lea Verou's conic-gradient() polyfill functions that caught my attention:

Supports dual position syntax (same color stop point uses two positions as shortcuts for two consecutive color stop points with the same color)

Surprisingly, I recently discovered that most people don't even know that the two-position syntax of gradient stop points actually exists in the specification, so I decided to write an article about it.

According to the specification:

Specifying two positions makes it easier to create solid color "stripes" in a gradient without having to repeat the color twice.

I totally agree that this is the first thing that comes to mind when I understand this feature.

Suppose we want to get the following result: a gradient with many equal width vertical stripes (I got it from Chris' previous post):

The hexadecimal values ​​are: #5461c8, #c724b1, #e4002b, #ff6900, #f6be00, #97d700, #00ab84, and #00a3e0.

Let's first look at how to achieve this using CSS without using the dual stop point position!

We have eight stripes, each of which accounts for one-eighth of the gradient width. One-eighth of 100% is 12.5%, so we transition from one stripe to the next at multiples of that value.

This means that our linear-gradient() looks like this:

 <code>linear-gradient(90deg, #5461c8 12.5% /* 1*12.5% */, #c724b1 0, #c724b1 25% /* 2*12.5% */, #e4002b 0, #e4002b 37.5% /* 3*12.5% */, #ff6900 0, #ff6900 50% /* 4*12.5% */, #f6be00 0, #f6be00 62.5% /* 5*12.5% */, #97d700 0, #97d700 75% /* 6*12.5% */, #00ab84 0, #00ab84 87.5% /* 7*12.5% */, #00a3e0 0)</code>

Note that we do not need to repeat the percentage value of the stop position, because we automatically make a sharp transition whenever the stop position is smaller than the previous position. This is why it is always possible to use 0 (it is always less than any positive value) and use #c724b1 25%, #e4002b 0 instead of #c724b1 25%, #e4002b 25%, for example. If we decide to add two stripes and set the stop position to a multiple of 10%, this can make our lives easier in the future.

Not bad, especially compared to the code that gradient generators usually generate. However, if we decide that one of the stripes in the middle doesn't quite match the other stripes, changing it to something else means that it needs to be updated in two places.

Again, this is not a big problem, we can solve it without the help of a preprocessor:

 <code>$c: #5461c8 #c724b1 #e4002b #ff6900 #f6be00 #97d700 #00ab84 #00a3e0; @function get-stops($c-list) { $s-list: (); $n: length($c-list); $u: 100%/$n; @for $i from 1 to $n { $s-list: $s-list, nth($c-list, $i) $i*$u, nth($c-list, $i 1) 0 } @return $s-list } .strip { background: linear-gradient(90deg, get-stops($c))) }</code>

This will generate the exact CSS gradient we saw earlier, and now we don't have to modify it in two places anymore.

CodePen Demo

But even if the preprocessor prevents us from typing the same thing twice, it won't eliminate duplication in the generated code.

And we may not always want to use preprocessors. Putting aside the fact that some people are stubborn or have irrational fear or hatred for preprocessors, sometimes using loops feels a little silly.

For example, when we have almost nothing to loop! Suppose we want to get a simpler background pattern, such as a diagonal hash pattern, which I think is more common than over-exaggerated rainbow patterns, which may not be suitable for most websites at all.

This requires the use of repeating-linear-gradient(), which means that even if we don't have a very long list of hexadecimal values ​​as we did before, it requires some duplication:

 <code>repeating-linear-gradient(-45deg, #ccc /* can't skip this, repeating gradient won't work */, #ccc 2px, transparent 0, transparent 9px /* can't skip this either, tells where gradient repetition starts */)</code>

Here we cannot discard the first and last stop points, because these are exactly what indicates how the gradient repeats within the rectangle defined by background-size.

If you want to understand why it is better to use repeating-linear-gradient() instead of plain linear-gradient() combined with appropriate background-size to create such hash, check out another post I've written before.

This is where this feature comes into play – it allows us to avoid duplication in the final CSS code.

For the Rainbow Stripe case, our CSS becomes:

 <code>linear-gradient(90deg, #5461c8 12.5%, #c724b1 0 25%, #e4002b 0 37.5%, #ff6900 0 50%, #f6be00 0 62.5%, #97d700 0 75%, #00ab84 0 87.5%, #00a3e0 0)</code>

To recreate the hash, we just need:

 <code>repeating-linear-gradient(-45deg, #ccc 0 2px, transparent 0 9px)</code>

CodePen Demo

How is the support situation? Very good, you asked right! It's actually very good! It works with Safari, Chromium browsers (Edge is now included!), and Firefox. Pre-Chromium Edge and some mobile browsers may still be in the way you can, but if you don't have to worry about providing support for all browsers, or providing a fallback solution is OK, then you can start using it!

The above is the detailed content of While You Weren't Looking, CSS Gradients Got Better. For more information, please follow other related articles on the PHP Chinese website!