# References of Technology

It is a technical references of mine. If it helps you, my pleasure.

## Helpful Links

[CSS-Tricks][link1], [MDN][link2]

[link1]: https://css-tricks.com/
[link2]: https://developer.mozilla.org/en-US/docs/Web

## JavaScript

### IIFE

[IIFE][IIFE] is shorthand for "Immediately Invoked Function Expression", also called "Self-Executing Anonymous Function". It has three features:

1. Invoked immediately.
2. It prevents accessing variables by outside.
3. It prevents polluting the global scope.

[IIFE]: https://developer.mozilla.org/en-US/docs/Glossary/IIFE

### undefined

In ECMAScript, `undefined` is not a [reserved word][js-reserved-word], so you can use `undefined` as a identifier(variable name) in any scope **other than the global scope**[^undefined-can-modify-in-below-ie9-footnote].

// DON'T DO THIS

(function() { 
  var undefined = 'foo'; 
  console.log(undefined, typeof undefined); // "foo string"
})();

(function(undefined) { 
  console.log(undefined, typeof undefined); // "foo string"
})('foo');

In order to avoid the `undefined` value being modified, we usually do so.

(function (window, undefined) {
  // ...
})(window);

[js-reserved-word]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords
[^undefined-can-modify-in-below-ie9-footnote]: But in IE8-, we can even modify the `undefined` value, so must be careful.

### Date.now

For get Unix timestamps, ES5 intro a simper static function: `Date.now()`。if not support, there a polyfill:

if (!Date.now) {
  Date.now = function(){
    return (new Date()).getTime();
  };
}

Browser support: [IE9+ and other][datenow-browser-support].

[datenow-browser-support]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now#Browser_compatibility

### XMLHttpRequest

var ajax = new XMLHttpRequest();

Ajax is a technology. In general, when talking about Ajax, in fact, is to say `XMLHttpRequest` object.

Browser support: [IE7+ and other][xmlhttprequest-object-browser-support].

[xmlhttprequest-object-browser-support]: http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp

### String.prototype.trim()

Removes whitespace from both ends of a string.

Browser support: [IE9+ and other][string-trim-method-browser-support].

Here offer a polyfill for all support.

if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
  };
}

[string-trim-method-browser-support]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim#Browser_compatibility

### querySelector()`/`querySelectorAll()

This method divided into two scenarios:

1. `document.querySelector()`/`document.querySelectorAll()`。
2. `Element.querySelector()`/`Element.querySelectorAll()`。

#### document. methods

Browser support: [IE8+ and other][document-queryselector-browser-support].

[document-queryselector-browser-support]: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#Browser_Compatibility

#### Element. methods

Browser support: [IE9+ and other][element-queryselector-browser-support].

[element-queryselector-browser-support]: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector#Browser_compatibility

### ParentNode.children

A read-only property that returns a live HTMLCollection of the child elements of Node.

Browser support: [IE9+ and other][parentnode-children-browser-support][^parentnode-children-notice].

[parentnode-children-browser-support]: https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children#Browser_compatibility
[^parentnode-children-notice]: Internet Explorer 6, 7 and 8 supported it, but erroneously includes Comment nodes.

### docuement.getElementsByClassName()

You may also call `getElementsByClassName()` on any element, that means you can use `Element.getElementsByClassName()`.

Browser support: [IE9+ and other][getelementsbyclassname-browser-support].

[getelementsbyclassname-browser-support]: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName#Browser_compatibility

### Element.classList

`.classList` returns a live DOMTokenList collection of the specific class attributes of element. Methods include: `add`, `remove`, `toggle`, `contains` and `replace`.

Browser support: [IE10+ and other][classList-browser-support].

Here is a shim `classList.js` working in [IE8+ and other](https://github.com/eligrey/classList.js).

[classList-browser-support]: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility

### window.requestAnimationFrame

Browser support: [IE10+ and other][requestanimationframe-browser-support].

[requestanimationframe-browser-support]: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#Browser_compatibility

There is a requestAnimationFrame [polyfill][requestanimationframe-polyfill] for all browsers support.

[requestanimationframe-polyfill]: http://paulirish.com/2011/requestanimationframe-for-smart-animating/

### HTMLElement.dataset

Browser support: [IE11 and other][dataset-browser-support].

[dataset-browser-support]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset#Browser_compatibility

## CSS

### text-indent

Browser support: all.

Notice: IE10- does not support the global values `initial`.

### opacity

opacity: .75;

Specifies the level of transparency of an element. Values in the range `0.0` to `1.0`.

Browser support: [IE9+ and other][opacity-browser-support][^opacity-footnote].

[opacity-browser-support]: https://developer.mozilla.org/en-US/docs/Web/CSS/opacity#Browser_compatibility
[^opacity-footnote]: IE8- did not support `opacity`. Instead, it supported a `filter` property with a value of `alpha(opacity=xx)`, e.g `filter:alpha(opacity=75)`.

### :before, :after

div:before {
  content: "hi";
}

`:before` is equal to `::before`, `:after` is equal to `::after`. But for support IE8, [use single-colon][after-and-before-use single-colon].

Browser support: [IE8+ and other][after-and-before-browser-support].

[after-and-before-use single-colon]: https://css-tricks.com/almanac/selectors/a/after-and-before/#article-header-id-0
[after-and-before-browser-support]: https://css-tricks.com/almanac/selectors/a/after-and-before/#browser-support

### box-sizing

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

[Reset box model][reset-box-model], that means the CSS property **width = content + padding + border**.

Browser support: [IE8+ and other][box-sizing-browser-support].

[reset-box-model]: https://css-tricks.com/box-sizing/
[box-sizing-browser-support]: https://css-tricks.com/almanac/properties/b/box-sizing/#browser-support

### border-radius

border-radius: 50%;

Define elements that how rounded border corners are.

Browser support: [IE9+ and other][border-radius-browser-support].

[border-radius-browser-support]: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#Browser_compatibility

### box-shadow

box-shadow: inset 0 0 38px rgba(0, 0, 0, .08);

Add shadow effects around a element. Dot not occupy the actual space in page.

Browser support: [IE9+ and other][box-shadow-browser-support].

[box-shadow-browser-support]: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#Browser_compatibility

### text-shadow

text-shadow: 0 2px 2px rgba(0, 0, 0, 0.75);

Add shadows to text.

Browser support: [IE10+ and other][text-shadow-browser-support].

[text-shadow-browser-support]: https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow#Browser_compatibility

### transition

transition: all .15s ease;

Define transition effects, is a shorthand property for `transition-property`, `transition-duration`, `transition-timing-function`, and `transition-delay`.

Browser support: [IE10+ and other][transition-browser-support].

[transition-browser-support]: https://developer.mozilla.org/en-US/docs/Web/CSS/transition#Browser_compatibility

### transform

a {
  transition: 0.1s;
}

a:hover {
  opacity: 0.75;
  transform: translateY(3px);
}

Define transform effects.

Browser support: [IE10+ and other][transform-browser-support].

[transform-browser-support]: https://developer.mozilla.org/en-US/docs/Web/CSS/transform#Browser_compatibility

### @keyframes

@keyframes slidein {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

Browser support: [IE10+ and other][keyframes-browser-support].

[keyframes-browser-support]: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes#Browser_Compatibility

### animation

.animation {
  animation: 3s slidein;
}

animation 属性是以下属性的简写形式。

- `animation-name`：动画名，用 @keyframes 定义。默认 none；
- `animation-duration`：动画周期。默认 0s；
- `animation-timing-function`：动画速度曲线。默认 ease；
- `animation-delay`：动画延迟时间。默认 0s；
- `animation-iteration-count`：动画播放次数。默认 1；
- `animation-direction`：动画方向。默认 normal（正向），还有反向、轮流
播放（从正向开始）、轮流播放（从反向开始）。
- `animation-fill-mode`：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
- `animation-play-state`：动画运动状态。默认 running，还有一个值 paused。

Browser support: IE10+ and other

### Flexbox

.box {
  display: flex;
}

Guide [here](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

Browser support: [IE10+ and other][flexbox-browser-support].

[flexbox-browser-support]: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#browser-support

## jQuery

If you need to support older browser IE6~IE8, use jQuery [1.12][jquery-download-address].

### Get Version

jQuery.fn.jquery

### Deffered Object

Import from version 1.5.0. Guide [here][jquery-deffered-object-guide].

[jquery-download-address]: https://code.jquery.com/jquery/#jquery-all-1.x
[jquery-deffered-object-guide]: http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

*[identifier]: A sequence of characters in the code that identifies a variable, function, or property.

###### tags: `Link` `CSS` `JavaScript` `jQuery`