Re: [css-d] Improving your CSS performance
On 2/12/2011 5:02 AM, Gabriele Romanato wrote:
Some reflections collected during my experience on production web sites:
http://onwebdev.blogspot.com/2011/02/improving-your-css-performance.html
HTH :-)
http://www.css-zibaldone.com
http://www.css-zibaldone.com/test/ (English)
http://www.css-zibaldone.com/articles/ (English)
http://onwebdev.blogspot.com/ (English)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Gabriele, thank you for a very interesting and useful post.
I do, however, have a question regarding one of your examples:
Use shorthand properties
Shorthand properties should be used whenever it's possible instead of
single properties. So avoid this:
1. #box {
2. padding-top: 1em;
3. padding-bottom: 1em;
4. }
#box {
padding-top: 1em;
padding-bottom: 1em;
}
Use this instead:
1. #box {padding: 1em0;}
Are they both treated the same by browsers in that the first example
doesn't deal with padding-left and padding-right; letting any default
values flow through. The second example sets them both to 0.
Does this make a difference?
Thank you,
David
--
David J. Hark
HARK/INTERNET HELP,Inc.
N8GMQ 304-876-2607
P. O. Box 201
Shepherdstown, WV
25443-0201
http://www.dhark.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Improving your CSS performance
Hi David, this is a good question. It's not clear what values use browsers as their default for certain elements, because specs don't say much about it. For elements such as a div or headings, their values are always 0, so you got a good point here. For form elements, instead, the padding value depends on the element. For example, on input the amount of padding varies from browser to browser but, as far as I can tell, is always different from 0. HTH :-) http://www.css-zibaldone.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Improving your CSS performance
David, Shorthands override everything within their scope, effectively interrupting the cascade, so it's best to avoid them unless that's specifically what you're trying to do. In any case, re-specifying sub-properties via a short-hand over and over again through inheritance is actually detrimental to CSS performance — having more properties enforced unnecessarily is bad on that front. That said, the implications for how you design your page, calculate your cascades and write your stylesheet is likely far greater than the hit on browser rendering speed. Snook wrote a terror-monging piece about CSS performance and rendering flow here: http://snook.ca/archives/html_and_css/css-parent-selectors It's important to take this in the context of real world examples that make massive, extensive use of these bad practices: even on IE6 on old machines, any kind of resource-loading is more than most of the time far more significant. Regards, Barney Carroll barney.carr...@gmail.com 07594 506 381 On 14 February 2011 15:13, Gabriele Romanato gabriele.roman...@gmail.comwrote: Hi David, this is a good question. It's not clear what values use browsers as their default for certain elements, because specs don't say much about it. For elements such as a div or headings, their values are always 0, so you got a good point here. For form elements, instead, the padding value depends on the element. For example, on input the amount of padding varies from browser to browser but, as far as I can tell, is always different from 0. HTH :-) http://www.css-zibaldone.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Improving your CSS performance
On Monday 2011-02-14 15:27 +, Barney Carroll wrote: In any case, re-specifying sub-properties via a short-hand over and over again through inheritance is actually detrimental to CSS performance — having more properties enforced unnecessarily is bad on that front. In Gecko, the opposite is true: specifying a shorthand improves performance, although the effect is small enough it may be hard to measure in most cases. We compute style data in groups of properties, and the groups intentionally match some of the major shorthands (in particular, background, padding, border, outline, and margin; not font anymore, though we should fix that). When computing each group of style data, we look through rules from most-specific to least-specific until we have a specified value for all the properties in the group. Having a shorthand short-circuits this check by ensuring that there is a value for all the properties. -David -- L. David Baron http://dbaron.org/ Mozilla Corporation http://www.mozilla.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Improving your CSS performance
On 15/02/2011 3:34 AM, L. David Baron wrote:
On Monday 2011-02-14 15:27 +, Barney Carroll wrote:
In any case, re-specifying sub-properties via a
short-hand over and over again through inheritance is actually detrimental
to CSS performance — having more properties enforced unnecessarily is bad on
that front.
In Gecko, the opposite is true: specifying a shorthand improves
performance, although the effect is small enough it may be hard to
measure in most cases.
We compute style data in groups of properties, and the groups
intentionally match some of the major shorthands (in particular,
background, padding, border, outline, and margin; not font anymore,
though we should fix that). When computing each group of style
data, we look through rules from most-specific to least-specific
until we have a specified value for all the properties in the group.
Having a shorthand short-circuits this check by ensuring that there
is a value for all the properties.
-David
Hello David.
This is interesting and you mention all properties and most-specific.
Taking padding, background and border for example, would the following
CSS allow the computation to happen quicker.
[dir*=t] * {
padding-top: 0;
padding-bottom: 0;
background: none;
border: none;
}
[dir=ltr] ol,
[dir=ltr] ul {
padding-left: 40px;
padding-right: 0;
}
[dir=rtl] ol,
[dir=rtl] ul {
padding-left: 0;
padding-right: 40px;
}
It would require adding a 'dir' attribute to the HTML.
html dir=...
Or possibly using the 'lang' attribute with [lang=en].
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Improving your CSS performance
On Tuesday 2011-02-15 05:05 +1100, Alan Gresley wrote:
This is interesting and you mention all properties and
most-specific. Taking padding, background and border for example,
would the following CSS allow the computation to happen quicker.
[dir*=t] * {
padding-top: 0;
padding-bottom: 0;
background: none;
border: none;
}
[dir=ltr] ol,
[dir=ltr] ul {
padding-left: 40px;
padding-right: 0;
}
[dir=rtl] ol,
[dir=rtl] ul {
padding-left: 0;
padding-right: 40px;
}
It would require adding a 'dir' attribute to the HTML.
html dir=...
Or possibly using the 'lang' attribute with [lang=en].
The slowness of those selectors would probably overwhelm any
performance gains you'd get from the effect I mentioned.
-David
--
L. David Baron http://dbaron.org/
Mozilla Corporation http://www.mozilla.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Improving your CSS performance
Some reflections collected during my experience on production web sites: http://onwebdev.blogspot.com/2011/02/improving-your-css-performance.html HTH :-) http://www.css-zibaldone.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
