Re: [css-d] shorthand elements
On Mon, Sep 28, 2009 at 9:09 AM, T. R. Valentine trvalent...@gmail.comwrote: When using shorthand elements such as 'margin' or 'padding', the order is (IIRC) 2 values (top bottom) (left right) 4 values (top) (right) (bottom) (left) What about three values? Also, does anyone have a mnemonic to remember the order? -- T. R. Valentine Your friends will argue with you. Your enemies don't care. 'When I get a little money I buy books; and if any is left I buy food and clothes.' -- Erasmus __ css-discuss [cs...@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/ When using three values if you leave the fourth undeclared it will inherit from the previous declaration. If that doesn't make sense think of it like this. You declare *padding: 10px 4px 0;* You have values of* 10px top, 4px right, 0px bottom* and the left padding will *inherit* from the declaration you made on the right, in this case 4px. The easiest way for me to remember is that it goes clockwise. But I don't have any trick other than that. Regards, Jeff __ css-discuss [cs...@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] shorthand elements
I like the TROUBLE mnemonic = TRBL cheers, martin On Mon, Sep 28, 2009 at 3:16 PM, jeffrey morin rufus2...@gmail.com wrote: On Mon, Sep 28, 2009 at 9:09 AM, T. R. Valentine trvalent...@gmail.comwrote: When using shorthand elements such as 'margin' or 'padding', the order is (IIRC) 2 values (top bottom) (left right) 4 values (top) (right) (bottom) (left) What about three values? Also, does anyone have a mnemonic to remember the order? -- T. R. Valentine Your friends will argue with you. Your enemies don't care. 'When I get a little money I buy books; and if any is left I buy food and clothes.' -- Erasmus __ css-discuss [cs...@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/ When using three values if you leave the fourth undeclared it will inherit from the previous declaration. If that doesn't make sense think of it like this. You declare *padding: 10px 4px 0;* You have values of* 10px top, 4px right, 0px bottom* and the left padding will *inherit* from the declaration you made on the right, in this case 4px. The easiest way for me to remember is that it goes clockwise. But I don't have any trick other than that. Regards, Jeff __ css-discuss [cs...@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 [cs...@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] shorthand elements
2009/9/28 Martin Möller ceu...@gmail.com: I like the TROUBLE mnemonic = TRBL I like it! :-D Thanks -- T. R. Valentine Your friends will argue with you. Your enemies don't care. 'When I get a little money I buy books; and if any is left I buy food and clothes.' -- Erasmus __ css-discuss [cs...@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] shorthand elements
At 8:09 AM -0500 9/28/09, T. R. Valentine wrote: When using shorthand elements such as 'margin' or 'padding', the order is (IIRC) 2 values (top bottom) (left right) 4 values (top) (right) (bottom) (left) What about three values? Also, does anyone have a mnemonic to remember the order? -- T. R. Valentine opinion I find reading other code (as well as mine later) much easier if longhand elements are used. After 40+ years of programming I can say the less cryptic the code, the better it is. This is because of self-documentation -- in short, documentation matters. Contrary to some opinions, shortening css files by a few bytes here, or there, doesn't makes code load any quicker. With today's speeds, there is no significant load-time difference between a verbose css file and a cryptic one. So, there really isn't any reason to make code cryptic. Of course, some may argue that they can recognize shorthand elements with ease, and thus they type less -- but they can't argue that everyone who reviews their code will recognize shorthand elements with the same ease and that should be sufficient reason to dispense with shorthand elements and allow the code to self document. /opinion Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [cs...@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] shorthand elements
On Monday 28 September 2009 09:09:34 am T. R. Valentine wrote: When using shorthand elements such as 'margin' or 'padding', the order is (IIRC) 2 values (top bottom) (left right) 4 values (top) (right) (bottom) (left) What about three values? Also, does anyone have a mnemonic to remember the order? 3 values is: first value: is the top. second value is the right and left third value is the bottom -- Blessings, David M. http://www.dmcentral.net __ css-discuss [cs...@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] shorthand elements
Also, does anyone have a mnemonic to remember the order? I imagine a clock and I do my clockwise pointing finger technique. :) First value: Indicator pointing to the 12 Second Value: Indicator pointing to the 3 Third Value: Indicator pointing to the 6 Fourth Value: Indicator pointing to the 9 With two values: First Value: 12 and 6 Second Value: 3 and 9 With three values: Doesn't work that much. :) Regards, Márcio __ css-discuss [cs...@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] shorthand elements
--- On Mon, 9/28/09, tedd tedd.sperl...@gmail.com wrote: opinion I find reading other code (as well as mine later) much easier if longhand elements are used. After 40+ years of programming I can say the less cryptic the code, the better it is. This is because of self-documentation -- in short, documentation matters. /opinion Hi tedd, Interesting. To be honest, I find: margin: 10px 20px; far quicker to read, understand, and visualise than: margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; so what you say definitely holds for some of the time, but doesn't hold the rest of the time. I don't know quite what we should conclude from that though :) I remember I found the shorthand - particularly the 3-value version - annoying at first, but it now seems like second nature. I'd draw the analogy with the ternary operator in c-like languages. It's pretty confusing for beginners to understand but much more readable for those who are familiar with it. - Bobby __ css-discuss [cs...@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] shorthand elements
I agree. I have to write some styles on the fly i.e. div style=border: 1px soilid red/div and shorthand comes in very useful. However I only know a few so anyone with a useful to all of the ones available would be really appreciated. div style=background: url(img/pic.png) no-repeat top right;. As for the three value, I can get my head around it but just doesn't seem visually balanced in the code to leave one out, even if it's not needed. chris On 29/09/2009, at 12:07 AM, Bobby Jack wrote: --- On Mon, 9/28/09, tedd tedd.sperl...@gmail.com wrote: opinion I find reading other code (as well as mine later) much easier if longhand elements are used. After 40+ years of programming I can say the less cryptic the code, the better it is. This is because of self-documentation -- in short, documentation matters. /opinion Hi tedd, Interesting. To be honest, I find: margin: 10px 20px; far quicker to read, understand, and visualise than: margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; so what you say definitely holds for some of the time, but doesn't hold the rest of the time. I don't know quite what we should conclude from that though :) I remember I found the shorthand - particularly the 3-value version - annoying at first, but it now seems like second nature. I'd draw the analogy with the ternary operator in c-like languages. It's pretty confusing for beginners to understand but much more readable for those who are familiar with it. - Bobby __ css-discuss [cs...@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 [cs...@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] shorthand elements
Also, does anyone have a mnemonic to remember the order? I remember it by the word TRouBLe (top-right-bottom-left) --- Tranversal Corporation Ltd will be exhibiting at CIPD Annual conference exhibition 2009 in Manchester between 17 - 19 November, stand 510. __ css-discuss [cs...@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/
