Comments on: Effective CSS Shorthand http://www.leigeber.com/2008/04/effective-css-shorthand/ This web development blog features fresh articles on JavaScript, AJAX, CSS, XHTML, PHP, Photoshop and more. Mon, 08 Sep 2008 13:42:45 +0000 http://wordpress.org/?v=2.5.1 By: Oyun Siteleri http://www.leigeber.com/2008/04/effective-css-shorthand/#comment-5535 Oyun Siteleri Mon, 11 Aug 2008 19:43:50 +0000 http://www.leigeber.com/?p=10#comment-5535 CSS "Cascading Style Sheets" Lessons css list style Properties and examples -- http://css-lessons.ucoz.com/list-css-examples.htm CSS “Cascading Style Sheets” Lessons
css list style Properties and examples — http://css-lessons.ucoz.com/list-css-examples.htm

]]> By: Piotr http://www.leigeber.com/2008/04/effective-css-shorthand/#comment-363 Piotr Wed, 30 Apr 2008 12:55:56 +0000 http://www.leigeber.com/?p=10#comment-363 @BTM It's cascade stylesheet, so no wonder than setting normal to * will affect all tags... @BTM
It’s cascade stylesheet, so no wonder than setting normal to * will affect all tags…

]]> By: The Bastard’s Kitchen » Home Page http://www.leigeber.com/2008/04/effective-css-shorthand/#comment-86 The Bastard’s Kitchen » Home Page Thu, 24 Apr 2008 19:24:26 +0000 http://www.leigeber.com/?p=10#comment-86 [...] of Navigation Links for Dynamic Pages (Ask the CSS Guy) A look at CSS Variables (Brajeshwar.com) Effective CSS Shorthand (Leigeber) Cross Browsing Testing - not free, but not expensive for anyone looking for a nice [...] [...] of Navigation Links for Dynamic Pages (Ask the CSS Guy) A look at CSS Variables (Brajeshwar.com) Effective CSS Shorthand (Leigeber) Cross Browsing Testing - not free, but not expensive for anyone looking for a nice [...]

]]> By: Hoja de ayuda de algunos trucos CSS » Cosas sencillas http://www.leigeber.com/2008/04/effective-css-shorthand/#comment-69 Hoja de ayuda de algunos trucos CSS » Cosas sencillas Wed, 23 Apr 2008 15:49:26 +0000 http://www.leigeber.com/?p=10#comment-69 [...] el artículo Ajustar el código CSS para hacerlo más efectivo. Donde mencionaba un artículo en LEIGEBER, titulado Effective CSS Shorthand, donde aparece algunos ejemplos de cómo emplear los códigos [...] [...] el artículo Ajustar el código CSS para hacerlo más efectivo. Donde mencionaba un artículo en LEIGEBER, titulado Effective CSS Shorthand, donde aparece algunos ejemplos de cómo emplear los códigos [...]

]]> By: » Effective CSS Shorthand Webcreatives http://www.leigeber.com/2008/04/effective-css-shorthand/#comment-47 » Effective CSS Shorthand Webcreatives Tue, 22 Apr 2008 05:43:05 +0000 http://www.leigeber.com/?p=10#comment-47 [...] Effective CSS Shorthand Related StuffCSS VariablesImproved Current Field Highlighting in FormsFade-in Spoiler RevealerThe 6 Most Important CSS Techniques You Need To KnowPure CSS Animated Progress BarUsing CSS and Mootools to simulate Flash horizontal navigation effectUsing CSS and Unordered List Items to Do Just About AnythingClean Tab Bar Digg-like using CSSIzzyMenu - Create your professional CSS/DHTML Menu in a minute!Most used CSS tricks [...] [...] Effective CSS Shorthand Related StuffCSS VariablesImproved Current Field Highlighting in FormsFade-in Spoiler RevealerThe 6 Most Important CSS Techniques You Need To KnowPure CSS Animated Progress BarUsing CSS and Mootools to simulate Flash horizontal navigation effectUsing CSS and Unordered List Items to Do Just About AnythingClean Tab Bar Digg-like using CSSIzzyMenu - Create your professional CSS/DHTML Menu in a minute!Most used CSS tricks [...]

]]> By: Web Development Blog » CSS Shorthand Cheat Sheet http://www.leigeber.com/2008/04/effective-css-shorthand/#comment-43 Web Development Blog » CSS Shorthand Cheat Sheet Mon, 21 Apr 2008 16:36:44 +0000 http://www.leigeber.com/?p=10#comment-43 [...] on the feedback from my article last Friday I thought it would be useful to create a CSS cheat-sheet. For those of you that are not familiar [...] [...] on the feedback from my article last Friday I thought it would be useful to create a CSS cheat-sheet. For those of you that are not familiar [...]

]]> By: Michael http://www.leigeber.com/2008/04/effective-css-shorthand/#comment-39 Michael Mon, 21 Apr 2008 14:15:03 +0000 http://www.leigeber.com/?p=10#comment-39 @Rob Whelan - Thanks for the comment. I agree that maintainability could be an issue in a group of developers where everyone is not familiar with shorthand. I also concede that some of the shorthand tags are easier than others, the font tag is by far the most complex. Also, the easy way to remember margins, padding and border is simply to start with the top value and work your way clockwise, if margin:10px 20px 0 confuses you then be a little more verbose and use 10px 20px 0 20px, still much simpler than typing out each property individually. Also, on the majority of these, order is irrelevant although the spec does often define an order. I would recommend using the orders that I use above. I do feel that it is worthwhile to learn and apply these tags, once you get a hang of it you will be glad you did. I will try and put a PDF cheat sheet together today for download, hopefully that will help. @Rob Whelan - Thanks for the comment. I agree that maintainability could be an issue in a group of developers where everyone is not familiar with shorthand. I also concede that some of the shorthand tags are easier than others, the font tag is by far the most complex. Also, the easy way to remember margins, padding and border is simply to start with the top value and work your way clockwise, if margin:10px 20px 0 confuses you then be a little more verbose and use 10px 20px 0 20px, still much simpler than typing out each property individually. Also, on the majority of these, order is irrelevant although the spec does often define an order. I would recommend using the orders that I use above. I do feel that it is worthwhile to learn and apply these tags, once you get a hang of it you will be glad you did. I will try and put a PDF cheat sheet together today for download, hopefully that will help.

]]> By: Rob Whelan http://www.leigeber.com/2008/04/effective-css-shorthand/#comment-36 Rob Whelan Mon, 21 Apr 2008 13:14:18 +0000 http://www.leigeber.com/?p=10#comment-36 The shorthand notation is definitely useful, but I often avoid it simply because I can't remember what order the elements must go in, or I'm not sure how it'll interpret missing parts. This threw me in your example, for instance: margin:10px 20px 0; (top right/left bottom) Ouch. Random! It could just as easily be (top/bottom right left)... I guess you just have to memorize how it will interpret only three values provided. Personally I'd never use that one... it's just too cruel to a maintenance programmer who has to figure out if it's a typo, or if not, how the devil it's actually working. The font shorthand declarations also get a bit scary... there's more than one property in there that can be a number, so you really have to know how the parsing is going to happen (and whoever's maintaining your code had better know as well). The shorthand notation is definitely useful, but I often avoid it simply because I can’t remember what order the elements must go in, or I’m not sure how it’ll interpret missing parts.

This threw me in your example, for instance:
margin:10px 20px 0;
(top right/left bottom)

Ouch. Random! It could just as easily be (top/bottom right left)… I guess you just have to memorize how it will interpret only three values provided. Personally I’d never use that one… it’s just too cruel to a maintenance programmer who has to figure out if it’s a typo, or if not, how the devil it’s actually working.

The font shorthand declarations also get a bit scary… there’s more than one property in there that can be a number, so you really have to know how the parsing is going to happen (and whoever’s maintaining your code had better know as well).

]]>