CSS Memo

Accessible-links.css

/* http://24ways.org/2013/coding-towards-accessibility/ */
 
.my-cool-link:hover,
.my-cool-link:focus,
.my-cool-link:active
{
 
 background-color: MistyRose;
}

box-sizing.css

/* apply a natural box layout model to all elements, but allowing components to change */
/* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
html {
  box-sizing: border-box;
}
*,
*:before,
*:after
{
  box-sizing: inherit;
}

css-blend-modes.css

.blend-modes {
 background-blend-mode: screen;
 background-blend-mode: overlay;
 background-blend-mode: darken;
 background-blend-mode: lighten;
 background-blend-mode: color-dodge;
 background-blend-mode: color-burn;
 background-blend-mode: hard-light;
 background-blend-mode: soft-light;
 background-blend-mode: difference;
 background-blend-mode: exclusion;
 background-blend-mode: hue;
 background-blend-mode: saturation;
 background-blend-mode: color;
 background-blend-mode: luminosity;
}

css-memo.md

CSS Terminology

https://drafts.csswg.org/selectors-4/#structure

• A simple selector represents an element matched by a particular aspect.

• A compound selector is a sequence of simple selectors that are not separated by a combinator.

• Universal selector (*)

• Type selectors (e.g. div, nav, ul li, .foo > span)

• Non-namespaced class selectors (e.g. .button, .text-right, .foo > .bar)

• Non-namespaced attribute selectors (e.g. [aria-checked], [data-foo], [type])

• A pseudoselector that’s not within a compound selector (e.g. :hover, .foo > :checked)

Pseudo Elements vs Pseudo Selectors

These are appropriately called pseudo "elements" (not selectors) because they don't select any "real" element that exists on the page. This goes for these two, as well as the previous sections :first-letter and :first-line. Make sense? Like the first letter that ::first-letter selects isn't an element all to itself, it's just a part of an existing element, hence, pseudo element.

The double colons (::) make this distinction.

https://css-tricks.com/pseudo-class-selectors/

• Fixing scroll jank with composited layers (will-change: transform)

Comparing the "preload" and "prefetch" relationships of the element

instructs the browser to fetch a resource, without executing it or blocking the page’s "load" event. (Purpose: delaying execution of the resource, e.g. script). ⁂ hints to the browser that a resource might be required by the next navigation. (Purpose: improving the speed of navigation.)

css-whitespace.css

/* whitespace */
.foo {
  content: "\0020";
}
 
/* non-breaking space */
.bar {
  content: "\00a0";
}
 
/* line break */
.boo {
  content: "\a";
}

dotted-border-background.css

.foobar {
 background-image: linear-gradient(to left, red 50%, blue 0%);
 background-position: bottom;
 background-repeat: repeat-x;
 background-size: 2px 1px;
}

flex-box.css

.flex-container {
	
/* Display */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

/* Direction */
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;

/* Wrap */
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

/* Justify */
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;

/* Align content */
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;

/* Align items */
-webkit-box-align: start;
-moz-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;

}

.flex-item {
	
/* Order */
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;

/*
Flex shorthand
- flex-grow
- flex-shrink
- flex-basis
*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;

/* Align self */
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;

}

hide-ms-tooltip.css

::-ms-tooltip {
  display: none;
}

list-of-css-vendor-prefixes.md

• -ms- Microsoft
• mso- Microsoft Office
• -moz- Mozilla Foundation (Gecko-based browsers)
• -o-, -xv- Opera Software
• -atsc- Advanced Television Standards Committee
• -wap- The WAP Forum
• -webkit- Safari, Chrome (and other WebKit-based browsers)
• -khtml- Konqueror browser
• -apple- Webkit supports properties using the -apple- prefixes as well
• prince- YesLogic
• -ah- Antenna House
• -hp- Hewlett Packard
• -ro- Real Objects
• -rim- Research In Motion
• -tc- Tall Components

http://stackoverflow.com/questions/5411026/list-of-css-vendor-prefixes

nth-last-child.css

/* Style a penultimate child in CSS thanks to the power of nth-last-child: */

ul li:nth-last-child(2) {
 
  ...

}

Password-Fields.css

/*
The only font that emulate correctly the password field's big dots of other browsers is Verdana.
http://stackoverflow.com/questions/6859727/styling-password-fields-in-css
*/

input[type="password"]
{
  font: large Verdana,sans-serif;
  letter-spacing: 1px;
}

Pseudo-classes-order.css

/* http://www.sitepoint.com/web-foundations/pseudo-classes/ */

a:link {
 
}
 
a:visited {
 
}
 
a:focus {
 
}
 
a:hover {
 
}
 
a:active {
 
}

Remove-Webkit-Search-Input-Styles.css

input[type=search] {
	-webkit-appearance: none;
}
 
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button
{
	display: none;
}

The-lobotomized-owl-selector.css

/* http://alistapart.com/article/axiomatic-css-and-lobotomized-owls */

* + * {
 margin-top: 1.5em;
}