Optimized CORE.css

Bookmark this on Delicious

The out-of-the-box Microsoft Office SharePoint Server (MOSS) CORE.css has 4347 lines of code and is 80.78 kilobytes or 82718.72 bytes! This file controls most of the look and feel of SharePoint and is referenced on every SharePoint page. Replacing the out-of-the-box CORE.css with an optimized CORE.css will increase SharePoint's performance and allow for faster page renderings. For access to a optimized CORE.css, please contact me.

What makes the optimized CORE.css optimized? If you are not familiar with the basic syntax and structure of a cascading style sheet, the following is all you need to know for the sake of technically outlining the issued that the out-of-the-box CORE.css suffers from.

Cascading Style Sheet Syntax

.selector {
	property: value;
}

What is wrong with the existing SharePoint CORE.css and how does the optimized CORE.css correct these issues?

The optimized CORE.css

All properties are rewritten in shorthand. For example, the background-color, background-image, background-repeat, background-attachment, background-position is in the W3C CSS valid background property. This standard technique can be applied to the following properties: background, font, border, margin, padding, outline and lists.

Current

selector {
	background-color: value;
	background-image: value;
	background-repeat: value;
	background-attachment: value;
	background-position: value;
} 

Optimized

selector {
	background: value value value value value;
} 

Selectors with common property values are grouped. For example, there are 70 selectors that share the same font-size and font-type. These can be grouped into 4 lines compared to 211! Additionally, making a global change to that font-type or font-size would have required 70 code edits to a file with 4,347 lines of code! The optimized CORE.css would only require one code edit. In summary, the maintenance is reduced dramatically.

Current

selector1 {
	font-family: value;
	font-size: value;
}
...thru...
selector70 {
	font-family: value;
	font-size: value;
} 

Optimized

selector1 ... selector70 {
	font-family: value;
	font-size: value;
}

In general, the CORE.css is poorly written with inconsistent syntax and un-needed property and value definitions. The entire cascading style sheet has been rewritten so that it can be more easily read by all browsers. In the example below, the link and visited pseudo-classes are not required and replaced with a simple class selector (the “A”). Additionally, the red green blue (RGB) color value (ff0000) is rewritten in shorthand (f00) and the font-weight is not needed as normal is this is the default value. Every piece of unnecessary information will increase the page rendering time.

Current (actual cut-and-paste example)

.srch-Page A:link,.srch-Page A:visited{
text-decoration:none;
color:#3764a0;
FONT-WEIGHT:normal;
}
.srch-Page a:hover{
color:#FF0000;
}

Optimized

.srch-Page A {
	text-decoration: none;
	color: #3764a0;
}
.srch-Page A:hover {
	color: #f00;
}