3 Things (Almost) No One Knows About CSS

I must admit, I was pleased to see that first question, about line height. I, too, learned to use unitless line height a long time ago, and I was surprised to discover that its behaviour is not widely known. A couple of years ago, I had somebody on these forums ranting at me for my utter stupidity in not redeclaring my line height after I changed font size, and my explanation was met with disbelief.

(It’s probably just as well he’s no longer around; I can have a quiet gloat without being tempted to remind him in person. )

I had the same argument with him a few times :smile:

4 Likes

Yay, I got 96%, quite happy with that, but I have no clue where I tripped up. None whatsoever.

Incidentally the JavaScript Core test on the same site has far too many browser DOM centric questions to be branded JavaScript Core. They should probably be two separate tests.

88% first time for me. A couple were a bit confusing but don’t think I did too badly! Would be nice to know where I tripped up though.

Heh, it wasn’t that he didn’t know about unitless line heights, but rather that he passionately disagreed with their use. Still, I wasn’t convinced, and am quite a fan of them.

Any ambiguous wording in questions or options that, intended or not, fools the answerer is not testing css knowledge imho. The ambiguity/difficulty should be put in the problem itself.

I’ll take the tests then, though I’m prone to error a lot when distracted.
Maybe 100% could be made by my ignorant mistakes. How would I know? :slight_smile:

Css core: 88%. I was lucky I guess.
Css practice: 92%, two pretty silly mistakes.
Html Core: 84%, aborted in a hurry.

Not that ambiguous as I was afraid of after all. :slight_smile:

2nd attempt 100% :smile: (no practice questions looked at)

1 Like

Congratulations! (Show-off. )

1 Like

Whoa, thanks for the screenshot, @PaulOB! That’s definitely not how it’s supposed to look. Fixing it now. :smile:

1 Like

Not using unitless line-heights means you are signing on to specify a line-height whenever you specify a font-size. It’s doable, but hardly a sensible default position, I’d say.

I like this idea, lesley! Will change this the next time I edit the test.

Would you need to change anything if that line height were set in ems or % though? Whatever you changed the font size to would be automatically reflected in the line height, wouldn’t it? (Granted, though, that it’s a different story for descendent elements, as the Eric Meyer link above shows, so I still don’t like the idea of setting units on line height.)

Anyhow, here’s one of the discussions by said member about line height: Layout Disaster! (CSS) - #36 by system, in case anyone’s interested in what we are referring to!

Hmm I suppose you could do something like:

* { line-height: 1.2em; }

This would cause every element in your document to calculate its own line height based on its own font size. But you can get the same effect with just

html { line-height: 1.2; }

and that only requires the browser to match one element, rather than every single element on the page.

To be clear, this:

html { line-height: 1.2em; }

will not calculate auto-adjust the line height for each element’s font-size. It calculates a fixed line height (1.2 times the html element’s font-size) and every element in the document inherits that fixed height, regardless of its own font-size.

3 Likes

Really liked the quiz but made a poor result above and had to wait one week to get a second shot at it. :slight_smile:

The trickyness in some questions made me I feel like I knew the proper answer but had a hard time decide what was really the question. Guess I was luckier this time.

1 Like

Well done Erik :slight_smile:

Passed them all, but some with shameful results imho, I guess I have some catching up to do. :open_mouth:
Nice test though, thanks!

80% first try. Loved the test although some of the questions could have been made a bit clearer.

74% on the actual test, but got 88% on the practice.

For a harder question, I like this one that surprised me when I learnt it:

Which of these properties on its own can create a new stacking context?

position
z-index
opacity
margin

The correct answer is opacity. Margin is the red herring but position and z-index need to both be specified in order to create a stacking context.

Technically isn’t position all you need? Stacking context is then created based off the HTML source order.