CSS Flashcards
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.
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;
}
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.
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.
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.
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.
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.
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.
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>
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.
Have you ever used a grid system, and if so, what do you prefer?
Explanation: I typically use a 12 column “grid” system when doing my initial web layout.
Use: I find that it works well for laying out the average website and giving the site some visual consistency. When if comes to coding the site I find it helps speed up the layout immensely.
Have you used or implemented media queries or mobile specific layouts/CSS?
Explanation: I use them quite frequently.
Use: I use them on every website and typically build mobile first. The breakpoints and media queries are then used to convert the layout from mobile to desktop.
Example: Some examples is changing a bunch of cards from being a single column stack on mobile to a three column layout on desktop.
Are you familiar with styling SVG?
Explanation: Yes there are a few ways to style them including inline CSS, embedded CSS or an external style sheet. Basic coloring can be done with the fill and stroke attributes.
Example:
< rect width=”100” height=”100” stroke=”blue” fill=”purple” />
Can you give an example of an @media property other than screen?
Explanation & Use: There are four types:
all - for all media type devices
print - for printers
speech - for screenreaders that “reads” the page out loud
screen - for computer screens, tablets, smart-phones etc.
Example: An example of using print and making all the text black:
@media print {
body {
color: black;
}
}
What are two “gotchas” for writing efficient CSS?
Explanation:
Browsers match selectors from rightmost (key selector) to left. The shorter the length of the chain the faster the browser can find a match. Avoid using tag and universal selectors for your key selector.
Avoid using styles that trigger reflow.
