CSS Quiz

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.

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 🙂

span#box {
    background-image:url(https://css-101.org/wp-content/themes/pdp2el2eea4t8lgnlodsp145683/img/../articles/short_css-quiz/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:

• Beginner
• Intermediate
• Pro
• Ninja

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 …

[…] 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.

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.

Others did not uderstand what was the task at hand:

I don’t get it, this is the worst css coding i ‘ve ever seen

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.

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.

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.

I just did it and it thoroughly confuzled me what s/he (the “user who wrote the styles”) was trying to do.

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).

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

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

The Responses

Summary

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

This table lists all the declarations contained in the rule.

		Response Percent	Response Count
background-image: url(https://css-101.org/wp-content/themes/pdp2el2eea4t8lgnlodsp145683/img/../articles/short_css-quiz/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

This table shows the participants’ skills.

		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 🙂

The solution

background-image:url(https://css-101.org/wp-content/themes/pdp2el2eea4t8lgnlodsp145683/files/articles/short_css-quiz/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.

This is the "new" syntax which IE does not support.

clip:rect(1px, 1px, 1px, 1px);

This property only applies to absolutely positioned elements. This declaration can be removed.

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

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.

A note 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).

Last, but not least

As the screenshot below shows, anonymous online quizzes are troll magnets 😉

Thanks to all who participated!