CSS Shorthand Guide. Sunday Oct 23 2005 Ok. Let's set the record straight. There is no official guide for each and every CSS shorthand property value. So let's work together and put one together shall we? Ok. Straight to the business. Anytime I've ran into a specification (besides the confusing mess at the W3C), it turns into showing off a couple of examples and you're supposed to be set on your way. Background Backgrounds can be tricky. Background properties Believe it or not, all these properties can be combined into one single background property as follows: the background shorthand property The Unknown Often times developers find themselves wondering What if I leave out this value or that one? Default background property values Lesson learned: be careful on what you don't declare.
Background shorthand example (unexplicit) This would be the same as declaring the following values: background shorthand example (explicit) Font Font is perhaps the trickiest. Font properties default font property values or and . Border. The W3C CSS Validation Service.
CSSTidy. Introduction to CSS Shorthand. One of the many great possibilities in CSS is the use of shorthand properties, which let you specify several properties by using only one. If you have started to learn about CSS and implement it on your Web pages, you’ll immediately see the benefit of using these shorthand properties. CSS shorthand makes it even easier for you to apply style to your markup, and makes your CSS code more concise. In order for you to gain any value from this article you’ll need to know the common CSS properties and their values (see Kevin Yank’s "CSS Is Easy!
"). They will be used here, but not extensively explained. Browser support as indicated here for each shorthand property often only gives a general idea of actual compatibility. For more detailed information about the nature in which a particular property is buggy or partially supported under certain browsers, check the links at the end of this article. Back To Basics A CSS rule will often contain many property declarations. Common Properties Syntax Example. YUI Compressor. According to Yahoo! 's Exceptional Performance Team, 40% to 60% of Yahoo! 's users have an empty cache experience and about 20% of all page views are done with an empty cache (see this article by Tenni Theurer on the YUIBlog for more information on browser cache usage).
This fact outlines the importance of keeping web pages as lightweight as possible. Improving the engineering design of a page or a web application usually yields the biggest savings and that should always be a primary strategy. With the right design in place, there are many secondary strategies for improving performance such as minification of the code, HTTP compression, using CSS sprites, etc.
In terms of code minification, the most widely used tools to minify JavaScript code are Douglas Crockford's JSMIN, the Dojo compressor and Dean Edwards' Packer. Documentation: Detailed description of the YUI Compressor and how to use it. How does the YUI Compressor work? Using the YUI Compressor from the command line Additional notes.