Although I attempted to tag this question as [subjective] (without success), I understand that it may be unanswerable, involve common knowledge that I can't find, or simply be a matter of opinion.
Over the past few months, I have been creating commercial websites using a compiled (LESS) style sheet. Each time a background gradient is applied to an element, rules like the following are implemented:
body {
background: #592a0e;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZyIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjAiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzJkMTUwNyIgLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM4NTNmMTUiIC8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cpIiAvPjwvc3ZnPg==);
background: -webkit-gradient(linear, 0 0, 100% 0, from(#2d1507), to(#853f15));
background: -webkit-linear-gradient(left, #2d1507, #853f15);
background: -moz-linear-gradient(left, #2d1507, #853f15);
background: -ms-linear-gradient(left, #2d1507, #853f15);
background: -o-linear-gradient(left, #2d1507, #853f15);
background: linear-gradient(left, #2d1507, #853f15);
filter: progid:dximagetransform.microsoft.gradient(StartColorStr='#2d1507', EndColorStr='#853f15', GradientType=1);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#2d1507', EndColorStr='#853f15', GradientType=1)";
zoom: 1;
}
The SVG inline gradients included in LESS for IE9 compatibility prevent display issues caused by rectangular IE filters beyond rounded corners. However, despite not observing performance problems on similar sites, I am concerned about potential performance issues and wish to investigate thoroughly. For instance, this site uses the same background declaration 21 times across various elements.
Are there possible performance drawbacks due to complex CSS affecting rendering times, particularly on older mobile browsers? Could simplifying the CSS and consolidating SVG and CSS gradient declarations within the same rule set impact performance negatively by painting backgrounds twice?
Additionally, does parsing the inline SVG gradient burden non-IE browsers already familiar with CSS background gradients, potentially causing performance degradation upon page render or solely during initial CSS parsing?
- I welcome corrections if I overlooked important details or alternative approaches to address performance concerns related to CSS complexity and multiple background declarations.
If desired, I can share the LESS code responsible for compiling SVG gradients, although it's not directly relevant to my query.