CSS Flashcards
What is CSS selector specificity and how does it work?
"Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element (because it is a cascading style sheet). Specificity works by calculating the weight of each declaration. For this explanation, I'll say they are a, b, c, and d - going from highest specificity to the lowest. a is inline style elements since they always override any external stylesheets, they hold the highest specificity weight of 1000. b is ID selectors weight 100. c is class, attribute, and pseudo class selectors, weight 10. d is all of your type selectors, weight 1. For each selector, you add 1 to its column. You don't get a score from these weights rather a matrix of values that can be compared. a declaration of two class selectors (c) and 1 type selector(d) will hold a higher weight than five type selectors because your matrix is 0021 which = 21, vs 0005 which = 5."
What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?
- Resetting is meant to strip all default browser styling on elements
- Normalizing preserves useful default styles rather than completely resetting all styles. Additionally, when elements have different default styling in different browsers, normalize.css aims to make those styles consistent and in line with modern standards when possible.
- For more complex projects, I would choose resetting CSS because I am able to have more control over content placement and it is easier to make changes in case I need to add or take away features. I can search for the selector and its properties rather than rely on its default styling.
Describe floats and how they work.
“Float is a CSS positioning property. Floated elements remain a part of the flow of the page, and will affect the positioning of other elements (e.g. text will flow around floated elements), unlike position: absolute elements, which are removed from the flow of the page.
The CSS clear property can be used to be positioned below left/right/both floated elements.
If a parent element contains nothing but floated elements, its height will be collapsed to nothing. It can be fixed by clearing the float after the floated elements in the container but before the close of the container.
The .clearfix hack uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class clearfix to it. “
Describe z-index and how stacking context is formed.
“The z-index property in CSS controls the vertical stacking order of elements that overlap. z-index only affects elements that have a position value which is not static.
Without any z-index value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning (and their children) will always appear on top of elements with default static positioning, regardless of HTML hierarchy.
A stacking context is an element that contains a set of layers. Within a local stacking context, the z-index values of its children are set relative to that element rather than to the document root. Layers outside of that context — i.e. sibling elements of a local stacking context — can’t sit between layers within it. If an element B sits on top of element A, a child element of element A, element C, can never be higher than element B even if element C has a higher z-index than element B.
Each stacking context is self-contained - after the element’s contents are stacked, the whole element is considered in the stacking order of the parent stacking context. A handful of CSS properties trigger a new stacking context, such as opacity less than 1, filter that is not none, and transform that is not none.
”
Describe BFC (Block Formatting Context) and how it works.
“Block Formatting contexts is part of the CSS rendering of a webpage that determines how block boxes are laid out. They are commonly be floated elements, positioned elements that aren’t static or relative, table-cells, inline-block, flex / grid items and a few other box elements that I won’t mention. It’s used to determine from how elements will be positioned or cleared within the same parent element. Floats don’t affect the layout of the content inside other block formatting contexts, and clear only clears past floats in the same block formatting context. Margin collapsing also occurs only between blocks that belong to the same block formatting context.
<div>
<div>I am a floated box!</div>
<p>I am content inside the container.</p>
</div>
”
What are the various clearing techniques and which is appropriate for what context?
“Empty div method - <div style=""> </div>.
Clearfix method -
The .clearfix hack uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class clearfix to it. Then apply this CSS:
.clearfix:after {
content: ' ';
visibility: hidden;
display: block;
height: 0;
clear: both;
}
overflow: auto or overflow: hidden method - Parent will establish a new block formatting context and expand to contains its floated children.
In large projects, I would write a utility .clearfix class and use them in places where I need it. overflow: hidden might clip children if the children is taller than the parent and is not very ideal.”
Explain CSS sprites, and how you would implement them on a page or site.
“CSS sprites combine multiple images into one single larger image. It is a commonly-used technique for icons (Gmail uses it). How to implement it:
Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it. Each image would have a corresponding CSS class with background-image, background-position and background-size properties defined. To use that image, add the corresponding class to your element. Advantages:
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.”
How would you approach fixing browser-specific styling issues?
“After identifying the issue and the offending browser, use a separate style sheet that only loads when that specific browser is being used. This technique requires server-side rendering though.
Use libraries like Bootstrap that already handles these styling issues for you.
Use autoprefixer to automatically add vendor prefixes to your code.
Use Reset CSS or Normalize.css.
If you’re using Postcss (or a similar transpiling library), there may be plugins which allow you to opt in for using modern CSS syntax (and even W3C proposals) that will transform those sections of your code into corresponding safe code that will work in the targets you’ve used.”
How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?
“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.
Use caniuse.com to check for feature support.
Autoprefixer for automatic vendor prefix insertion.
Feature detection using Modernizr.
Use CSS Feature queries @support”
What are the different ways to visually hide content (and make it available only for screen readers)?
“These techniques are related to accessibility (a11y).
visibility: hidden. However, the element is still in the flow of the page, and still takes up space.
width: 0; height: 0. Make the element not take up any space on the screen at all, resulting in not showing it.
position: absolute; left: -99999px. Position it outside of the screen.
text-indent: -9999px. This only works on text within the block elements.
Metadata. For example by using Schema.org, RDF, and JSON-LD.
WAI-ARIA. A W3C technical specification that specifies how to increase the accessibility of web pages.
Even if WAI-ARIA is the ideal solution, I would go with the absolute positioning approach, as it has the least caveats, works for most elements and it’s an easy technique.”
Have you ever used a grid system, and if so, what do you prefer?
I like the float-based grid system because it still has the most browser support among the alternative existing systems (flex, grid). It has been used in Bootstrap for years and has been proven to work.
Have you used or implemented media queries or mobile specific layouts/CSS?
Yes I’ve used media queries and mobile specific CSS on multiple personal and client projects. Responsive Web-Design is important to me because it ensures users across all devices can access and interact with content easily.
Are you familiar with styling SVG?
“Yes, there are several ways to color shapes (including specifying attributes on the object) using inline CSS, an embedded CSS section, or an external CSS file. Most SVG you’ll find around the web use inline CSS, but there are advantages and disadvantages associated with each type.
Basic coloring can be done by setting two attributes on the node: fill and stroke. fill sets the color inside the object and stroke sets the color of the line drawn around the object. You can use the same CSS color naming schemes that you use in HTML, whether that’s color names (that is red), RGB values (that is rgb(255,0,0)), Hex values, RGBA values, etc.”
Can you give an example of an @media property other than screen?
“Yes, there are four types of @media properties (including screen):
all - for all media type devices
print - for printers
speech - for screen readers that ““reads”” the page out loud
screen - for computer screens, tablets, smart-phones etc.”
What are some of the “gotchas” for writing efficient CSS?
“Firstly, understand that browsers match selectors from rightmost (key selector) 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. Hence avoid key selectors that are tag and universal selectors. They match a large number of elements and browsers will have to do more work in determining if the parents do match.
BEM (Block Element Modifier) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.
Be aware of which CSS properties trigger reflow, repaint, and compositing. Avoid writing styles that change the layout (trigger reflow) where possible.
//Better answer with Leon, -Question is asking about the hacks, such as: what hacks do you need to know when using CSS? like box model hacks, clear fix when floating, and etc..."
