CSS Quiz

This article was first published on css-101.org (05-12-2011).

On April 28, 2011, I published a short CSS quiz via SurveyMonkey. This article discusses the comments I received, the responses, the results, and more.

It is also your last chance to try the quiz (modern browsers only), before I give away the solution and list the explanations.

Note: There is also a short thread on reddit; source of a few comments listed below.

The Main Question

Knowing that no other rule styles this element, select the declarations that can be safely removed [from the rule below] and rewrite the rule in the textarea. In other words, make the rule more efficient without breaking anything :-)Mezig via Survey Monkey

span#box {
    background-image: url(sprite.png) no-repeat;
    display: inline;
    clear: both;
    padding: 50px;
    font: 12px;
    width: 120px;
    height: 80px;
    margin: 0 auto;
    text-align: center;
    text-indent: -900em;
    left: 50px;
    bottom: 0;
    z-index: 2200007253;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    padding: 10px 0;
}

The Side Questions

Participants were asked about their CSS skills. This was a mandatory field with four options:

There were two more fields, one that participants could use to share their name or twitter handle, and one in which they could leave a comment. Both of these fields were optional.

The Comments

Surprisingly, many people complained about lack of context.

Interesting quiz. I had a go at it, but felt like I was poking in the dark a bit. Doesn’t the context of that span matter, though? Not sure…http://www.sitepoint.com/forums/css-53/short-css-quiz-survey-754562-post4868393.html#post4868397

[…] w/o seeing the code order, or knowing what her desired spacing, images, ect are… can a person choose between the two. It was a cool idea, just too many ambiguities to be a viable quiz.http://www.sitepoint.com/forums/css-53/short-css-quiz-survey-754562-post4868393.html#post4868656

I’m confused as to what you are trying to achieve. Is this supposed to be image replacement? Is it supposed to be centered? Maybe I’m missing it, but I can’t help but think this is underspecced.http://www.reddit.com/r/web_design/comments/h0nw6/short_css_quizz_optimize_this_css_rule_ill

Others did not uderstand what was the task at hand:

I don’t get it, this is the worst css coding i’ve ever seenhttp://www.reddit.com/r/web_design/comments/h0nw6/short_css_quizz_optimize_this_css_rule_ill/

I think the problem here is that you’re trying to elicit an understanding of relationships without explaining what the intent is. The “right answer” depends upon the author’s intent. It’s clear they utterly misunderstand how to write valid CSS, and thus I have absolutely no confidence on my assumptions of the intent.http://www.reddit.com/r/web_design/comments/h0nw6/short_css_quizz_optimize_this_css_rule_ill/

I thought we were supposed to pick one element. In my case I chose display:inline; as I felt that was causing the most discrepancies but overall thought it was a trick question.http://www.reddit.com/r/web_design/comments/h0nw6/short_css_quizz_optimize_this_css_rule_ill/

I started on it, but walked away on it as I suspect I would NEVER write code like that in the first place… Again, CSS without the markup it applies to is gibberish – and there’s a LOT of gibberish in there.http://www.sitepoint.com/forums/css-53/short-css-quiz-survey-754562-post4868393.html#post4868433

I just did it and it thoroughly confuzled me what s/he (the “user who wrote the styles”) was trying to do.http://www.sitepoint.com/forums/css-53/short-css-quiz-survey-754562-post4868393.html#post4868641

A few people made clever remarks:

I left only the second padding statement, because that statement IS actually being applied, even if you don’t see it changing the flow of items when you view it in a browser. The padding is still there, still being applied, unlike all of the other statements (which aren’t doing anything).http://www.reddit.com/r/web_design/comments/h0nw6/short_css_quizz_optimize_this_css_rule_ill/

I think technically the z-index value could be different on a 64 bit browser, but it would still wrap on 32 bit.Anonymous

z-index can be removed since the element is not positioned. As a side note, I think its value is too high.Anonymous

The Responses

Summary

The two tables below contain data associated to the first 100 responses I received (SurveyMonkey basic plan limit).

 Response
Percent
Response
Count
background-image:
url(sprite.png) no-repeat;
30.0%30
display:inline;
75.0%75
clear:both;
57.0%57
padding:50px;
68.0%68
font:12px;
38.0%38
width:120px;
61.0%61
height:80px;
62.0%62
margin:0 auto;
62.0%62
text-align:center;
62.0%62
text-indent:-900em;
53.0%53
left:50px;
70.0%70
bottom:0;
76.0%76
z-index:2200007253;
67.0%67
clip:rect(1px 1px 1px 1px);
60.0%60
clip:rect(1px, 1px, 1px, 1px);
64.0%64
padding:10px 0;
37.0%37
 Response
Percent
Response
Count
Beginner
13.0%13
Intermediate
34.0%34
Pro
39.0%39
Ninja
14.0%14

The Results

Eight people (8%) scored 100%. Two listed themselves as ninjas, three as pros, two as intermediate and one as a beginner (very modest or good at guessing).

Four of the 14 ninjas didn’t do better than the “worst” beginner’s score. I guess ninjas are not what they used to be. ;-)

I found many false positives. Those are declarations meant to be removed from the rule, but that are selected for the wrong reason. Because not all participants explained their choice, there could be more of these.

Also, it should be noted that quite a few people thought they were asked to “fix” the rule; to rewrite invalid syntax or introduce properties that would make some of the styling work. These people skewed the results, but also demonstrated skill. Some of them would have scored very well if the goal was to fix the rule :)

Bis Repetita

This is your last chance to give the quiz a try before you get to the solution.

The style block below should allow you to edit the rule live. Remember that the goal is to remove as many declarations as possible without breaking anything (without creating any visual glitch). That’s it, I won’t say anything more than that. :)

Don’t look for the box, if you break something - believe me - you’ll know where it is.

Note: Use shift + enter to create new lines.

The image path differs from the original rule.

The solution

background-image:url(sprite.png) no-repeat
Because no-repeat is not a proper value for the background-image property, browsers will ignore this declaration. Hence it can be removed.
display:inline
The element that this rule targets is a span (span#box). Because spans are inline-level elements this declaration is redundant and can be removed.
clear:both
The clear property does not apply to inline elements. This declaration can be removed.
padding:50px
Padding on inline elements does not affect the height of the box, only its width. This declaration cannot be removed as it would make the box shrink (make sure to keep reading though).
font:12px
The shorthand property requires more values. At minimum, the font-size should be associated to a font-family (i.e. font: 12px arial). Browsers will ignore this declaration. Hence it can be removed.
width:120px
The width property does not apply to inline elements. This declaration can be removed.
height:80px
The height property does not apply to inline elements. This declaration can be removed.
margin:0 auto
Only explicit left/right margins apply to inline elements. This declaration can be removed.
text-align:center
The text-align property only applies to block containers. This declaration can be removed.
text-indent:-900em
The text-indent property does not apply to inline elements. This declaration can be removed.
left:50px
This property only applies to positioned elements. This declaration can be removed.
bottom:0
This property only applies to positioned elements. This declaration can be removed.
z-index:2200007253
This property only applies to positioned elements. This declaration can be removed.
This is not the value I had in mind to begin with. At first, I wanted to use the upper limit value(2147483647), then I decided to go with nine digits but I made a typo (one too many zero in there) :-(.
clip:rect(1px 1px 1px 1px)
This property only applies to absolutely positioned elements. This declaration can be removed [1].
clip:rect(1px, 1px, 1px, 1px)
This property only applies to absolutely positioned elements. This declaration can be removed [2].
padding:10px 0
The rule already includes a padding declaration. Because of the cascade, the first one (above) is ignored. As mentioned earlier, top and bottom values do not change the dimension of the box, thus this declaration can be removed as well as the first padding declaration in this rule.

Yes, all the declarations - the whole rule could be removed without disturbing the visual flow. You can check this yourself by emptying the whole code block above.

About the last declaration in the rule

Paul O’Brien, who participated in the quiz, noted that even if vertical padding does not disturb the visual flow, it may overlap other elements and prevent user interaction (i.e. prevent clickability).

Thanks to all who participated

  1. This is the “new” syntax which IE does not support.

  2. This is not the CSS3 syntax, but for backward compatibility’s sake, I believe all browsers support it.