The advantages here are that A) pixel images are about as safe as you get and B) if you want to stretch the image vertically, you can do so without having to produce a new image.Ī second alternative, only fractionally less safe but rather more efficient, is to replace the external PNG with a regular non-repeating linear gradient.
For example, given a desire to have a 5-on-5-off pattern (as seen in test #5), you could create a 10×10 PNG and then tile it something like this: background-image: url(5on5off.png) Now, as for useful alternatives to repeating-linear-gradient(): the most obvious (as in traditional, as in boring) method is to create a PNG or other pixel image and use the various background-related properties. ( color: inherit resulted in a shade we lovingly referred to as “monkey-vomit green”.) I think color is the one property that was probably stable from the outset, and even that had its quirks in Netscape 4, albeit in the handling of unknown values. Almost everything in CSS wasn’t ready for use, once upon a time. (Science!) Having found out that there are glitches and inconsistencies that are sensitive to element size, and seeing how wildly, almost hilariously wrong some engines have gotten this, I came to the conclusion that repeating-linear-gradient() isn’t yet ready for use. I was actually running an experiment where my starting hypothesis was that repeating gradients were safe to use.
So I wasn’t actually posting in search of a way around those problems, though in re-reading the post I can see where that impression might have developed. Chrome is the worst far worse than Safari, which I found fascinating. Badly, as it turns out, at least for many of them.
Primarily the test was to find out how browsers handle repeating-linear-gradient(). There were some suggestions for fixes both on the intertubes as well as the comments section of the post, so I should take a moment to explore the reasons for my post and test, and also what I would consider to be stable alternatives to the patterns I was creating. Yesterday, I shared a test of repeating linear gradients and the madness they embody in various browsers.
0 kommentar(er)
