1. Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
All HTML elements can be considered as boxes.
In CSS we have two types of boxes - block boxes and inline boxes.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model.
There are two types of box models: the standard box model and the alternative box model.
In the standard box model, if you give a box a width and a height attribute, this defines the size of the content box. Any padding and borders is then added to that width and height to get the total size taken up by the box.
By default, browsers use the standard box model. But we can turn on the alternative model for an element by setting box-sizing: border-box on it. By doing this you are telling the browser to take the border box as the area defined by any size you set.
PNG: Good for images with sharp lines; Images that has a lot of colors or requires transparency.
GIF: Images with few colors and does not require any advanced alpha transparency effect.
JPG/JPEG: For anything that is photo quality, though not for text.
WebP: A new format from Google, though browser support is limited.
SVG: High-quality graphics and animations that does not lose detail as their size changes.
4. Describe BFC (Block Formatting Context) and how it works.
We can think of a BFC as like a mini layout inside a webpage. Once an element creates a BFC, everything is contained inside it.
Some examples of how to enable a BFC:
The root element of the document(<html>).
Floats (elements where float isn’t none).
Aboslutely positioned elements(elements where position is absolute or fixed)
inline-blocks (elements with display: inline-block)
Table cells (elements with display: table-cell)
Flex items (direct children of the element with display: flex or inline-flex) if they are neither flex nor grid nor table containers themselves.
Grid items (direct children of the element with display: grid or inline-grid) if they are neither flex nor grid nor table containers themselves.
Block elements where overflow has a value other than visible and clip.
What can we do with a BFC?
The BFC prevents margins collapsing.
A BFC stops content wrapping floats.
5. What is CSS selector specificity and how does it work?
Specificity is a weight that is applied to a given CSS declaration. when multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations.
The following list of selector types increases by specificity:
Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
Class selectors (e.g., .example), attributes selectors (e.g., [type="radio]) and pseudo-classes (e.g., :hover).
ID selectors (e.g., #example);
Universal selector (*), combinators (+, >, ~' ', ||) and negation pseudo-class (:not()) have no effect on specificity.
Inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and can be thought of as having the highest specificity.
6. What’s the difference between “resetting” and “normalizing” CSS?
Resetting: Aim to remove all built-in browser styling. You’re then supposed to add all decoration yourself.
normalizing: Aim to make built-in browser styling consistent across browsers. You’re then supposed to add only the difference in decoration your design needs.
I would use normalize.css in most cases, as it preserves useful defaults, will make CSS smaller and faster to write.
7. Describe floats and how hey work.
There are left, right and none for float. Each value indicates how an element should float. When float is set, each element will get out of its normal flow and will be shifted to the specified direction, until it gets its container or another floated element.
8. Describe z-index and how stacking context is formed.
The z-index is a property that allows developers to stack elements in the CSS. It's basically a 3D property so it allows the developer to choose how close the element appears. This is how stacking context is formed.
Some examples:
Root element of the document (<html>).
Element with a position value absolute or relative and z-index value other than auto.
Element with a position value fixed or sticky.
Element with a opacity value less than 1.
9. How would you approach fixing browser-specific styling issues?
Use normalize.css to create a consistant default style
Use a separate stylesheet that only onloads when that specific browser is being used.
10. How do you serve your pages for feature-constrained browsers?
Graceful degradation - The practice of building an application for modern browsers while ensuring it remains functional in older browsers.
Progressive enhancement - The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.
11. What are the different ways to visually hide content (and make it available only for screen readers)?
display:none or visibility:hidden - Hide content from all users, and is ignored by screen readers.
hidden attribute - it functions the same as CSS display:none.
width:0px, height:0px - Remove from the flow of the page, so most screen readers will not read it.
text-indent: -10000px - Off the visible screen, screen readers will still read text.
Absolutely positioning content off-screen - Visually hiding content that will be read by a screen reader
14. Explain how a browser determines what elements match a CSS selector.
Browsers match selectors from rightmost to left. Browsers filter out elements in the DOM according to the key selector, and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector.
For example with this selector p span, browsers firstly find all the <span> element, and traverse up its parent all the way up to the root to find the <p> element. For a particular <span>, as soon as it finds a <p>, it knows that the <span> matches and can stop its matching.
15. Can you explain the difference between px, em and rem as they relate to font sizing?
px - The easiest measurement to use. It is not good for font-size, as it doesn’t respect user’s font preferences.
em - An em is equal to the computed font-size of that element’s parent. Best for layouts and media queries.
rem - rem values are relative to the root html element, not to the parent element. Best for font sizing and spacing (margin, padding, etc).
