Efficient CSS with shorthand properties | 456 Berea Street - The Diigo Meta page

• 26 Oct 14
  

  Dustin Zeigler

  css shorthand

  • Quite a few shorthand properties are available – for details I suggest the W3C CSS specifications of the background, border, border-color, border-style, border sides (border-top, border-right, border-bottom, border-left), border-width, font, list-style, margin, outline, and padding properties.
  • Colours

  • when a colour consists of three pairs of hexadecimal digits, you can omit one digit from each pair:

      

    #000000 becomes #000, #336699 becomes #369.
  • Box dimensions
  • • property:value1;
     
    • property:value1 value2;
     
    • property:value1 value2 value3;
     
    • property:value1 value2 value3 value4;
  • • One value: all sides
     
    • Two values: top and bottom, right and left
     
    • Three values: top, right and left, bottom
     
    • Four values: top, right, bottom, left
  • Margin and padding
  • 1. margin-top:1em;
     
    2. margin-right:0;
     
    3. margin-bottom:2em;
     
    4. margin-left:0.5em;
     
      

    But this is much more efficient:

      
     
    1. margin:1em 0 2em 0.5em;
  • Borders
  • 1. border-width:1px;
     
    2. border-style:solid;
     
    3. border-color:#000;
     
      

    A more compact way would be to use the

    border shorthand:
      
     
    1. border:1px solid #000;
  • 1. border-width:1px 2px 3px 4px;
     
      

    is shorthand for

      
     
    1. border-top-width:1px;
     
    2. border-right-width:2px;
     
    3. border-bottom-width:3px;
     
    4. border-left-width:4px;
  • Backgrounds
  • 1. background-color:#f00;
     
    2. background-image:url(background.gif);
     
    3. background-repeat:no-repeat;
     
    4. background-attachment:fixed;
     
    5. background-position:0 0;
     
      

    can be condensed to

      
     
    1. background:#f00 url(background.gif) no-repeat fixed 0 0;

  • The initial values for the individual background properties are as follows:

      
     
    • color: transparent
     
    • image: none
     
    • repeat: repeat
     
    • attachment: scroll
     
    • position: 0% 0%
  • Fonts
  • 1. font-style:italic;
     
    2. font-variant:small-caps;
     
    3. font-weight:bold;
     
    4. font-size:1em;
     
    5. line-height:140%;
     
    6. font-family:"Lucida Grande",sans-serif;
     
      

    Can be combined into

      
     
    1. font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

  • When using the font shorthand you can omit any values except font-size and font-family – you always need to give values for those, and in that order. The initial values for the individual font properties are these:

      
     
    • font-style: normal
     
    • font-variant: normal
     
    • font-weight: normal
     
    • font-size: medium
     
    • line-height: normal
     
    • font-family: depends on the user agent
  • Lists
  • 1. list-style:none;
     
      

    instead of

      
     
    1. list-style-type:none;
  • 1. list-style:square inside url(image.gif);
     
      

    is shorthand for

      
     
    1. list-style-type:square;
     
    2. list-style-position:inside;
     
    3. list-style-image:url(image.gif);
  • Outlines
  • 1. outline-color:#f00;
     
    2. outline-style:solid;
     
    3. outline-width:2px;
     
      

    or like this:

      
     
    1. outline:#f00 solid 2px;

  20 more annotations...

• 15 May 14
  

  Christina Thorpe

  css shorthand

• 18 Oct 13
  

  Chris Z

  css

• 09 May 13
  

  Sebastian Weber

  css shorthand properties overview shorthand properties shorthandproperties webdesign webdev

• 04 Nov 12
  

  Kaspars Zemītis

  GOOD

• 28 Aug 12
  

  Neeraj Aggarwal
• 18 Nov 11
  

  toubia95

  css shorthand

• 10 May 10
  

  jans janxes

  css reference tips abreviaturas

• 10 Feb 09
  

  Marjorie Roswell

  css cheatsheet shorthand _delicious_

• 22 Aug 06
  

  alanvitor

  css reference

• 24 Apr 06
  

  Jason Reis

  css

• 31 Jan 06
  

  paulocoimbra

  Eficiência no CSS ou "Como escrever declarações agrupadas de valores".

  article design standards web tutorial css

• 22 Feb 05
  

  luistxo

  css-ko lerroak laburtzeko pistak

  css

Would you like to comment?

Join Diigo for a free account, or sign in if you are already a member.