CSS Refresher Notes

This is a quick refresher of CSS concepts compiled from various articles online. Contributions are always welcome :)

I have linked to most of the articles used, sorry if I missed any. Huge thanks to the community!

Table of Contents

• Positioning
• Display
• Floats
• CSS Selectors
• Selector efficiency
• Repaints and Reflows
• CSS3 Properties
• CSS3 Media queries
• Responsive Web Design
• CSS3 Transitions
• CSS Animations
• Scalable Vector Graphics (SVG)
• CSS Sprites
• Vertical Alignment
• Known Issues

Positioning

CSS Position allows up to 5 different values. But essentially only 4 values are commonly used.

div {
  position: static; /* default */
  position: relative;
  position: absolute;
  position: fixed;
  position: sticky;
  position: inherit; /* Not very common */
}

Static (default):

• The only reason you would ever set an element to position: static is to forcefully-remove some positioning that got applied to an element outside of your control. This is fairly rare, as positioning doesn't cascade.

Relative:

• Allows nudging elements in different directions with top, right, bottom and left values. Its starting point is where it normally lies in the flow of the document, not the top left of the page.
• When set to position relative, elements take up the same amount of space at the same exact position it was supposed to take as if its position was static.
• It introduces the ability to use z-index on that element, which doesn't really work with statically positioned elements. Even if you don't set a z-index value, this element will now appear on top of any other statically positioned element.
• It limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block.

Absolute:

• Position absolute takes the element out of the document flow. This means that it no longer takes up any space like what static and relative does. Think of it as an element with a giant strip of velcro on its back. Just tell it where to stick and it sticks.
• You use the positioning attributes top, left, bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the html element itself meaning it will be placed relatively to the page itself.
• The trade-off, and most important thing to remember, about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements.

Fixed:

• Similar to position absolute, an element that has fixed position is taken out of the document flow.
• The element is positioned relative to the viewport, or the browser window itself.
• Major difference with position absolute is it always takes its positioning relative to the browser window.
• Since the fixed value behaves similar to the absolute value, we can stretch the width of the element to fit the viewport by setting offset values for left and right to zero.

Sticky:

• This 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 positioning.
• For more info, find the demo from the MDN (https://codepen.io/simevidas/pen/JbdJRZ)

Inherits:

• It works as the name implies: The element inherits the value of its parent element. Typically, position property elements do not naturally inherit their parent’s values—the static value is assigned if no position value is given. Ultimately, you can type inherit or the parent element’s value and get the same result.

Summary

• Relative positioning will allow you to tweak an element’s position relative to its normal starting point.
• Absolute positioning will allow you to tweak an element’s position relative to its first non-statically-positioned ancestor (defaults to page bounds if none is found).
• Both relatively and absolutely positioned items won’t affect the static and fixed items around them (absolutely positioned items are removed from the flow, relatively positioned items occupy their original position).

Gotchas:

• You can’t apply both the position property and the float property to the same element. Both are conflicting instructions for what positioning scheme to use. If an element has both float and position:absolute or fixed, the float property won't apply.
• Margins don’t collapse on absolutely positioned elements. Suppose you have a paragraph with a margin-bottom of 20px applied. Right below the paragraph is an image with a margin-top of 30px applied. The space between the paragraph and the image will not be 50px (20px + 30px), but rather 30px (30px > 20px). This is known as collapsing margins. The simplest way to stop the margin collapse from occurring is to add padding or borders to each element. The two margins combine (or collapse) to become one margin. Absolutely positioned elements do not have margins that collapse, which might make them act differently than expected.

More reading:

Absolute, Relative, Fixed Positioning: How Do They Differ?

CSS Positioning 101

Learn CSS Positioning in Ten Steps

CSS Cheat Sheet

Display

Every element on a web page is a rectangular box. The display property in CSS determines just how that rectangular box behaves.

div {
	display: inline;
	display: inline-block;
	display: block;
	display: run-in;
	display: none;
}

• Default value of all elements is inline. Most "User Agent stylesheets" (the default styles the browser applies to all sites) reset many elements to "block"

Inline:

• Default value for elements. Think of elements like span, b or em
• Will ignore top and bottom margin/padding settings, but will apply left and right margin/padding. Only moves horizontally, not vertically.
• Is subject to vertical-align property.
• Will ignore width and height properties.
• If floated left or right, will automatically become a block-level element, subject to all block characteristics.

Inline Block:

• Very similar to inline to its parents in that it will set inline with the natural flow of text.
• Very similar to block to its children in that it can have a width and height and its content can move vertically.
• Think of a display:block element that has been rendered (or converted to an image) and then placed in the document inline
• Margin and paddings work properly.
• Width and height will be respected.
• There is a "bug" which causes extra margin in inline block elements. See on Known Issues

Block:

• A number of elements are set to block by the browser UA stylesheet. They are usually container elements such as div, section and ul. Also text 'blocks' like p and h1.
• Block level elements do not sit inline, but break past them. If no width is set, will expand naturally to fill its parent container.
• Can have margins and/or padding.
• If no height is set, will expand naturally to fit its child elements (assuming they are not floated or positioned). So, for a block element, it’s not necessary to give it a set width or to give it a width of 100%.
• Ignores the vertical-align property.

Run-in:

• Not supported in Firefox + spec not well defined yet.
• To begin to understand it though, it's like if you want a header element to sit inline with the text below it.

None:

• Totally removes the element from the page.
• While the element is still in the DOM, it is removed visually and in any other conceivable way (you can't tab to it or it's children , it is ignored by screen readers etc.)

Table values:

• There is a whole set of display values that force non-table elements to behave like table-elements.
• It's rare-ish, but it sometimes allows you to be "more semantic" with your code while utilizing the unique positioning powers of tables.

div {
  display: table;
  display: inline-table; /* like a table inside an inline-block */
  display: table-cell;
  display: table-column;
  display: table-colgroup;
  display: table-header-group;
  display: table-row-group;
  display: table-footer-group;
  display: table-row;
  display: table-caption;
}

• To use, just mimic normal table structure. Simple example:

<div style="display: table;">
  <div style="display: table-row;">
    <div style="display: table-cell;">
      Gross but sometimes useful.
    </div>
  </div>
</div>

Flexbox:

• Aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word 'flex')
• The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).
• A flex container expands items to fill available free space, or shrinks them to prevent overflow.
• Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is hori