Cleanup CSS code

I would like to see a "Cleanup CSS Code" option similar to the "Cleanup HTML code?" already found in vbSEO.

Having the CSS optimized it will load faster and save bandwidth.

For example (vbseo CSS):

/* vBulletin 3 CSS For Style 'Conosuceso' (styleid: 25) */
body
{
background: #E1E1E1;
color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin: 5px 20px 10px 20px;
padding: 0px;
}
a:link, body_alink
{
color: #22229C;
}
a:visited, body_avisited
{
color: #22229C;
}
a:hover, a:active, body_ahover
{
color: #22229C;
text-decoration: none;
}
.page
{
color: #000000;
}
td, th, p, li
{
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tborder
{
background: #E1E1E1;
color: #000000;
border: 1px solid #465786;
}
.tcat
{
background: #465786;
color: #FFFFFF;
font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tcat a:link, .tcat_alink
{
color: #ffffff;
text-decoration: none;
}
.tcat a:visited, .tcat_avisited
{
color: #ffffff;
text-decoration: none;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
color: #E0E0F6;
text-decoration: underline;
}
.thead
{
background: #6E7A9A;
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.thead a:link, .thead_alink
{
color: #FFFFFF;
}
.thead a:visited, .thead_avisited
{
color: #FFFFFF;
}
.thead a:hover, .thead a:active, .thead_ahover
{
color: #E0E0F6;
}
.tfoot
{
background: #465786;
color: #E0E0F6;
}
.tfoot a:link, .tfoot_alink
{
color: #E0E0F6;
}
.tfoot a:visited, .tfoot_avisited
{
color: #E0E0F6;
}
.tfoot a:hover, .tfoot a:active, .tfoot_ahover
{
color: #FFFFFF;
}
.alt1, .alt1Active
{
background: #FFFFFF;
color: #000000;
border-right: solid #EFEFEF 1px;
}
.alt2, .alt2Active
{
background: #EFEFEF;
color: #000000;
border-right: solid #FFFFFF 1px;
}
td.inlinemod
{
background: #FFFFCC;
color: #000000;
}
.wysiwyg
{
background: #F5F5FF;
color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
textarea, .bginput
{
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.button
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
select
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
option, optgroup
{
font-size: 11px;
font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.smallfont
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.time
{
color: #666686;
}
.navbar
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.highlight
{
color: #FF0000;
font-weight: bold;
}
.fjsel
{
background: #3E5C92;
color: #E0E0F6;
}
.fjdpth0
{
color: #000000;
}
.panel
{
background: #F2F2F2;
color: #000000;
padding: 10px;
}
.panelsurround
{
background: #F2F2F2;
color: #000000;
}
legend
{
color: #22229C;
font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.vbmenu_control
{
background: #465786;
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 3px 6px 3px 6px;
white-space: nowrap;
}
.vbmenu_control a:link, .vbmenu_control_alink
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_control a:visited, .vbmenu_control_avisited
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover
{
color: #FFFFFF;
text-decoration: underline;
}
.vbmenu_popup
{
background: #FFFFFF;
color: #000000;
border: 1px solid #465786;
}
.vbmenu_option
{
background: #FFFFFF;
color: #000000;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
white-space: nowrap;
cursor: pointer;
}
.vbmenu_option a:link, .vbmenu_option_alink
{
color: #22229C;
text-decoration: none;
}
.vbmenu_option a:visited, .vbmenu_option_avisited
{
color: #22229C;
text-decoration: none;
}
.vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover
{
color: #000000;
text-decoration: none;
}
.vbmenu_hilite
{
background: #EAEAEA;
color: #000000;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
white-space: nowrap;
cursor: pointer;
}
.vbmenu_hilite a:link, .vbmenu_hilite_alink
{
color: #22229C;
text-decoration: none;
}
.vbmenu_hilite a:visited, .vbmenu_hilite_avisited
{
color: #22229C;
text-decoration: none;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover
{
color: #000000;
text-decoration: none;
}
/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt; }
/* ***** small padding on 'thead' elements ***** */
td.thead, div.thead { padding: 4px; }
/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }
/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }
/* ***** don't change the following ***** */
form { display: inline; }
label { cursor: default; }
.normal { font-weight: normal; }
.inlineimg { vertical-align: middle; }
.bullseye {
margin-top: 28px;
background-image: url(../../images1/vbseo/bullseye.gif);
background-position: center top;
background-color: #FFFFFF;
margin-right:auto;
margin-left:auto;
}
.header {
height: 108px;
position: relative
}
.header h1 {
letter-spacing: -3px;
font-size: 40px;
left: 99px;
position: absolute;
top: 23px;
margin: 0px
}
.header p {
font-family: arial, helvetica, sans-serif;
font-size: 11px;
position: absolute;
top: 63px;
left: 101px;
margin: 0px
}
.header img {
left: 20px;
position: absolute;
top: 16px;
margin: 0px
}
.logo a,.logo a:visited {
text-decoration: none;
color: #000000
}
.header ul {
right: 18px;
top: 52px;
position: absolute;
margin: 0px;
}
.header li {
display: inline;
list-style-type: none;
padding-right: 5px;
font-weight: bold;
font-size: 110%
}
.buy {
width: 356px;
height: 31px;
right: 28px;
position: absolute;
top: 20px;
border-bottom: 1px solid #DBDBDB
}
.buy p {
font-family: verdana, helvetica, sans-serif;
font-weight: bold;
top: 0px;
left: 180px
}
.buy img {
top: 3px;
left: 0px
}
.image_headers {
float: right;
margin: 0px;
padding: 0px;
}
.page h2 {
text-align: center;
margin-top: 0px;
font-family: arial,sans-serif
}
.navbar h3 {
font-family: arial,sans-serif;
font-size: 16px;
color: #000000;
padding-top: 1px;
margin: 0px
}
.topmenu {
position: absolute;
top: 5px;
height: 28px;
background-color: #9CCE21;
margin-right: 40px
}
.topmenu table {
background: url(../../images1/vbseo/corner_top_right.gif) no-repeat top right
}
.topmenu td {
white-space: nowrap;
}
.topmenu_left {
width: 100%;
text-align: left;
padding-left: 12px;
padding-top: 5px;
background: url(../../images1/vbseo/corner_top_left.gif) no-repeat top left
}
.topmenu_control {
padding-right: 12px;
padding-left: 0px;
padding-bottom: 3px;
padding-top: 3px;
white-space; nowrap;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
color: #ffffff
}
.topmenu_control a:link {
color: #000000;
text-decoration: none
}
.topmenu_control_alink {
color: #000000;
text-decoration: none
}
.topmenu_control a:visited {
color: #000000;
text-decoration: none
}
.topmenu_control_avisited {
color: #000000;
text-decoration: none
}
.topmenu_control a:hover {
color: #000000;
text-decoration: underline
}
.topmenu_control a:active {
color: #000000;
text-decoration: underline
}
.topmenu_control_ahover {
color: #000000;
text-decoration: underline
}
#relevant_replacement {
font-size: 11px;
float: left;
width: 240px;
line-height: 1.5em;
padding-top: 15px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
background: url(../../images/welcome_headers/about.gif) no-repeat top left;
text-align: justify;
word-wrap: break-word;
overflow: hidden
}
.welcome_headers {
float: right;
width: 580px;
height: 150px;
padding-right: 14px;
background: url(../../images/welcome_headers/bg_right.gif) no-repeat right
}
.welcome_headers table {
background: url(../../images/welcome_headers/bg.jpg) repeat-x;
height: 150px
}
.welcome_headers td {
background: url(../../images/welcome_headers/bg_left.gif) no-repeat left;
vertical-align: top;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: -4px
}
.welcome_headers p {
font-size: 11px;
margin: 0px 0px 8px 0px;
}
.welcome_headers li {
font-size: 11px
}
.welcome_headers ul {
margin-top: 0px;
margin-bottom: -4px
}
.welcome_headers a:link {
font-weight: bold;
color: #22229C;
text-decoration: none
}
.welcome_headers a:visited {
font-weight: bold;
color: #22229C;
text-decoration: none
}
.welcome_headers a:hover {
font-weight: bold;
color: #22229C;
text-decoration: underline
}
.welcome_headers a:active {
font-weight: bold;
color: #22229C;
text-decoration: underline
}
.bottommenu_page {
color: #000000;
background: #9CCE21 url(../../images/vbseo/corner_bottom_left.gif) no-repeat bottom left
}
.bottommenu_page td {
padding-right: 12px;
padding-left: 12px
}
.bottommenu_tfoot {
color: #000000;
background: url(../../images/vbseo/corner_bottom_right.gif) no-repeat bottom right
}
.bottommenu_tfoot A:link {
color: #000000;
text-decoration: none
}
.bottommenu_tfoot_alink {
color: #000000;
text-decoration: none
}
.bottommenu_tfoot A:visited {
color: #000000;
text-decoration: none
}
.bottommenu_tfoot_avisited {
color: #000000;
text-decoration: none
}
.bottommenu_tfoot A:hover {
color: #000000;
text-decoration: underline
}
.bottommenu_tfoot A:active {
color: #000000;
text-decoration: underline
}
.bottommenu_tfoot_ahover {
color: #000000;
text-decoration: underline
}
.smallerfont {
font-size: 10px
}
.new {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
color: #ffffff;
background: #009900;
text-decoration: none;
}
.promo {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
color: #ffffff;
background: #0000FF;
text-decoration: none;
}
.vbseo_moderator {
font-weight: bold;
}
.vbseo_germany {
font-weight: bold;
}
.vbseo_team,.vbseo_team a,.vbseo_team a:visited,.vbseo_team a:hover {
font-weight: bold;
font-style: oblique;
text-decoration: none;
color: #555555
}
.pre-release_team,.pre-release_team a,.pre-release_team a:visited,.pre-release_team a:hover {
font-weight: bold;
text-decoration: none;
color: #009900
}
.vbhacker,.vbhacker a,.vbhacker a:visited,.vbhacker a:hover {
font-weight: bold;
text-decoration: none;
color: #7700BB
}
/* Sub-forums-list in Columns */
.subforum {
padding:0;
margin:0
}
.subforum li {
display:inline;
width:200px;
float:left;
padding-left:0.5em;
padding-right:0.5em
}
.clear {
clear:both
}
/* End Sub-forums-list in Columns */

To optimized like this:

body,.tborder{background:#e1e1e1}body,.page,.tbord er,.alt1Active,.alt1,.alt2Active,.alt2,td.inlinemo d,.wysiwyg,.fjdpth0,.panel,.panelsurround,.vbmenu_ popup,.vbmenu_option,.vbmenu_option_ahover,.vbmenu _option a:active,.vbmenu_option a:hover,.vbmenu_hilite,.vbmenu_hilite_ahover,.vbme nu_hilite a:active,.vbmenu_hilite a:hover,.logo a:visited,.logo a,.navbar h3,.topmenu_control a:link,.topmenu_control_alink,.topmenu_control a:visited,.topmenu_control_avisited,.topmenu_contr ol a:hover,.topmenu_control a:active,.topmenu_control_ahover,.bottommenu_page, .bottommenu_tfoot,.bottommenu_tfoot A:link,.bottommenu_tfoot_alink,.bottommenu_tfoot A:visited,.bottommenu_tfoot_avisited,.bottommenu_t foot A:hover,.bottommenu_tfoot A:active,.bottommenu_tfoot_ahover{color:#000}body, li,p,th,td,.wysiwyg,.bginput,textarea{font:10pt verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif}body{margin:5px 20px 10px 20px}body,.image_headers,.subforum{padding:0}body_ alink,a:link,body_avisited,a:visited,body_ahover,a :active,a:hover,legend,.vbmenu_option_alink,.vbmen u_option a:link,.vbmenu_option_avisited,.vbmenu_option a:visited,.vbmenu_hilite_alink,.vbmenu_hilite a:link,.vbmenu_hilite_avisited,.vbmenu_hilite a:visited,.welcome_headers a:link,.welcome_headers a:visited,.welcome_headers a:hover,.welcome_headers a:active{color:#22229c}body_ahover,a:active,a:hove r,.tcat_alink,.tcat a:link,.tcat_avisited,.tcat a:visited,.vbmenu_control_alink,.vbmenu_control a:link,.vbmenu_control_avisited,.vbmenu_control a:visited,.vbmenu_option_alink,.vbmenu_option a:link,.vbmenu_option_avisited,.vbmenu_option a:visited,.vbmenu_option_ahover,.vbmenu_option a:active,.vbmenu_option a:hover,.vbmenu_hilite_alink,.vbmenu_hilite a:link,.vbmenu_hilite_avisited,.vbmenu_hilite a:visited,.vbmenu_hilite_ahover,.vbmenu_hilite a:active,.vbmenu_hilite a:hover,.pagenav a,.logo a:visited,.logo a,.topmenu_control a:link,.topmenu_control_alink,.topmenu_control a:visited,.topmenu_control_avisited,.welcome_heade rs a:link,.welcome_headers a:visited,.bottommenu_tfoot A:link,.bottommenu_tfoot_alink,.bottommenu_tfoot A:visited,.bottommenu_tfoot_avisited,.new,.promo,. vbseo_team a:hover,.vbseo_team a:visited,.vbseo_team a,.vbseo_team,.pre-release_team a:hover,.pre-release_team a:visited,.pre-release_team a,.pre-release_team,.vbhacker a:hover,.vbhacker a:visited,.vbhacker a,.vbhacker{text-decoration:none}.tborder,.vbmenu_popup{border:1px solid #465786}.tcat,.tfoot,.vbmenu_control{background:#4 65786}.tcat,.tcat_alink,.tcat a:link,.tcat_avisited,.tcat a:visited,.thead,.thead_alink,.thead a:link,.thead_avisited,.thead a:visited,.tfoot_ahover,.tfoot a:active,.tfoot a:hover,.vbmenu_control,.vbmenu_control_alink,.vbm enu_control a:link,.vbmenu_control_avisited,.vbmenu_control a:visited,.vbmenu_control_ahover,.vbmenu_control a:active,.vbmenu_control a:hover,.topmenu_control,.new,.promo{color:#fff}.t cat{font:bold 10pt verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif}.tcat_ahover,.tcat a:active,.tcat a:hover,.thead_ahover,.thead a:active,.thead a:hover,.tfoot,.tfoot_alink,.tfoot a:link,.tfoot_avisited,.tfoot a:visited,.fjsel{color:#e0e0f6}.tcat_ahover,.tcat a:active,.tcat a:hover,.vbmenu_control_ahover,.vbmenu_control a:active,.vbmenu_control a:hover,.topmenu_control a:hover,.topmenu_control a:active,.topmenu_control_ahover,.welcome_headers a:hover,.welcome_headers a:active,.bottommenu_tfoot A:hover,.bottommenu_tfoot A:active,.bottommenu_tfoot_ahover{text-decoration:underline}.thead{background:#6e7a9a}.th ead,.vbmenu_control,.topmenu_control{font:bold 11px tahoma,verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif}.alt1Active,.alt1,.vbmenu_popup,.vbmenu_opti on{background:#fff}.alt1Active,.alt1{border-right:solid #efefef 1px}.alt2Active,.alt2{background:#efefef;border-right:solid #fff 1px}td.inlinemod{background:#ffc}.wysiwyg{backgrou nd:#f5f5ff}.button,select,.smallfont,.navbar,.vbme nu_option,.vbmenu_hilite{font:11px verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif}optgroup,option{font:11px verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif}.time{color:#666686}.highlight{color:#f00}.h ighlight,.header li,.buy p,.welcome_headers a:link,.welcome_headers a:visited,.welcome_headers a:hover,.welcome_headers a:active,.vbseo_moderator,.vbseo_germany,.vbseo_te am a:hover,.vbseo_team a:visited,.vbseo_team a,.vbseo_team,.pre-release_team a:hover,.pre-release_team a:visited,.pre-release_team a,.pre-release_team,.vbhacker a:hover,.vbhacker a:visited,.vbhacker a,.vbhacker{font-weight:bold}.fjsel{background:#3e5c92}.panel,.pane lsurround{background:#f2f2f2}.panel{padding:10px}l egend{font:11px tahoma,verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif}.vbmenu_control{padding:3px 6px 3px 6px}.vbmenu_control,.vbmenu_option,.vbmenu_hilite, .topmenu td{white-space:nowrap}.vbmenu_option,.vbmenu_hilite{cursor: pointer}.vbmenu_hilite{background:#eaeaea}.biguser name{font-size:14pt}div.thead,td.thead{padding:4px}.pagenav td{padding:2px 4px 2px 4px}.fieldset{margin-bottom:6px}.fieldset li,.fieldset p,.fieldset td,.fieldset,#relevant_replacement,.welcome_header s p,.welcome_headers li{font-size:11px}form,.header li,.subforum li{display:inline}label{cursor:default}.normal{fon t-weight:normal}.inlineimg{vertical-align:middle}.bullseye{background:#fff url(../../images1/vbseo/bullseye.gif) center top;margin-top:28px;margin-right:auto;margin-left:auto}.header{height:108px;position:relative}. header h1{letter-spacing:-3px;font-size:40px;left:99px;top:23px}.header h1,.header p,.header img,.header ul,.buy,.topmenu{position:absolute}.header h1,.header p,.header img,.header ul,.image_headers,.navbar h3,.subforum{margin:0}.header p{font:11px arial,helvetica,sans-serif;top:63px;left:101px}.header img{left:20px;top:16px}.header ul{right:18px;top:52px}.header li{list-style-type:none;padding-right:5px;font-size:110%}.buy{width:356px;height:31px;right:28px; top:20px;border-bottom:1px solid #dbdbdb}.buy p{font-family:verdana,helvetica,sans-serif;top:0;left:180px}.buy img{top:3px;left:0}.image_headers,.welcome_headers {float:right}.page h2{text-align:center;font-family:arial,sans-serif}.page h2,.welcome_headers ul{margin-top:0}.navbar h3{font:16px arial,sans-serif;padding-top:1px}.topmenu{background:#9cce21;top:5px;height :28px;margin-right:40px}.topmenu table{background:url(../../images1/vbseo/corner_top_right.gif) no-repeat top right}.topmenu_left{width:100%;text-align:left;padding-top:5px;background:url(../../images1/vbseo/corner_top_left.gif) no-repeat top left}.topmenu_left,.bottommenu_page td{padding-left:12px}.topmenu_control{padding:3px 12px 3px 0;white-space;nowrap}#relevant_replacement{padding:15px 10px 10px;width:240px;line-height:1.5em;background:url(../../images/welcome_headers/about.gif) no-repeat top left;text-align:justify;word-wrap:break-word;overflow:hidden}#relevant_replacement,.subfor um li{float:left}.welcome_headers{width:580px;padding-right:14px;background:url(../../images/welcome_headers/bg_right.gif) no-repeat right}.welcome_headers,.welcome_headers table{height:150px}.welcome_headers table{background:url(../../images/welcome_headers/bg.jpg) repeat-x}.welcome_headers td{padding:10px -4px 10px 10px;background:url(../../images/welcome_headers/bg_left.gif) no-repeat left;vertical-align:top}.welcome_headers p{margin:0 0 8px 0}.welcome_headers ul{margin-bottom:-4px}.bottommenu_page{background:#9cce21 url(../../images/vbseo/corner_bottom_left.gif) no-repeat bottom left}.bottommenu_page td{padding-right:12px}.bottommenu_tfoot{background:url(../../images/vbseo/corner_bottom_right.gif) no-repeat bottom right}.smallerfont{font-size:10px}.new,.promo{font:9px arial,helvetica,sans-serif bold}.new{background:#090}.promo{background:#00f}. vbseo_team a:hover,.vbseo_team a:visited,.vbseo_team a,.vbseo_team{font-style:oblique;color:#555}.pre-release_team a:hover,.pre-release_team a:visited,.pre-release_team a,.pre-release_team{color:#090}.vbhacker a:hover,.vbhacker a:visited,.vbhacker a,.vbhacker{color:#70b}.subforum li{width:200px;padding-left:0.5em;padding-right:0.5em}.clear{clear:both}

If other members like this idea, please bump this thread :-)

I use the following Tool: isnoop.net CSS Superdouche
Look to my CSS: http://www.schachfeld.de/clientscrip...6d5a-00001.css
Schach: Schachfeld.de - Schach spielen - Online Schach - Schachregeln - Schachspiel

PHP Code:

body{background-color:#E1E1E2;color:#000000;font:10pt verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;margin:5px 10px 10px 10px;padding:0px;}a:link,a:visited{color:#22229C;}a:hover,a:active{color:#FF4400;}.page{background-color:#FFFFFF;color:#000000;}td,th,p,li,textarea,.bginput{font:10pt verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;}.tborder{background-color:#D1D1E1;color:#000000;border:1px solid #0B198C;}.tcat{background:#869BBF url(../../images/gradients/gradient_tcat.gif) repeat-x top left;color:#FFFFFF;font:bold 10pt verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;}.tcat a:link,.tcat a:visited{color:#ffffff;text-decoration:none;}.tcat a:hover,.tcat a:active{color:#FFFF66;text-decoration:underline;}.thead{background:#5C7099 url(../../images/gradients/gradient_thead.gif) repeat-x top left;color:#FFFFFF;font:bold 11px tahoma,verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;}.thead a:link,.thead a:visited{color:#FFFFFF;}.thead a:hover,.thead a:active{color:#FFFF00;}.tfoot{background-color:#3E5C92;color:#E0E0F6;}.tfoot a:link,.tfoot a:visited{color:#E0E0F6;}.tfoot a:hover,.tfoot a:active{color:#FFFF66;}.alt1,.alt1Active{background-color:#F5F5FF;color:#000000;}.alt2,.alt2Active{background-color:#E1E4F2;color:#000000;}.alt3{background-color:#D5D8E5;color:#000000;}.wysiwyg{background-color:#F5F5FF;color:#000000;font:10pt verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;}.button,select,.smallfont,.navbar{font:11px verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;}option,optgroup{font-size:11px;font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;}.time{color:#666686;}#header p{float:right;background:none;width:400px;height:71px;margin:0;padding:0;}#header h1 span,#header p span{margin-left:-999999px;font-size:1px;}#header h1{float:left;background:url(http://www.schachfeld.de/images/misc/vbulletin3_logo_white.gif);}.page h2{text-align:center;margin-top:0px;font-family:arial,sans-serif;}.h4forum{font:bold 1em verdana,arial,helvetica,sans-serif;margin:0;display:inline;}.navbar h3{font-family:arial,sans-serif;font-size:16px;color:#000000;padding-top:1px;margin:0px;}#relevant_replacement{font-size:11px;margin-bottom:5pt;margin-top:5px;word-wrap:break-word;overflow:hidden;}.clearit{clear:both;}.navbar2{font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;margin-bottom:5pt;margin-top:5px;font-size:8pt;}.panel{background:#E4E7F5 url(../../images/gradients/gradient_panel.gif) repeat-x top left;color:#000000;padding:10px;border:2px outset;}.panelsurround{background:#D5D8E5 url(../../images/gradients/gradient_panelsurround.gif) repeat-x top left;color:#000000;}legend{color:#22229C;font:11px tahoma,verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;}.vbmenu_control{background-color:#738FBF;color:#FFFFFF;font:bold 11px tahoma,verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;padding:3px 6px 3px 6px;white-space:nowrap;}.vbmenu_control a:link,.vbmenu_control a:visited,.vbmenu_option a:hover,.vbmenu_option a:active,.vbmenu_hilite a:link,.vbmenu_hilite a:visited,.vbmenu_hilite a:hover,.vbmenu_hilite a:active{color:#FFFFFF;text-decoration:none;}.vbmenu_control a:hover,.vbmenu_control a:active{color:#FFFFFF;text-decoration:underline;}.vbmenu_popup{background-color:#FFFFFF;color:#000000;border:1px solid #0B198C;}.vbmenu_option{background-color:#BBC7CE;color:#000000;font:11px verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;white-space:nowrap;cursor:pointer;}.vbmenu_option a:link,.vbmenu_option a:visited{color:#22229C;text-decoration:none;}.vbmenu_hilite{background-color:#8A949E;color:#FFFFFF;font:11px verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;white-space:nowrap;cursor:pointer;}#banner{width:100%;background:url(../../images/misc/anfang-head-bg.jpg) repeat-x right top;border:1px solid #0B198C;}.bigusername{font-size:14pt;}td.thead,div.thead{padding:4px;}.pagenav a{text-decoration:none;}.pagenav td{padding:2px 4px 2px 4px;}.fieldset{margin-bottom:6px;font-size:11px;}.fieldset td,.fieldset p,.fieldset li{font-size:11px;}form{display:inline;}label{cursor:default;}.normal{font-weight:normal;}.inlineimg{vertical-align:middle;} 


Majora

How did you manage to do this? If you make a change in your style CSS in your adminCP are the changes refelected in the CSS file?

Thanks

Originally Posted by MaestroX

How did you manage to do this? If you make a change in your style CSS in your adminCP are the changes refelected in the CSS file?

Thanks

Hi Chris,
I only edit my style css in clientscript/vbulletin_css choose the option "Remove all whitespace" insert the compressed code and uploaded the new css.

Majora

Hi Matthias,

I see thanks, its a nice method but I think having this an automatic process like the "Cleanup HTML code" option will be of great use. It will be felxible and work without having to use any manual work.

I hope vbseo jump on the idea and implement it

Otherwise I'm sure it could be coded

move the css to linked file, and then your code weight is one line of code.

once loaded, the linked file is cached by the browser and ads next to no page weight to the html at all.

But my point is that if this was done in real time, you could make any edit you needed to the CSS through the adminCP and the CSS will automatically me optimized.

???

You're missing the point i think of how browser caching works.


<link rel="stylesheet" type="text/css"......... /> will get cached by the browser and will only be downloaded once until it's changed.
<style>
foo {}
bar {}
</style>
will get downloaded every time its in a page resulting in bloat, and horrid C2C ratios.


any edit can still be made though the ACP as usual.

I don't think you get what I'm saying.

You're missing the point i think of how browser caching works.


<link rel="stylesheet" type="text/css"......... /> will get cached by the browser and will only be downloaded once until it's changed.
<style>
foo {}
bar {}
</style>
will get downloaded every time its in a page resulting in bloat, and horrid C2C ratios.

any edit can still be made though the ACP as usual.

I understand how browser caching works thanks. vBulletin has a "move CSS to file" option. This dosn't compress the CSS. If a compressor was introduced then the size of the CSS file could be cut down by half.

but, there's no point to it, as the code is cached.
10kb vs 20kb one time for a constant server-side process on every page call?

It would apply to first time visitors. Its a fact that if you webpage takes too long to load they will leave.

constant server-side process on every page call?

I don't see why you think the CSS would be compressed for every page call. Once the CSS is edited in the AdminCP, the plugin should compress it, only then.