PDA

View Full Version : Browser specific Ext CSS



kite
23 Jun 2011, 6:59 AM
As I can see from scss ext-ie.css is css for ie, ext-standard.css for all other browsers except ie.

cat ext-4.0.2a/resources/css/ext-standard.css | sed 's/[;{}]/\0\n/g' | grep -E '(ie[\d ]|-ms-|filter|zoom|hand|\*\w)'
-ms-box-sizing:border-box;
zoom:1}
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
filter:none}
-ms-border-radius:5px 5px;
zoom:1}
zoom:1}
zoom:1}
zoom:1}
zoom:1}
zoom:1}
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
zoom:1;
cursor:hand;
zoom:1;
*display:inline;
cursor:hand;
cursor:hand}
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
filter:none}
filter:none}
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
-ms-border-radius:3px;
.x-ie .x-btn-default-small-disabled .x-btn-inner{
-ms-border-radius:3px;
.x-ie .x-btn-default-medium-disabled .x-btn-inner{
-ms-border-radius:3px;
.x-ie .x-btn-default-large-disabled .x-btn-inner{
-ms-border-radius:3px;
.x-ie .x-btn-default-toolbar-small-disabled .x-btn-inner{
-ms-border-radius:3px;
.x-ie .x-btn-default-toolbar-medium-disabled .x-btn-inner{
-ms-border-radius:3px;
.x-ie .x-btn-default-toolbar-large-disabled .x-btn-inner{
zoom:1;
-ms-border-radius:2px;
-ms-border-top-left-radius:2px;
-ms-border-top-right-radius:2px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
zoom:1;
cursor:hand;
cursor:hand;
-ms-border-radius:3px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
zoom:1;
zoom:1;
zoom:1}
zoom:1;
zoom:1;
.x-ie .x-fieldset{
zoom:1}
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
cursor:hand}
-ms-border-bottom-left-radius:0;
-ms-border-bottom-right-radius:0;
-ms-border-bottom-left-radius:3px;
-ms-border-top-left-radius:0;
-ms-border-top-right-radius:0;
cursor:hand}
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
-ms-border-bottom-left-radius:null;
-ms-border-bottom-right-radius:null;
-ms-border-top-left-radius:null;
-ms-border-bottom-left-radius:null;
-ms-border-top-left-radius:null;
-ms-border-top-right-radius:null;
-ms-border-top-right-radius:null;
-ms-border-bottom-right-radius:null;
-ms-border-radius:4px;
-ms-border-top-left-radius:4px;
-ms-border-top-right-radius:4px;
-ms-border-bottom-right-radius:0;
-ms-border-bottom-left-radius:0;
-ms-border-top-left-radius:0;
-ms-border-top-right-radius:4px;
-ms-border-bottom-right-radius:4px;
-ms-border-bottom-left-radius:0;
-ms-border-top-left-radius:0;
-ms-border-top-right-radius:0;
-ms-border-bottom-right-radius:4px;
-ms-border-bottom-left-radius:4px;
-ms-border-top-left-radius:4px;
-ms-border-top-right-radius:0;
-ms-border-bottom-right-radius:0;
-ms-border-bottom-left-radius:4px;
-ms-border-radius:4px;
-ms-border-top-left-radius:4px;
-ms-border-top-right-radius:4px;
-ms-border-bottom-right-radius:4px;
-ms-border-bottom-left-radius:4px;
-ms-border-top-left-radius:4px;
-ms-border-top-right-radius:4px;
-ms-border-bottom-right-radius:4px;
-ms-border-bottom-left-radius:4px;
-ms-border-top-left-radius:4px;
-ms-border-top-right-radius:4px;
-ms-border-bottom-right-radius:4px;
-ms-border-bottom-left-radius:4px;
-ms-border-top-left-radius:4px;
-ms-border-top-right-radius:4px;
-ms-border-bottom-right-radius:4px;
-ms-border-bottom-left-radius:4px;
-ms-border-radius:3px;
zoom:1}
-ms-border-radius:5px;
zoom:1}
zoom:1}
zoom:1;
zoom:1;
-ms-border-radius:0;
-ms-border-radius:0;
-ms-border-radius:0 !important;
-ms-border-radius:5px;
-ms-border-radius:5px;
-ms-border-radius:5px 5px;
-ms-border-top-left-radius:5px;
-ms-border-top-right-radius:5px;
-ms-border-bottom-right-radius:5px;
-ms-border-bottom-left-radius:5px;
zoom:1}
-ms-border-top-left-radius:5px;
-ms-border-top-right-radius:5px;
-ms-border-bottom-right-radius:0;
-ms-border-bottom-left-radius:0;
-ms-border-top-left-radius:0;
-ms-border-top-right-radius:5px;
-ms-border-bottom-right-radius:5px;
-ms-border-bottom-left-radius:0;
-ms-border-top-left-radius:0;
-ms-border-top-right-radius:0;
-ms-border-bottom-right-radius:5px;
-ms-border-bottom-left-radius:5px;
-ms-border-top-left-radius:5px;
-ms-border-top-right-radius:0;
-ms-border-bottom-right-radius:0;
-ms-border-bottom-left-radius:5px;
zoom:1}
zoom:1}
-ms-border-top-left-radius:4px;
-ms-border-top-right-radius:4px;
-ms-border-bottom-right-radius:0;
-ms-border-bottom-left-radius:0;
-ms-border-top-left-radius:0;
-ms-border-top-right-radius:0;
-ms-border-bottom-right-radius:4px;
-ms-border-bottom-left-radius:4px;
zoom:1;
*display:inline;
cursor:hand}
cursor:hand}
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
.x-ie .x-tree-panel .x-grid-row .x-grid-cell-inner{
*vertical-align:auto}
*display:inline}
-ms-user-select:none;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
zoom:1}
zoom:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
.x-ie .x-resizable-handle-east{
.x-ie .x-resizable-handle-south{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
zoom:1;
zoom:1}
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
-ms-box-sizing:content-box !important;
I think ext-standard.css doesn't need all these ie-specific styles as like as ext-ie.css doesn't need styles like "-moz-.*|-o-.*|-webkit-.*|-khtml-.*" and classes like ".x-webkit". This will save tens of kilobytes.