Blog is available in backup mode, go to github-pages for newer posts
Back to articles listThe other day I found rather thorough quiz on css, html and js. One may consider it boring, nonetheless many interesting edge-cases are considered.
The only problem I consider is that no explanations is given. Author promotes his book at the end of the quiz, but I decided to be a naughty person and provide explanation to all questions for free ;-) I'd suggest you to take the quiz again, skipping all questions and not answering last one.
FULL SPOILERS AHEAD!
Are attribute names in CSS case-sensitive?
CSS2: 4.1.3 Characters and case
All CSS syntax is case-insensitive within the ASCII range (i.e., [a-z] and [A-Z] are equivalent)
Do vertical margins affect size of inline elements?
CSS2: 9.4.2. Inline formatting contexts
Also see note on margin-top and margin-bottom in CSS21: 8.3 Margin properties
These properties have no effect on non-replaced inline elements.
Do vertical paddings affect size of inline elements?
CSS2: 9.4.2. Inline formatting contexts
In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes.
CSS3: 5.1.1 rem unit
Resize of the window doesn't affect font-size of the body in general case
CSS3: 6.6.4.2. The :checked pseudo-class
:checkedpseudo-class initially applies to such elements that have the HTML4 selected and checked attributes as described in Section 17.2.1 of HTML4
CSS3: 6.6.5.1. :root pseudo-class
The
:rootpseudo-class represents an element that is the root of the document. In HTML 4, this is always the HTML element.
translate is a 2D translation and is defined as 3D translation with z = 0.
specificity: (0,1,0,0) vs (0,0,0,2)
specificity: (0,1,0,0) vs (0,0,2,0)
Here specificity of first selector is greater, but second selector is applied directly to an element
In cascading order for point 2 we have "4. author important declarations", which are prioritized before specificity.
:nth-of-type(odd) is applicable here, hence rule with it is used
specificity (1,2,1) vs (1,1,2)
negative margin - see image
Actually specification is not generous describing details on how negative margins work. We could rely on intuition and extrapolate behavior.
CSS3 backgrounds: 3.3. Image Sources: the ‘background-image’ property
Implementations may optimize by not downloading and drawing images that are not visible (e.g., because they are behind other, fully opaque images).
Not very thorough, therefore some practical tests should be preformed.
SO:Are unused CSS images downloaded
Also most web-developers know, that for example if some item with :hover has separate background-image, this image would not be loaded until actual hover happens.
Most browsers download background image for elements with display:none - test#2
Most browsers do not download background image for children of element with display:none test#3 and not due to visibility:hidden.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
CSS3 Media Queries
screen media means that content is intended to be rendered on screen, nevertheless width is defined for viewport size.
Does <kbd> tag exists in html5?
What does <bdo> tag mean?
Is it ok to use certain html within <figure> tag?
Where it is appropriate to use <small> tag in html5? Also on MDN:html5 tags
Are multiple headings ok for SEO?
"Organic" and semantically adjusted tags are ok for SEO.
Which element to use for highlighting keyword in search results - <mark>. One may as well read about all elements (there's no highlight element, though) and make sure that semantic of all but <mark> tag don't fit the situation.
Scope attribute of <style> tag
<a> tags as block at html5doctor
Image hidden via visibility
visibility:hidden preserves element in content flow and its sizes should be determined. For image element default size is obtained from its content, hence image should be loaded. Also see next point.
Image inside display:none element
I can't find direct statement, that images should be loaded, there're some evidence for that, though:
w3:img
In a browsing context where scripting is disabled, user agents may obtain images immediately or on demand. In a browsing context where scripting is enabled, user agents must obtain images immediately
Also practical observations show, that image is loaded even when detached from DOM. This feature has been being used for js image preload for long time.
No explicit statements found, but see emphasised a style sheet that is blocking scripts in HTML5: 4.2.7 Styling
Also see google's advice #3.
I failed to found explicit statement regarding that, but there's nothing about one stylesheet blocking subsequent ones.
Again, no success in reading specs.
Real testing shows that IE (all versions) is the only browser rendering content preceding style tag. Possibly most browsers delay rendering to avoid flash of unstyled content.
es5#11.6.1: The Addition operator
If Type(lprim) is String or Type(rprim) is String, then Return the String that is the result of concatenating ToString(lprim) followed by ToString(rprim)
hence addition of number and string is a concatenation of two operands converted to strings
Addition has left associativity (operator precedence) hence numbers are summed up first and then result is concatenated with last operand.
Function declaration is always hoisted. It declares local variable foo and first line foo = 10; actually overwrites local variable.
Top-level name foo is remained untouched and its initial value is alerted.
Function declaration hoisting again plus variable hoisting. The same es5#10.5 covers variable declaration in point 8. Code sample could be rewritten in more explicit way:
function bar() {
var foo = function () {}; // both declaration and initialization is hoisted
return foo;
foo = 10;
foo = 11; // re-declaration does nothing
}Variable hoisting is really an important thing to understand. One more link to good article about hoisting.
In simple words, go become detached reference w/o any knowledge, whose method it was and this become global for its calls.
More formally go is actually a reference variable in current scope. When function call is performed, according to 6b, _thisValue_ is taken from top-level scope: object environment record. Its ImplicitThisValue
returns undefined, which is replaced with global object when entering function code
BTW constructions like (1,foo.baz.bar)(); also leads to detached function reference.
Similarly anonymous functions always have this set to global context.
x is referred to primitive value from outer scope. According to es5#13.2.2 if return type is not an object, actual return value is as if no return was called.
arguments object always has list of actually passed arguments. It is foo.length, what is equals to 1.
es5#10.6:arguments
args be the actual arguments passed to the [[Call]] internal method ...
1. Let len be the number of elements in args ...
7. Call the [[DefineOwnProperty]] internal method on obj passing "length", the Property Descriptor {[[Value]]: len, [[Writable]]: true, [[Enumerable]]: false, [[Configurable]]: true}, and false as arguments.
Name bar is only available within the function body: see note on es5#13:function definition.
There is a bug in IE8-, though, when such names leaks into scope.
JScript Deviations from ES3 2.7 Function Expressions: §11.2.5, p10.
Arrays are (special) objects, hence they can have additional named properties. Nonetheless the length is affected only by assigning numerical-indexed properties. More on that in es5#15.4.5.1.
Named arguments and indexed properties of arguments are references to same values. See note 1 on es5#10.6:arguments.
Mixing up these two representations is not recommended, though.
es5#15.3.5.1:length property of the function has Configurable es5#8.6.1:attribute set to false and hence property could not be deleted.
Wow, you made it so far. If you wonder, I got 79% on the first try.