More on "Collapsing Margins": here.

As float implies the use of the block layout, it modifies the computed value of the display values in some cases [1]

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/float MDN

Vender Prefixes

• display: -webkit-box; /* Chrome <20 */
• display: -webkit-flex; /* Chrome 20+ */
• display: -moz-box; /* Firefox */
• display: -ms-flexbox; /* IE */
• display: flex; /* Modern browsers */

Resources

• A Complete Guide to Flexbox
• Solved by Flexbox
• What the Flexbox?!
• Flexbox in 5 minutes
• Flexbugs

• Sometimes you will see double colons (::) instead of just one (:). This is a way to separate pseudo-classes from pseudo-elements.
• Old browsers, like Internet Explorer 8, only support a single colon (:) for defining pseudo-elements.
• Unlike pseudo-classes, only one pseudo-element may be used per selector, if present it must appear after the sequence of simple selectors that represents the subjects of the selector (a future version of the W3C specification may allow multiple pseudo-elements per selector).

About padding-box

This value was only implemented by Firefox and thus should not be used. It was removed in Firefox version 50.0.

Some older browsers support only vendor-prefixed transition properties:

• -webkit: Chrome 25-, Safari 6-, Safari & Chrome for iOS 6.1-, Android 4.3- Browser, Blackberry Browser 7-, UC Browser 9.9- for Android.
• -moz: Firefox 15-.
• -o: Opera 11.5-, Opera Mobile 12-.

Example:

-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;

2D Coordiante system

Transforms are made according to a 2D X/Y coordiante system. The X axis goes from right to left and the Y axis goes downwards as shown in the following image:

So a positive translateY() goes downwards and a positive translateX() goes right.

Browser support and prefixes

• IE supports this property since IE9 with the -ms- prefix. Older versions and Edge don't need the prefix
• Firefox supports it since version 3.5 and needs the -moz- prefix until version 15
• Chrome since version 4 and until version 34 needs the -webkit- prefix
• Safari needs the -webkit- prefix until version 8
• Opera needs the -o- prefix for version 11.5 and the -webkit- prefix from version 15 to 22
• Android needs the -webkit- prefix from version 2.1 to 4.4.4

Example of prefixed transform:

-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);

The padding property sets the padding space on all sides of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.

1: https://developer.mozilla.org/en/docs/Web/CSS/padding MDN

Also see this question, "Why does CSS not support negative padding?" and his answers.

Also please consider The Box Model when using padding. Depending on the box-sizing value, padding on an element can either add to the previously defined height/width of an element or not.

Related Properties:

margin

Padding on inline elements will only apply to the left and right of the element, and not the top and bottom, due to the inherent display properties of inline elements.

1. Since filter is an experimental feature, you should use the -webkit prefix. It may change in syntax and behavior, but the changes are probably going to be small.

2. It might not be supported in older versions of major browsers. It might be entirely unsupported in mobile browsers.

3. Due to its relatively limited support, try to use box-shadow instead of filter: drop-shadow(). Use opacity instead of filter: opacity().

4. It can be animated through Javascript/jQuery. For Javascript, use object.style.WebkitFilter.

5. Check W3Schools or MDN for more info.

6. W3Schools also has a demo page for all the different type of filter values.

CSS Variables are currently considered an experimental technology.

---

BROWSER SUPPORT / COMPATIBILITY

Firefox: Version 31+ (Enabled by default)

More info from Mozilla

Chrome: Version 49+ (Enabled by default).

"This feature can be enabled in Chrome Version 48 for testing by enabling the experimental Web Platform feature. Enter chrome://flags/ in your Chrome address bar to access this setting."

IE: Not Supported.

Edge: Under Development

Safari: Version 9.1+

CSS Grid Layout Module Level 1 is, as of 9 September 2016, a W3C Candidate Recommendation. It is considered to be in the Testing stage (https://www.w3.org/Style/CSS/current-work).

As of 3 July 2017, Microsoft's Internet Explorer 10 and 11 and Edge browsers only support an older version of the specification using a vendor prefix.

Related properties:

• border

• border-bottom

• border-bottom-color

• border-bottom-left-radius

• border-bottom-right-radius

• border-bottom-style

• border-bottom-width

• border-color

• border-image

• border-image-outset

• border-image-repeat

• border-image-slice

• border-image-source

• border-image-width

• border-left

• border-left-color

• border-left-style

• border-left-width

• border-radius

• border-right

• border-right-color

• border-right-style

• border-right-width

• border-style

• border-top

• border-top-color

• border-top-left-radius

• border-top-right-radius

• border-top-style

• border-top-width

• border-width

Coordinate system

3D transforms are made according to an (x, y, z) coordinate vector system in Euclidean space.

The following image shows an example of coordinates in Euclidean space:

In CSS,

• The x axis represents the horizontal (left and right)
• The y axis represents the vertical (up and down)
• The z axis represents the depth (forward and backward/closer and further)

The following image shows how these coordinates are translated in CSS:

If you do not want apply opacity, you can use this instead:

background: rgba(255, 255, 255, 0.6);

Resources:

• MDN: https://developer.mozilla.org/en/docs/Web/CSS/opacity;
• W3C Transparency: the ‘opacity’ property: https://www.w3.org/TR/css3-color/#transparency
• Browser support: http://caniuse.com/#feat=css-opacity

For some use cases, sprites are slowly falling out of favor, being replaced by icon webfonts or SVG images.

CSS Clipping and Masking are very new concepts and so the browser support for these properties are pretty low.

Masks:

As at the time of writing (Jul '16), Chrome, Safari and Opera support these properties with the -webkit- prefix.

Firefox doesn't require prefixes but it supports masks only when used with SVG mask elements. For inline SVG mask elements, the syntax is mask: url(#msk) whereas for using mask elements in an external SVG file the syntax is mask: url('yourfilepath/yourfilename.svg#msk'). #msk in both cases refers to the id of the mask element that is being referred to. As indicated in this answer, at present Firefox doesn't support any parameter other than mask-reference in the mask property.

Internet Explorer (and Edge) does not offer any support for this property as yet.

The mask-mode property is currently not supported by any browser with or without prefixes.

Clip-path:

As at the time writing (Jul '16) Chrome, Safari and Opera supports clip-path when the path is created using basic shapes (like circle, polygon) or the url(#clipper) syntax with inline SVG. They don't support clipping based on shapes that are part of external SVG files. Also, they require the -webkit prefix to be present.

Firefox supports only the url() syntax for clip-path whereas Internet Explorer (and Edge) offer no support.

outline is now described in Basic UI, a CSS Module Level 3 (it was already described in REC CSS2.1)

---

Outline property is defined by default in browsers for focusable elements in :focus state.
It shouldn't be removed, see http://outlinenone.com which states:

What does the outline property do?

It provides visual feedback for links that have "focus" when navigating a web document using the TAB key (or equivalent). This is especially useful for folks who can't use a mouse or have a visual impairment. If you remove the outline you are making your site inaccessible for these people. (…)

Interesting related examples on Stack Overflow:

• How to remove the border highlight on an input text element
• How to remove Firefox's dotted outline on BUTTONS as well as links?

For ease of readability, keep all declarations indented one level from their selector, and the closing curly brace on its own line. Add a single space after selectors and colons, and always place a semicolon after the final declaration.

Good

p {
    color: maroon;
    font-size: 16px;
}

Bad

p{
 color: maroon;
font-size:16px }

One-Liner

If there are only one or two declarations, you might get away with this one. Not recommended for most cases. Always be consistent when possible.

p { color: maroon; font-size: 16px; }

The overflow property specifies whether to clip content, render scrollbars, or stretch a container to display content when it overflows its block level container.

When an element is too small to display it's contents, what happens? By default, the content will just overflow and display outside the element. That makes your work look bad. You want your work to look good, so you set the overflow property to handle the overflowing content in a desirable way.

Values for the overflow property are identical to those for the overflow-x and overflow-y properties, exept that they apply along each axis

The overflow-wrap property has also been known as the word-wrap property.

Important note: Using the overflow property with a value different to visible will create a new block formatting context.

The CSS Object Model (CSSOM) is a specification on its own.

The current draft can be found here: https://www.w3.org/TR/cssom-1/

[A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.][1]

[1]: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context MDN

CSS Multi-column Layout Module Level 1 is, as of 12 April 2011, a W3C Candidate Recommendation. Since then, a few smaller changes were made. It is considered to be in the Stable stage.

As of 3 July 2017, Microsoft's Internet Explorer 10 and 11 and Edge browsers only support an older version of the specification using a vendor prefix.

These examples are for documenting CSS-specific methodologies / design patterns.

These methodologies include but are not exclusive to the following:

• BEM
• OOCSS
• SMACSS

These examples are NOT for documenting CSS frameworks like Bootstrap or Foundation. While you may include examples of how to apply one or more CSS methodology / design pattern with a CSS framework, those examples are to focus on the methodologies / design patterns with that particular framework and on the use of the framework itself.