Introduction
Since all Intersoft's components and new architectures are dealing with Web technology, Intersoft has decided to develop its own technology in order to optimize the output of the component to produce smaller output size. This optimizing technology solves many scalability and performance issues found in today's web application. CSSOptimizer enables all Intersoft's components to use abbreviated class name (optimizing up to 70%), and automatic CSS class grouping which remove repetitive styles and group them into as few selector as possible. For instance, a generated Style currently produces its name as "WebGrid1-LayoutSettings-FrameStyle" which is considered quite a long string. Now it can be as short as "W2703". The CSS optimization can be applied automatically without code changes to any member of WebUI Studio.NET family, whether it is WebGrid, or WebCombo, or WebDesktop. This was made possible because the CSSOptimizer technology is built on the Framework level.
Comparison
The following shows a comparison between original generated css styles with optimized css styles.
Original css output
<style
id="ISWebUI_Styles" type="text/css">
.WebDesktopManager1-FrameStyle
{background-color:WhiteSmoke;}
.WebDesktopManager1-WindowSettings-WindowStyle-Normal
{background-color:White; font-family:Tahoma; ...}
.WebDesktopManager1-WindowSettings-WindowStyle-Active
{background-color:White; font-family:Tahoma; ...}
.WebDesktopManager1-WindowSettings-CaptionStyle-Normal
{background-color:Gray; font-family:Tahoma; ...}
.WebDesktopManager1-WindowSettings-CaptionStyle-Active
{background-color:Navy; font-family:Tahoma; ...}
...
</style>
Optimized css output
<
style id="ISWebUI_Styles" type="text/css">
.W4615{background-color:WhiteSmoke;}
.W8710{background-color:White; font-family:Tahoma; ...}
.W8686{background-color:White; font-family:Tahoma; ...}
.W8795{background-color:White; font-family:Tahoma; ...}
.W8129{background-color:White; font-family:Tahoma; ...}
<style>
 |
Notice that each automatic-generated style name will be shortened to use 5 unique digit characters when optimized. With this capability, you can put any number of instances regardless of the control's depth without has to worry the length of generated style name. |
Features
CSS Optimizer technology features tight integration with other architectures listed in the following:
- Theme Architecture
- WebUI Style Manager
- Layout Manager
- Style Preview
How to enable CSS Optimizer
You can enable CSS Optimizer only at application-level by configuring the key in web.config such as shown in the following sample.
<
add key="ISNet.WebUI.v3_0_5000.OptimizeCss" value="true"></add>
<
add key="ISNet.WebUI.v3_0_5000.OptimizeCssName" value="true"></add>
|
When Intersoft's Theme is also applied in the web application, the controls will obtain the setting defined in the Theme configuration file (istheme.config). |
Supported Products
This section lists the products which have been implemented to support Xml Compressor.
- WebGrid.NET Enterprise 4.0 for Visual Studio 2005 (Build 4.0.6200.257+)
- WebCombo.NET 3.0 for Visual Studio 2005 (Build 3.0.5000.257+)
- WebInput.NET 2.0 for Visual Studio 2005 (Build 2.0.5000.2511+)
- WebDesktop.NET 1.0 for Visual Studio 2005 (Build 1.0.2006.1+)
Benefits
The following lists some of the top benefits offered by CSS Optimizer:
- Faster page load performance with reduced output size.
- Enables better scalability and extensibility as the application become richer in features.
- Provides better performance and usability when used in conjunction with Theme architecture.
- Reduced output size up to 60% since the css class name is not only affecting the style definition. It also properly applied to the Xml-based client storage and control's rendering output.