CSS

• ...media queries, flexible grids, and responsive images to create a user experience that flexes and changes based on a multitude of factors. Like a single ball growing or shrinking to fit through several different hoops.

• Does not display an element (the element no longer affects the layout of the document).
• All child element are also no longer displayed. The document is rendered as if the element did not exist in the document tree

• The element consumes the whole line in the block direction (which is usually horizontal)

• Elements can be laid out beside each other

• Similar to inline, but allows some block properties like setting width and height

• Behaves like the <table> element

• Behaves like the <tr> element

• Behaves like the <td> element

• Behaves like a <li> element which allows it to define list-style-type and list-style-position

• For example, margins, paddings, font-sizes of all elements are reset to be the same. You will have to redeclare styling for common typographic elements.

• It also corrects bugs for common browser dependencies.

• The default position; the element will flow into the page as it normally would.
• The top, right, bottom, left and z-index properties do not apply.

• The element's position is adjusted relative to itself, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).

• The element is removed from the flow of the page and positioned at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block.
• Absolutely positioned boxes can have margins, and they do not collapse with any other margins.
• These elements do not affect the position of other elements.

• The element is removed from the flow of the page and positioned at a specified position relative to the viewport and doesn't move when scrolled.

• Sticky positioning is a hybrid of relative and fixed positioning.
• The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

• MDN

• <span style="z-index:5">top box</span> goes on top of
• <span style="z-index:2">middle box</span> which goes on top of
• <span style="z-index:auto">auto box</span>

• When an HTML element is given a relative, absolute, or fixed positioning attribute, you’ll be able to move them around by altering it’s top, right, left, bottom attributes.
Copy

div {
	position: absolute || relative || fixed;
  top || bottom || left || right: <length> || <percentage> || auto || inherit;
}

• Similarly, you can use the translate() method to apply transformations
Copy

div {
	transform: translate( <length> || <percentage>, <length> || <percentage>);
}

1. Performance
• Animating positioned elements will trigger the browser to synchronously recalculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
2. User Experience (i.e. silky smooth animations)
‣
translate() causes the browser to create a GPU layer for the element, which allows subpixel animation, creating for a smoother
‣
If you want your element that has position: absolute; top: 2px; to move to position: absolute; top: 5px;, browsers will render the animation pixel by pixel:
• top: 2px; ➡️ top: 3px; ➡️ top: 4px; ➡️top: 5px;
‣
And when using translate() your browser would render the animation a lot smoother:
• translate: 0.1px; ➡️ translate: 0.2px; ➡️ translate: 0.3px; ➡️translate: 0.4px; ➡️translate: 0.5px; ➡️translate: 0.6px; ➡️translate: 0.7px; ➡️translate: 0.8px; ➡️translate: 0.9px; ➡️translate: 1px;

• float is a positioning property, which can have the values of left , right, none and inherit.

• clear is also a positioning property ("the sister property of float"), which can have the values of both, left , right, and none
• HTML elements with the CSS clear property applied will not move up adjacent to the float, but will move itself down past the float.

• 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 like .clearfix to it. Then apply this CSS:
Copy

.clearfix:after {
  content: '.';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

• float

• clear
Copy

#footer {
  clear: both;			
}

• The rules for positioning and clearing of floats apply only to things within the same block formatting context.
• 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.

• 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.
• The value of overflow is not visible.

• Block formatting context - Developer guides | MDN
• SitePoint

The Box Model describes how the padding, border, and margin are added to the content to create this rectangle. In other words, we can say that every box has a content area and an optional surrounding margin, padding, and border.

• The total width and height of the box is explicit.
• I.O.W: The width and height accounts for any border, padding, and margin — and should be deducted to find the dimensions of the content-box

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.

• important
• Specificity
• MDN

• Nest your CSS properties within multiple sets of {} brackets. This makes your CSS code a bit more clean-looking and more intuitive.

• Standard CSS has variable definitions. So what’s the deal? You can do a lot more with Sass variables: iterate them via a for-loop and generate property values dynamically. You can embed them into CSS property names themselves. It’s useful for property-name-N { … } definitions.

• You can add, subtract, multiply and divide CSS values. Sure the original CSS implements this via calc() but in Sass you don’t have to use calc() and the implementation is slightly more intuitive.

• Sass lets you create CSS definitions as reusable functions. Speaking of which…

• Among many of its basic features (+, -, *, /), SCSS allows you to write your own functions.
• You can write your own sine and cosine (trigonometry) functions entirely using just the Sass/SCSS syntax just like you would in other languages such as JavaScript.
• Some trigonometry knowledge will be required. But basically, think of sine and cosine as mathematical values that help us calculate the motion of circular progress bars or create animated wave effects, for example.

• You can write CSS using familiar code-flow and control statements such as for-loops, while-loops, if-else statements similar to another languages. But don’t be fooled, Sass still results in standard CSS in the end. It only controls how property and values are generated. It’s not a real-time language. Only a pre-processor.

• Create a set of CSS properties once and reuse them or “mix” together with any new definitions. In practice, you can use mixins to create separate themes for the same layout, for example.

• Loops in CSS Preprocessors
• CSS Preprocessors Explained

• Used to conditionally apply styles with the CSS @media and @import at-rules.
• Used to target specific media for the <style>, <link>, <source>, and other HTML elements with the media= attribute. Different style sheets for different browsers

• Using media queries - CSS: Cascading Style Sheets | MDN
• CSS Tricks
• CSS Media Queries and Using Available Space

1. Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it.
2. Each image would have a corresponding CSS class with background-image, background-position and background-size properties defined.
3. To use that image, add the corresponding class to your element.

• 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.

• The practice of building an application for modern browsers while ensuring it remains functional in older browsers.

• The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.

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.

Different scenarios call for different float clearing methods. Take for example a grid of blocks, each of different types.

• We could use either the overflow or easy clearing method if each of the color groups had a parent element.
• Or, we use the empty div method in between each group. Three wrapping divs that didn’t previously exist or three after divs that didn’t previously exist. I’ll let you decide which is better.

Accessibility - Learn web development | MDN

WAI-ARIA basics - Learn web development | MDN

• Why?
💡
Browsers match selectors from right (key selector) to left, and filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. So, the shorter the length of the selector chain, the faster the browser can determine if that element matches the selector.
1. How would the browser parse #id .class > ul a?
• In this example, the key selector is a.
• First, the browser finds all elements matching the key selector a
• Then, the browser finds all ul elements on the page
• Then filters the a elements down to just those elements that are descendants of ul elements — and so on until it reaches the leftmost selector.