* Added reference to CSS question: What is the difference between classes and IDs in CSS?
* Added reference to CSS question: Explain CSS sprites...
* Update interview-questions.md
- **IDs** - Meant to be unique within the document. Can be used to identify an element when linking using a fragment identifier. Elements can only have one `id` attribute.
- **IDs** - Meant to be unique within the document. Can be used to identify an element when linking using a fragment identifier. Elements can only have one `id` attribute.
- **Classes** - Can be reused on multiple elements within the document. Mainly for styling and targeting elements.
- **Classes** - Can be reused on multiple elements within the document. Mainly for styling and targeting elements.
###### References
- https://www.w3.org/TR/CSS1/#id-as-selector
- https://www.w3.org/TR/CSS1/#class-as-selector
### What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
### What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
- **Resetting** - Resetting is meant to strip all default browser styling on elements. For e.g. `margin`s, `padding`s, `font-size`s of all elements are reset to be the same. You will have to redeclare styling for common typographic elements.
- **Resetting** - Resetting is meant to strip all default browser styling on elements. For e.g. `margin`s, `padding`s, `font-size`s of all elements are reset to be the same. You will have to redeclare styling for common typographic elements.
@ -294,6 +298,10 @@ CSS sprites combine multiple images into one single larger image. It is commonly
- Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.
- Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.
- Advance downloading of assets that won't be downloaded until needed, such as images that only appear upon `:hover` pseudo-states. Blinking wouldn't be seen.
- Advance downloading of assets that won't be downloaded until needed, such as images that only appear upon `:hover` pseudo-states. Blinking wouldn't be seen.
###### References
- https://css-tricks.com/css-sprites/
### What are your favorite image replacement techniques and which do you use when?
### What are your favorite image replacement techniques and which do you use when?
CSS image replacement is a technique of replacing a text element (usually a header tag like an `<h1>`) with an image (often a logo). It has its origins in the time before web fonts and SVG. For years, web developers battled against browser inconsistencies to craft image replacement techniques that struck the right balance between design and accessibility.
CSS image replacement is a technique of replacing a text element (usually a header tag like an `<h1>`) with an image (often a logo). It has its origins in the time before web fonts and SVG. For years, web developers battled against browser inconsistencies to craft image replacement techniques that struck the right balance between design and accessibility.
Alex Prut
7 years ago
committed by
Yangshun Tay