It's worth remembering that different declarations can be used for different viewports. For example, although I might not mind the way the gradient pattern looks on smaller viewports:
I may choose not to use it for larger viewports (for example 768 px wide and greater). I can therefore just create a specific rule for the background gradient using media queries:
@media screen and (max-width: 768px) {
body {
background-color:white;
background-image:
radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px),
repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0,hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px,hsla(0, 0%, 87%, 0.31) 21px, hsla(0, 0%, 87%, 0.31) 25px,transparent 26px, transparent 50px);
background-size: 30px 30px, 90px 90px;
background-position: 0 0;
}
}Remember that media queries will allow you to specify every element differently for different viewports if you wish. It's all about presenting the best experience.
Tip
Writing CSS3 easily with CSS pre-processors
CSS3 rules currently require multiple vendor prefix properties. An
alternative to storing clippings of these prefixes for every declaration,
or using a JavaScript file to add prefixes in the browser are CSS preprocessors
like SASS and LESS. For example, using SASS with the
Compass plugin allows you to write a simple box shadow rule like this:
element { @include box-shadow; }. When the CSS is generated,
it includes a full stack of vendor specific rules along with the relevant
Internet Explorer hacks (if available). If this wasn't a big enough reason
to take a look, consider that pre-processors also add the ability to use
variables and programming conventions like if/while statements. Find
out more about SASS at http://sass-lang.com and LESS at http://lesscss.org