CSS Flashcards
(10 cards)
What is CSS selector specificity and how does it work?
Explanation: The means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.
Use: Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.
Example: A selector of #id .class tag would have 111 points as id’s count for 100, classes for 10 and tags 1.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?
Explanation: “Normalize” alters the default styles of various browser to match each other. “Reset” will remove the browsers default styles so you are starting from scratch.
Use: Applying one or the other is done to try and make websites visually consistent across different browsers. I prefer to use a mix of both. Starting with the normalize to keep it conscise and then add some elements like anchors and headers with a reset. Going full “nuke” is often unnecessary and creates a larger, harder to debug file.
Example:
Normalize:
/**
* Correct the font size and margin on h1 elements within section and
* article contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
Reset:
html,
body,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
Source: https://elad.medium.com/normalize-css-or-css-reset-9d75175c5d1e
Describe floats and how they work.
Explanation: Floats are a positioning property where the element that is floated will be removed from the flow of the page and affect the elements around it. A parent element will collapse to zero height if it contains only floated elements, to fix this it was common to use a .clearfix hack.
Use: It was used prior to flex and grid to layout pages in a more flexible manner.
Example: You could float three elements left and give them widths of 33% to create three even width columns.
Source: https://www.frontendinterviewhandbook.com/css-questions/
Describe z-index and how stacking context is formed.
Explanation: The z-index property in CSS controls the vertical stacking order of elements that overlap. A stacking context is an element that contains a set of layers. The z-index values of its children are set relative to that element rather than to the document root. Layers outside of that context can’t sit between layers within it.
Source: https://www.frontendinterviewhandbook.com/css-questions/
Describe BFC (Block Formatting Context) and how it works.
Explanation: A BFC is an HTML box that satisfies at least one of the following conditions:
The value of float is not none.
The value of position is neither static nor relative.
The value of display is table-cell, table-caption, inline-block, flex, or inline-flex, grid, or inline-grid.
The value of overflow is not visible.
Use: Knowing how to establish a block formatting context is important, because without doing so, the containing box will not contain floated children.
Example: Without forming a BFC you could have content of a float that is taller than the content alongside it. The border of the parent element could then “cut-through” the floated box.
Source: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
What are the various clearing techniques and which is appropriate for what context?
Explanation:
Empty div method
Clearfix method
overflow: auto or overflow: hidden method
Use: .clearfix utility class is probably the best method to use in general as it doesn’t take long to construct and doesn’t suffer from clipping issues like the overflow methods.
Source: https://www.frontendinterviewhandbook.com/css-questions/
Explain CSS sprites, and how you would implement them on a page or site.
Explanation: CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance.
Use: Browsers limit the number of concurrent requests a site can make so leading several images with a single HTTP request helps increase page load speed.
Example: An example would be combining press logo’s for Wired, NY Times and The Washington Post into a single image file. Then on the site, with CSS, placing the file three times and moving/cropping it to display the applicable logo.
Source: https://css-tricks.com/css-sprites/
How would you approach fixing browser-specific styling issues?
Explanation: There are a handful of ways to solve the issue such as browser specific stylesheets, using a library like bootstrap, etc. MY preference would be to use a combination normalize/reset style sheet. I’d rather use a combination as going full nuke with a reset isn’t necessary and makes it a little harder to debug.
Source: https://www.frontendinterviewhandbook.com/css-questions/
How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?
Explanation: My preference is to try and build lightweight simple websites that incorporate progressive enhancement.
Use: Build the base level of HTML/CSS with semantics and accessibility in the forefront you get a site that works well on feature-constrained browsers. I would then add any CSS on JavaScript enhancements deliberately, checking caniuse.com and using vendor prefixs and polyfills if required.
Example: Instead of filling the site with <div> using more semantically appropriate tags like <section> <aside> <article> <header> <footer>
Source: https://www.frontendinterviewhandbook.com/css-questions/
What are the different ways to visually hide content (and make it available only for screen readers)?
Explanation:
Make the element have a size of zero width: 0; height: 0
Absolute position off screen position: absolute; left: -99999px
Text indent off screen if within block element text-indent: -9999px
aria-label which will read the string given to the attribute.
Use: I typically absolutely position the element off screen as it covers the most scenarios.
Source: https://www.frontendinterviewhandbook.com/css-questions/
