Saturday, April 23, 2011

Funky behavior of CSS Universal selector in Google Chrome Developer tools

Although its the middle of the night and I'm in an intense work / implementation session for one of the startups I work with (zbang.it) I had to pause for this.

I was on the brink of loosing my sanity because of this weird problem where styles were merged with each other, when inspecting elements in Google Chrome developer tools (v10.0.648.205).

First, here is the style sheet (or some of it), please note the CSS Universal selector at the beginning:
*
{
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
}

body
{
    font-family: Calibari, Arial;
    font-size: 12px;
}

div.ui-layout-east
{
    width: 250px;
    float: right;
}

div.ui-innerLayout-north
{
    height: 70px;
}

.
.
. 
more css down here
Here is how it looked while inspecting div.ui-layout-east on Google Chrome developer tools:


Take a good look at the highlighted height: 70px, its jumped up from div.ui-innerLayout-north, don't believe me? I didn't believe myself at first, so I added a super noticeable style to div.ui-innerLayout-north, like so:
*
{
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
}

body
{
    font-family: Calibari, Arial;
    font-size: 12px;
}

div.ui-layout-east
{
    width: 250px;
    float: right;
}

div.ui-innerLayout-north
{
    height: 70px;
    border: 3px dashed red;
}

.
.
. 
more css down here
And, lo and behold


It jumped right up again!!!

At first I thought that I had a css syntax error somewhere but by way of elimination and after a long while I found out that this behavior happens only when the universal selector is the first style on the style sheet, and if its location changes:
body
{
    font-family: Calibari, Arial;
    font-size: 12px;
}

*
{
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
}

div.ui-layout-east
{
    width: 250px;
    float: right;
}

div.ui-innerLayout-north
{
    height: 70px;
    border: 3px dashed red;
}

.
.
. 
more css down here
The universe goes to being expected again:


By the way this does not affect the actual HTML in the browser, only the display in developer tools.

Wasted a little over an hour of my life, hope it saves you one.

No comments:

Post a Comment