Gerador de Border-radius - CSS

Gerador de Border-radius
========================

Esta ferramenta pode ser utilizada para gerar o efeito `border-radius` (en-US) em CSS3.
```

<div id="container">
  <div class="group section">
    <div id="preview" class="col span\_12">
      <div id="subject">
        <div
 id="top-left"
 class="radius-container"
 data-X="left"
 data-Y="top"></div>
        <div
 id="top-right"
 class="radius-container"
 data-X="right"
 data-Y="top"></div>
        <div
 id="bottom-right"
 class="radius-container"
 data-X="right"
 data-Y="bottom"></div>
        <div
 id="bottom-left"
 class="radius-container"
 data-X="left"
 data-Y="bottom"></div>

        <div id="radius-ui-sliders">
          <div
 id="tlr"
 class="ui-input-slider"
 data-topic="top-left"
 data-unit=" px"
 data-sensivity="2"></div>

          <div
 id="tlw"
 class="ui-input-slider"
 data-topic="top-left-w"
 data-unit=" px"
 data-sensivity="2"></div>

          <div
 id="tlh"
 class="ui-input-slider"
 data-topic="top-left-h"
 data-unit=" px"
 data-sensivity="2"></div>

          <div
 id="trr"
 class="ui-input-slider"
 data-topic="top-right"
 data-unit=" px"
 data-sensivity="2"></div>

          <div
 id="trw"
 class="ui-input-slider"
 data-topic="top-right-w"
 data-unit=" px"
 data-sensivity="2"></div>

          <div
 id="trh"
 class="ui-input-slider"
 data-topic="top-right-h"
 data-unit=" px"
 data-sensivity="2"></div>

          <div
 id="brr"
 class="ui-input-slider"
 data-topic="bottom-right"
 data-unit=" px"
 data-sensivity="2"></div>

          <div
 id="brw"
 class="ui-input-slider"
 data-topic="bottom-right-w"
 data-unit=" px"
 data-sensivity="2"></div>

          <div
 id="brh"
 class="ui-input-slider"
 data-topic="bottom-right-h"
 data-unit=" px"
 data-sensivity="2"></div>

          <div
 id="blr"
 class="ui-input-slider"
 data-topic="bottom-left"
 data-unit=" px"
 data-sensivity="2"></div>

          <div
 id="blw"
 class="ui-input-slider"
 data-topic="bottom-left-w"
 data-unit=" px"
 data-sensivity="2"></div>

          <div
 id="blh"
 class="ui-input-slider"
 data-topic="bottom-left-h"
 data-unit=" px"
 data-sensivity="2"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="controls" class="group section">
    <div class="group section">
      <div id="dimensions">
        <div
 class="ui-input-slider"
 data-topic="width"
 data-info="width"
 data-unit=" px"
 data-min="150"
 data-max="700"
 data-sensivity="1"></div>

        <div
 class="ui-input-slider"
 data-topic="height"
 data-info="height"
 data-unit=" px"
 data-min="75"
 data-max="350"
 data-sensivity="1"></div>
      </div>

      <div id="output"></div>
    </div>

    <div class="group section">
      <div id="radius-lock">
        <div class="info">rounded corner</div>
        <div class="ui-checkbox" data-topic="top-left"></div>
        <div class="ui-checkbox" data-topic="top-right"></div>
        <div class="ui-checkbox" data-topic="bottom-right"></div>
        <div class="ui-checkbox" data-topic="bottom-left"></div>
      </div>

      <div id="unit-selection">
        <div class="info">select border units</div>
      </div>
    </div>
  </div>
</div>
```

```
/\* GRID OF TEN
 \* ========================================================================== \*/

.span\_12 {
  width: 100%;
}

.span\_11 {
  width: 91.46%;
}

.span\_10 {
  width: 83%;
}

.span\_9 {
  width: 74.54%;
}

.span\_8 {
  width: 66.08%;
}

.span\_7 {
  width: 57.62%;
}

.span\_6 {
  width: 49.16%;
}

.span\_5 {
  width: 40.7%;
}

.span\_4 {
  width: 32.24%;
}

.span\_3 {
  width: 23.78%;
}

.span\_2 {
  width: 15.32%;
}

.span\_1 {
  width: 6.86%;
}

/\* SECTIONS
 \* ========================================================================== \*/

.section {
  clear: both;
  padding: 0px;
  margin: 0px;
}

/\* GROUPING
 \* ========================================================================== \*/

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1; /\* For IE 6/7 (trigger hasLayout) \*/
}

/\* GRID COLUMN SETUP
 \* ========================================================================== \*/

.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
}

.col:first-child {
  margin-left: 0;
} /\* all browsers except IE6 and lower \*/

/\*
 \* UI Component
 \*/

.ui-input-slider-container {
  height: 20px;
  margin: 10px 0;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  -moz-user-select: none;
  user-select: none;
}

.ui-input-slider-container \* {
  float: left;
  height: 100%;
  line-height: 100%;
}

/\* Input Slider \*/

.ui-input-slider > input {
  margin: 0;
  padding: 0;
  width: 50px;
  text-align: center;

  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.ui-input-slider-info {
  width: 90px;
  padding: 0px 10px 0px 0px;
  text-align: right;
  text-transform: lowercase;
}

.ui-input-slider-left,
.ui-input-slider-right {
  width: 16px;
  cursor: pointer;
  background: url("arrows.png") center left no-repeat;
}

.ui-input-slider-right {
  background: url("arrows.png") center right no-repeat;
}

.ui-input-slider-name {
  width: 90px;
  padding: 0 10px 0 0;
  text-align: right;
  text-transform: lowercase;
}

.ui-input-slider-btn-set {
  width: 25px;
  background-color: #2c9fc9;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  line-height: 14px;
  text-align: center;
}

.ui-input-slider-btn-set:hover {
  background-color: #379b4a;
  cursor: pointer;
}

/\*
 \* UI Component
 \*/

/\* Checkbox \*/

.ui-checkbox {
  text-align: center;
  font-size: 16px;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  color: #fff;

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.ui-checkbox > input {
  display: none;
}

.ui-checkbox > label {
  font-size: 12px;
  padding: 0.333em 1.666em 0.5em;
  height: 1em;
  line-height: 1em;

  background-color: #888;
  background-image: url("disabled.png");
  background-position: center center;
  background-repeat: no-repeat;

  color: #fff;
  border-radius: 3px;
  font-weight: bold;
  float: left;
}

.ui-checkbox .text {
  padding-left: 34px;
  background-position: center left 10px;
}

.ui-checkbox .left {
  padding-right: 34px;
  padding-left: 1.666em;
  background-position: center right 10px;
}

.ui-checkbox > label:hover {
  cursor: pointer;
}

.ui-checkbox > input:checked + label {
  background-image: url("checked.png");
  background-color: #379b4a;
}

body {
  max-width: 1000px;
  margin: 0 auto;

  font-family: "Segoe UI", Arial, Helvetica, sans-serif;

  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#container {
  width: 100%;

  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/
/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/
/\*
 \* Preview Area
 \*/

#preview {
  height: 500px;
  border: 1px solid #ccc;
  border-radius: 3px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

#preview .content {
  width: 100%;
  height: 100%;
  display: block;
}

#preview input {
  color: #333;
  border: 1px solid #ccc;
  border-radius: 3px;
}

#subject {
  width: 400px;
  height: 150px;
  margin: 0 auto;
  border: 3px solid #c60;
  background: #fff;
  position: relative;
}

.radius {
  width: 50%;
  height: 50%;
  border: 1px solid #ccc;
  display: none;
  position: absolute;
  z-index: 1;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.handle {
  width: 16px;
  height: 16px;
  position: absolute;
  z-index: 2;
}

.handle-top-left {
  top: -12px;
  left: -12px;
  cursor: se-resize;
  background: url("resize-handle.png") top left no-repeat;
}

.handle-top-right {
  top: -12px;
  right: -12px;
  cursor: sw-resize;
  background: url("resize-handle.png") top right no-repeat;
}

.handle-bottom-right {
  bottom: -12px;
  right: -12px;
  cursor: nw-resize;
  background: url("resize-handle.png") bottom right no-repeat;
}

.handle-bottom-left {
  bottom: -12px;
  left: -12px;
  cursor: ne-resize;
  background: url("resize-handle.png") bottom left no-repeat;
}

.radius-container {
  position: absolute;
  display: block;
  z-index: 1;

  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/\* TOP LEFT \*/
#top-left {
  top: 0;
  left: 0;
}

#top-left .radius {
  border-top-left-radius: 100%;
  top: 0;
  left: 0;
}

/\* TOP RIGHT \*/
#top-right {
  top: 0;
  right: 0;
}

#top-right .radius {
  border-top-right-radius: 100%;
  top: 0;
  right: 0;
}

/\* BOTTOM RIGHT \*/
#bottom-right {
  bottom: 0;
  right: 0;
}

#bottom-right .radius {
  border-bottom-right-radius: 100%;
  bottom: 0;
  right: 0;
}

/\* BOTTOM lEFT \*/
#bottom-left {
  bottom: 0;
  left: 0;
}

#bottom-left .radius {
  border-bottom-left-radius: 100%;
  bottom: 0;
}

/\* INPUT SLIDERS \*/

#preview .ui-input-slider {
  margin: 10px;
  position: absolute;
  z-index: 10;
}

#radius-ui-sliders {
  width: 100%;
  height: 100%;
  min-height: 75px;
  min-width: 150px;
  padding: 20px 50px;
  top: -20px;
  left: -50px;
  position: relative;
}

#tlr {
  top: -30px;
  left: -50px;
  display: none;
}

#tlw {
  top: -30px;
  left: 30px;
}

#tlh {
  top: 20px;
  left: -50px;
}

#trr {
  top: -30px;
  right: -50px;
  display: none;
}

#trw {
  top: -30px;
  right: 30px;
}

#trh {
  top: 20px;
  right: -50px;
}

#brr {
  bottom: -30px;
  right: -50px;
  display: none;
}

#brw {
  bottom: -30px;
  right: 30px;
}

#brh {
  bottom: 20px;
  right: -50px;
}

#blr {
  bottom: -30px;
  left: -50px;
  display: none;
}

#blw {
  bottom: -30px;
  left: 30px;
}

#blh {
  bottom: 20px;
  left: -50px;
}

#preview .ui-input-slider-left,
#preview .ui-input-slider-right {
  visibility: hidden;
}

#preview .ui-input-slider-container:hover .ui-input-slider-left {
  visibility: visible;
}

#preview .ui-input-slider-container:hover .ui-input-slider-right {
  visibility: visible;
}

/\*
 \*
 \*/

#unit-selection {
  width: 200px;
  height: 75px;
  margin: 30px 30px 0 0;
  padding: 30px;
  border: 3px solid #555;
  border-radius: 10px;
  position: relative;
  float: right;
}

#unit-selection .info {
  height: 20%;
  width: 100%;
  line-height: 20%;
  font-size: 20px;
  text-align: center;
  position: relative;
  top: 40%;
}

#unit-selection .dropdown {
  width: 50px;
  height: 20px;
  margin: 10px;
  padding: 0;
  border-radius: 3px;
  position: absolute;
  overflow: hidden;
}

#unit-selection select {
  width: 50px;
  height: 20px;
  marign: 0;
  padding: 0 0 0 10px;
  background: #555;
  border: 1px solid #555;
  border: none;
  color: #fff;
  float: left;
}

#unit-selection select option {
  background: #fff;
  color: #333;
}

#unit-selection select:hover {
  cursor: pointer;
}

#unit-selection .dropdown:before {
  content: "";
  width: 18px;
  height: 20px;
  display: block;
  background-color: #555;
  background-image: url("dropdown.png");
  background-position: center center;
  background-repeat: no-repeat;
  top: 0px;
  right: 0px;
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

#unit-selection .unit-top-left {
  top: 0;
  left: 0;
  display: none;
}

#unit-selection .unit-top-left-w {
  top: -22px;
  left: 30px;
}

#unit-selection .unit-top-left-h {
  top: 20px;
  left: -37px;
}

#unit-selection .unit-top-right {
  top: 0;
  right: 0;
  display: none;
}

#unit-selection .unit-top-right-w {
  top: -22px;
  right: 30px;
}

#unit-selection .unit-top-right-h {
  top: 20px;
  right: -37px;
}

#unit-selection .unit-bottom-right {
  bottom: 0;
  right: 0;
  display: none;
}

#unit-selection .unit-bottom-right-w {
  bottom: -22px;
  right: 30px;
}

#unit-selection .unit-bottom-right-h {
  bottom: 20px;
  right: -37px;
}

#unit-selection .unit-bottom-left {
  bottom: 0;
  left: 0;
  display: none;
}

#unit-selection .unit-bottom-left-w {
  bottom: -22px;
  left: 30px;
}

#unit-selection .unit-bottom-left-h {
  bottom: 20px;
  left: -37px;
}

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/
/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

#radius-lock {
  width: 200px;
  height: 75px;
  margin: 30px 0 0 30px;
  padding: 30px;
  border: 3px solid #555;
  border-radius: 10px;
  position: relative;
  float: left;
}

#radius-lock .ui-checkbox {
  color: #fff;
  position: absolute;
}

#radius-lock .ui-checkbox > label {
  height: 20px;
  width: 34px;
  padding: 0;
}

#radius-lock .info {
  height: 20%;
  width: 100%;
  line-height: 20%;
  font-size: 20px;
  text-align: center;
  position: relative;
  top: 40%;
}

#radius-lock [data-topic="top-left"] {
  top: 10px;
  left: 10px;
}

#radius-lock [data-topic="top-right"] {
  top: 10px;
  right: 10px;
}

#radius-lock [data-topic="bottom-right"] {
  bottom: 10px;
  right: 10px;
}

#radius-lock [data-topic="bottom-left"] {
  bottom: 10px;
  left: 10px;
}

/\*\*
 \* Controls
 \*/

#dimensions {
  width: 200px;
  color: #444;
  float: left;
}

#dimensions input {
  background: #555;
  color: #fff;
  border: none;
  border-radius: 3px;
}

#output {
  width: 500px;
  padding: 10px 0;
  margin: 10px 0;
  color: #555;
  text-align: center;
  border: 1px dashed #999;
  border-radius: 3px;
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;

  float: right;
}
```

```
"use strict";

/\*\*
 \* UI-InputSliderManager
 \*/

var InputSliderManager = (function InputSliderManager() {
  var subscribers = {};
  var sliders = [];

  var InputComponent = function InputComponent(obj) {
    var input = document.createElement("input");
    input.setAttribute("type", "text");

    input.addEventListener("click", function (e) {
      this.select();
    });

    input.addEventListener("change", function (e) {
      var value = parseInt(e.target.value);

      if (isNaN(value) === true) setValue(obj.topic, obj.value);
      else setValue(obj.topic, value);
    });

    subscribe(obj.topic, function (value) {
      input.value = value + obj.unit;
    });

    return input;
  };

  var SliderComponent = function SliderComponent(obj, sign) {
    var slider = document.createElement("div");
    var startX = null;
    var start_value = 0;

    slider.addEventListener("click", function (e) {
      setValue(obj.topic, obj.value + obj.step \* sign);
    });

    slider.addEventListener("mousedown", function (e) {
      startX = e.clientX;
      start_value = obj.value;
      document.body.style.cursor = "e-resize";
      document.addEventListener("mousemove", sliderMotion);
    });

    document.addEventListener("mouseup", function (e) {
      document.removeEventListener("mousemove", sliderMotion);
      document.body.style.cursor = "auto";
      slider.style.cursor = "pointer";
    });

    var sliderMotion = function sliderMotion(e) {
      slider.style.cursor = "e-resize";
      var delta = ((e.clientX - startX) / obj.sensivity) | 0;
      var value = delta \* obj.step + start_value;
      setValue(obj.topic, value);
    };

    return slider;
  };

  var InputSlider = function (node) {
    var min = node.getAttribute("data-min") | 0;
    var max = node.getAttribute("data-max") | 0;
    var step = node.getAttribute("data-step") | 0;
    var value = node.getAttribute("data-value") | 0;
    var topic = node.getAttribute("data-topic");
    var unit = node.getAttribute("data-unit");
    var name = node.getAttribute("data-info");
    var sensivity = node.getAttribute("data-sensivity") | 0;

    this.min = min;
    this.max = max > 0 ? max : 100;
    this.step = step === 0 ? 1 : step;
    this.topic = topic;
    this.node = node;
    this.unit = unit;
    this.sensivity = sensivity > 0 ? sensivity : 5;

    var input = new InputComponent(this);
    var slider_left = new SliderComponent(this, -1);
    var slider_right = new SliderComponent(this, 1);

    slider_left.className = "ui-input-slider-left";
    slider_right.className = "ui-input-slider-right";

    if (name) {
      var info = document.createElement("span");
      info.className = "ui-input-slider-info";
      info.textContent = name;
      node.appendChild(info);
    }

    node.appendChild(slider_left);
    node.appendChild(input);
    node.appendChild(slider_right);
    node.className = "ui-input-slider ui-input-slider-container";

    this.input = input;
    sliders[topic] = this;
    setValue(topic, value);
  };

  var setValue = function setValue(topic, value, send\_notify) {
    var slider = sliders[topic];
    if (slider === undefined) return;

    if (value > slider.max) value = slider.max;
    if (value < slider.min) value = slider.min;

    slider.value = value;
    slider.node.setAttribute("data-value", value);

    if (send_notify !== undefined && send_notify === false) {
      slider.input.value = value + slider.unit;
      return;
    }

    notify.call(slider);
  };

  var setMax = function setMax(topic, value) {
    var slider = sliders[topic];
    if (slider === undefined) return;

    slider.max = value;
    setValue(topic, slider.value);
  };

  var setMin = function setMin(topic, value) {
    var slider = sliders[topic];
    if (slider === undefined) return;

    slider.min = value;
    setValue(topic, slider.value);
  };

  var setUnit = function setUnit(topic, unit) {
    var slider = sliders[topic];
    if (slider === undefined) return;

    slider.unit = unit;
    setValue(topic, slider.value);
  };

  var getNode = function getNode(topic) {
    return sliders[topic].node;
  };

  var subscribe = function subscribe(topic, callback) {
    if (subscribers[topic] === undefined) subscribers[topic] = [];
    subscribers[topic].push(callback);
  };

  var unsubscribe = function unsubscribe(topic, callback) {
    subscribers[topic].indexOf(callback);
    subscribers[topic].splice(index, 1);
  };

  var notify = function notify() {
    for (var i in subscribers[this.topic]) {
      subscribers[this.topic][i](this.value);
    }
  };

  var init = function init() {
    var elem = document.querySelectorAll(".ui-input-slider");
    var size = elem.length;
    for (var i = 0; i < size; i++) new InputSlider(elem[i]);
  };

  return {
    init: init,
    setMax: setMax,
    setMin: setMin,
    setUnit: setUnit,
    getNode: getNode,
    setValue: setValue,
    subscribe: subscribe,
    unsubscribe: unsubscribe,
  };
})();

/\*\*
 \* UI-ButtonManager
 \*/

var ButtonManager = (function CheckBoxManager() {
  var subscribers = [];
  var buttons = [];

  var CheckBox = function CheckBox(node) {
    var topic = node.getAttribute("data-topic");
    var state = node.getAttribute("data-state");
    var name = node.getAttribute("data-label");
    var align = node.getAttribute("data-text-on");

    state = state === "true";

    var checkbox = document.createElement("input");
    var label = document.createElement("label");

    var id = "checkbox-" + topic;
    checkbox.id = id;
    checkbox.setAttribute("type", "checkbox");
    checkbox.checked = state;

    label.setAttribute("for", id);
    if (name) {
      label.className = "text";
      if (align) label.className += " " + align;
      label.textContent = name;
    }

    node.appendChild(checkbox);
    node.appendChild(label);

    this.node = node;
    this.topic = topic;
    this.checkbox = checkbox;

    checkbox.addEventListener(
      "change",
      function (e) {
        notify.call(this);
      }.bind(this),
    );

    buttons[topic] = this;
  };

  var getNode = function getNode(topic) {
    return buttons[topic].node;
  };

  var setValue = function setValue(topic, value) {
    try {
      buttons[topic].checkbox.checked = value;
    } catch (error) {
      console.log(error);
    }
  };

  var subscribe = function subscribe(topic, callback) {
    if (subscribers[topic] === undefined) subscribers[topic] = [];

    subscribers[topic].push(callback);
  };

  var unsubscribe = function unsubscribe(topic, callback) {
    subscribers[topic].indexOf(callback);
    subscribers[topic].splice(index, 1);
  };

  var notify = function notify() {
    for (var i = 0; i < subscribers[this.topic].length; i++)
      subscribers[this.topic][i](this.checkbox.checked);
  };

  var init = function init() {
    var elem = document.querySelectorAll(".ui-checkbox");
    var size = elem.length;
    for (var i = 0; i < size; i++) new CheckBox(elem[i]);
  };

  return {
    init: init,
    setValue: setValue,
    subscribe: subscribe,
    unsubscribe: unsubscribe,
  };
})();

window.addEventListener("load", function () {
  BorderRadius.init();
});

var BorderRadius = (function BorderRadius() {
  function getElemById(id) {
    return document.getElementById(id);
  }

  /\*\*
 \* Shadow dragging
 \*/
  var PreviewMouseTracking = (function Drag() {
    var active = false;
    var lastX = 0;
    var lastY = 0;
    var subscribers = [];

    var init = function init(id) {
      var elem = getElemById(id);
      elem.addEventListener("mousedown", dragStart, false);
      document.addEventListener("mouseup", dragEnd, false);
    };

    var dragStart = function dragStart(e) {
      if (e.button !== 0) return;

      active = true;
      lastX = e.clientX;
      lastY = e.clientY;
      document.addEventListener("mousemove", mouseDrag, false);
    };

    var dragEnd = function dragEnd(e) {
      if (e.button !== 0) return;

      if (active === true) {
        active = false;
        document.removeEventListener("mousemove", mouseDrag, false);
      }
    };

    var mouseDrag = function mouseDrag(e) {
      notify(e.clientX - lastX, e.clientY - lastY);
      lastX = e.clientX;
      lastY = e.clientY;
    };

    var subscribe = function subscribe(callback) {
      subscribers.push(callback);
    };

    var unsubscribe = function unsubscribe(callback) {
      var index = subscribers.indexOf(callback);
      subscribers.splice(index, 1);
    };

    var notify = function notify(deltaX, deltaY) {
      for (var i in subscribers) subscribers[i](deltaX, deltaY);
    };

    return {
      init: init,
      subscribe: subscribe,
      unsubscribe: unsubscribe,
    };
  })();

  var subject;
  var units = ["px", "%"];
  var output = null;

  var UnitSelector = function UnitSelector(topic) {
    this.container = document.createElement("div");
    this.select = document.createElement("select");
    for (var i in units) {
      var option = document.createElement("option");
      option.value = i;
      option.textContent = units[i];
      this.select.appendChild(option);
    }

    this.container.className = "dropdown " + "unit-" + topic;
    this.container.appendChild(this.select);
  };

  UnitSelector.prototype.setValue = function setValue(value) {
    this.salect.value = value;
  };

  var RadiusContainer = function RadiusContainer(node) {
    var radius = document.createElement("div");
    var handle = document.createElement("div");
    var x = node.getAttribute("data-x");
    var y = node.getAttribute("data-y");
    var active = false;

    this.id = node.id;
    this.node = node;
    this.radius = radius;
    this.handle = handle;
    this.width = 100;
    this.height = 50;
    this.size = 0;
    this.rounded = false;

    this.unitX = 0;
    this.unitY = 0;
    this.unitR = 0;

    this.maxW = 100;
    this.maxH = 100;
    this.maxR = 100;

    this.topic = y + "-" + x;

    var sliderW = InputSliderManager.getNode(this.topic + "-w");
    var sliderH = InputSliderManager.getNode(this.topic + "-h");
    var sliderR = InputSliderManager.getNode(this.topic);

    this.setUnitX(this.unitX);
    this.setUnitY(this.unitY);
    this.setUnitR(this.unitR);

    this.updateWidth();
    this.updateHeight();
    this.updateRadius();

    if (x === "left") this.resizeX = 1;
    if (x === "right") this.resizeX = -1;
    if (y === "top") this.resizeY = 1;
    if (y === "bottom") this.resizeY = -1;

    radius.className = "radius";

    var unit_selector = document.getElementById("unit-selection");
    var unitW = new UnitSelector(this.topic + "-w");
    var unitH = new UnitSelector(this.topic + "-h");
    var unitR = new UnitSelector(this.topic);

    unit_selector.appendChild(unitW.container);
    unit_selector.appendChild(unitH.container);
    unit_selector.appendChild(unitR.container);
    node.appendChild(radius);
    subject.appendChild(handle);

    unitW.select.addEventListener(
      "change",
      function (e) {
        this.setUnitX(e.target.value | 0);
      }.bind(this),
    );

    unitH.select.addEventListener(
      "change",
      function (e) {
        this.setUnitY(e.target.value | 0);
      }.bind(this),
    );

    unitR.select.addEventListener(
      "change",
      function (e) {
        this.setUnitR(e.target.value | 0);
      }.bind(this),
    );

    if (x === "left" && y == "top") handle.className = "handle handle-top-left";
    if (x === "right" && y == "top")
      handle.className = "handle handle-top-right";
    if (x === "right" && y == "bottom")
      handle.className = "handle handle-bottom-right";
    if (x === "left" && y == "bottom")
      handle.className = "handle handle-bottom-left";

    handle.addEventListener(
      "mousedown",
      function (e) {
        active = true;
        this.radius.style.display = "block";
        PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
      }.bind(this),
    );

    document.addEventListener(
      "mouseup",
      function (e) {
        this.radius.style.display = "none";
        if (active === true)
          PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
      }.bind(this),
    );

    InputSliderManager.subscribe(this.topic + "-w", this.setWidth.bind(this));
    InputSliderManager.subscribe(this.topic + "-h", this.setHeight.bind(this));
    InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));

    ButtonManager.subscribe(
      this.topic,
      function (value) {
        this.rounded = value;
        if (value === true) {
          unitW.container.style.display = "none";
          unitH.container.style.display = "none";
          unitR.container.style.display = "block";
          sliderW.style.display = "none";
          sliderH.style.display = "none";
          sliderR.style.display = "block";
          this.setUnitR(this.unitR);
          this.updateRadius();
        }

        if (value === false) {
          unitW.container.style.display = "block";
          unitH.container.style.display = "block";
          unitR.container.style.display = "none";
          sliderW.style.display = "block";
          sliderH.style.display = "block";
          sliderR.style.display = "none";
          this.setUnitX(this.unitX);
          this.setUnitY(this.unitY);
          this.updateWidth();
          this.updateHeight();
        }

        this.updateBorderRadius();
      }.bind(this),
    );

    this.updateBorderRadius();
  };

  RadiusContainer.prototype.updateWidth = function updateWidth() {
    this.node.style.width = this.width + units[this.unitX];
    var value = Math.round(this.width / 2);
    InputSliderManager.setValue(this.topic + "-w", value, false);
  };

  RadiusContainer.prototype.updateHeight = function updateHeight() {
    this.node.style.height = this.height + units[this.unitY];
    var value = Math.round(this.height / 2);
    InputSliderManager.setValue(this.topic + "-h", value, false);
  };

  RadiusContainer.prototype.updateRadius = function updateRadius() {
    var value = Math.round(this.size / 2);
    this.node.style.width = this.size + units[this.unitR];
    this.node.style.height = this.size + units[this.unitR];
    InputSliderManager.setValue(this.topic, value, false);
  };

  RadiusContainer.prototype.setWidth = function setWidth(value) {
    this.radius.style.display = "block";
    this.width = 2 \* value;
    this.node.style.width = this.width + units[this.unitX];
    this.updateBorderRadius();
  };

  RadiusContainer.prototype.setHeight = function setHeight(value) {
    this.radius.style.display = "block";
    this.height = 2 \* value;
    this.node.style.height = this.height + units[this.unitY];
    this.updateBorderRadius();
  };

  RadiusContainer.prototype.setRadius = function setRadius(value) {
    this.radius.style.display = "block";
    this.size = 2 \* value;
    this.node.style.width = this.size + units[this.unitR];
    this.node.style.height = this.size + units[this.unitR];
    this.updateBorderRadius();
  };

  RadiusContainer.prototype.setUnitX = function setUnitX(value) {
    this.unitX = value;
    if (this.unitX === 0) this.maxW = 2 \* subject.clientWidth;
    if (this.unitX === 1) this.maxW = 200;
    InputSliderManager.setUnit(this.topic + "-w", units[this.unitX]);
    InputSliderManager.setMax(this.topic + "-w", this.maxW / 2);
  };

  RadiusContainer.prototype.setUnitY = function setUnitY(value) {
    this.unitY = value;
    if (this.unitY === 0) this.maxH = 2 \* subject.clientHeight;
    if (this.unitY === 1) this.maxH = 200;
    InputSliderManager.setUnit(this.topic + "-h", units[this.unitY]);
    InputSliderManager.setMax(this.topic + "-h", this.maxH / 2);
  };

  RadiusContainer.prototype.setUnitR = function setUnitR(value) {
    this.unitR = value;

    if (this.unitR === 0)
      this.maxR = 2 \* Math.min(subject.clientHeight, subject.clientWidth);

    if (this.unitR === 1) this.maxR = 200;

    InputSliderManager.setUnit(this.topic, units[this.unitR]);
    InputSliderManager.setMax(this.topic, this.maxR / 2);
  };

  RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
    if (this.rounded) {
      this.setUnitR(this.unitR);
      return;
    }

    if (unit === 0) this.setUnitX(this.unitX);

    if (unit === 1) this.setUnitY(this.unitY);
  };

  RadiusContainer.prototype.composeBorderRadius =
    function composeBorderRadius() {
      if (this.rounded === true) {
        var unit = units[this.unitR];
        var value = Math.round(this.size / 2);
        return value + unit;
      }

      var unitX = units[this.unitX];
      var unitY = units[this.unitY];
      var valueX = Math.round(this.width / 2);
      var valueY = Math.round(this.height / 2);

      if (valueX === valueY && this.unitX === this.unitY) return valueX + unitX;

      return valueX + unitX + " " + valueY + unitY;
    };

  RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius() {
    var radius = this.composeBorderRadius();
    var corner = 0;

    if (this.topic === "top-left") {
      subject.style.borderTopLeftRadius = radius;
      corner = 0;
    }

    if (this.topic === "top-right") {
      subject.style.borderTopRightRadius = radius;
      corner = 1;
    }

    if (this.topic === "bottom-right") {
      subject.style.borderBottomRightRadius = radius;
      corner = 2;
    }

    if (this.topic === "bottom-left") {
      subject.style.borderBottomLeftRadius = radius;
      corner = 3;
    }

    Tool.updateOutput(corner, radius);
  };

  RadiusContainer.prototype.updateContainer = function updateContainer(
    deltaX,
 deltaY,
  ) {
    if (this.rounded === true) {
      this.size += this.resizeX \* deltaX + this.resizeY \* deltaY;
      if (this.size < 0) this.size = 0;
      if (this.size > this.maxR) this.size = this.maxR;
      this.updateRadius();
      this.updateBorderRadius();
      return;
    }

    if (deltaX) {
      this.width += this.resizeX \* deltaX;
      if (this.width < 0) this.width = 0;
      if (this.width > this.maxW) this.width = this.maxW;
      this.updateWidth();
    }

    if (deltaY) {
      this.height += this.resizeY \* deltaY;
      if (this.height < 0) this.height = 0;
      if (this.height > this.maxH) this.height = this.maxH;
      this.updateHeight();
    }

    if (deltaX || deltaY) this.updateBorderRadius();
  };

  /\*\*
 \* Tool Manager
 \*/
  var Tool = (function Tool() {
    var preview;
    var preview_ui;
    var radius_containers = [];
    var border_width = 3;
    var borders1 = [null, null, null, null];
    var borders2 = [0, 0, 0, 0];

    var updateUIWidth = function updateUIWidth(value) {
      var pwidth = subject.parentElement.clientWidth;
      var left = (pwidth - value) / 2;
      subject.style.width = value + "px";

      for (var i = 0; i < 4; i++) radius_containers[i].updateUnits(0);
    };

    var updateUIHeight = function updateUIHeight(value) {
      var pheight = subject.parentElement.clientHeight;
      var top = (pheight - value) / 2;
      subject.style.height = value + "px";
      subject.style.top = top - border_width + "px";

      for (var i = 0; i < 4; i++) radius_containers[i].updateUnits(1);
    };

    var updatePreviewUIWidth = function updatePreviewUIWidth() {
      var p = subject.parentElement.clientWidth;
      var v = preview_ui.clientWidth;
      console.log(p, v, (p - v) / 2);
      preview_ui.style.left = (p - v) / 2 + "px";
    };

    var updatePreviewUIHeight = function updatePreviewUIHeight() {
      var p = subject.parentElement.clientHeight;
      var v = preview_ui.clientHeight;
      console.log(p, v, (p - v) / 2);
      preview_ui.style.top = (p - v) / 2 + "px";
    };

    var updateOutput = function updateOutput(corner, radius) {
      var values = radius.split(" ");

      borders1[corner] = values[0];
      borders2[corner] = values[0];

      if (values.length === 2) borders2[corner] = values[1];

      var border_1_value = borders1.join(" ");
      var border_2_value = borders2.join(" ");
      var border_radius = "border-radius: " + border_1_value;

      if (border_2_value !== border_1_value)
        border_radius += " / " + border_2_value;

      border_radius += ";";
      output.textContent = border_radius;
    };

    var init = function init() {
      preview = getElemById("preview");
      subject = getElemById("subject");
      output = getElemById("output");
      preview_ui = getElemById("radius-ui-sliders");

      var elem = document.querySelectorAll(".radius-container");
      var size = elem.length;
      for (var i = 0; i < size; i++)
        radius_containers[i] = new RadiusContainer(elem[i]);

      InputSliderManager.subscribe("width", updateUIWidth);
      InputSliderManager.subscribe("height", updateUIHeight);

      InputSliderManager.setValue("width", subject.clientWidth);
      InputSliderManager.setValue("height", subject.clientHeight);
    };

    return {
      init: init,
      updateOutput: updateOutput,
    };
  })();

  /\*\*
 \* Init Tool
 \*/
  var init = function init() {
    ButtonManager.init();
    InputSliderManager.init();
    PreviewMouseTracking.init("preview");
    Tool.init();
  };

  return {
    init: init,
  };
})();
```


Implementando sprites de imagens em CSS - CSS

Implementando sprites de imagens em CSS
=======================================

**Sprites de imagens** são utilizados em diversas aplicações web onde várias imagens são usadas. Ao invés de incluir cada arquivo de imagem separadamente, é mais amigável com a memória e largura de banda enviar tudo como uma única imagem, diminuindo o número de pedidos em HTTP.

**Nota:** Quando usando HTTP/2, é mais amigável com a largura de banda usar vários pequenos pedidos.

Implementação
-------------

Suponha que uma imagem é dada a cada item com a classe `toolbtn`:

```css
.toolbtn {
  background: url(myfile.png);
  display: inline-block;
  height: 20px;
  width: 20px;
}
```

A posição do plano de fundo pode ser adicionada tanto com dois valores x, y depois de `url()` (en-US) em background , ou como `background-position` (en-US) . Por exemplo:

```css
#btn1 {
  background-position: -20px 0px;
}

#btn2 {
  background-position: -40px 0px;
}
```

Isso vai mover o elemento com a ID 'btn1' 20 pixels para a esquerda e o elemento com a ID 'btn2' 40 pixels para a esquerda (presumindo que ambos tem a classe `toolbtn` atribuída e estão sendo afetados pela regra da imagem acima).

De forma similar, você pode criar um efeito de hover com:

```css
#btn:hover {
  background-position: <pixels para direita>px <pixels para baixo>px;
}
```

Veja também
-----------

* Demo completa em CSS Tricks


Using CSS transitions - CSS

Using CSS transitions
=====================

**CSS transitions** provê uma forma de controlar a velocidade de uma animação quando há mudanças de propriedades CSS. Ao invés de uma propriedade entrar em vigor imediatamente, você pode fazer com que as mudanças em uma propriedade ocorram durante um periodo de tempo. Por exemplo, se você mudar a cor de um elemento de branco para preto, a alteração será instantanea. Utilizando transições CSS, as alterações acontecem em uma intervalo de tempo que seguem uma curva de aceleração, e todas podem ser personalizadas

Animações que envolvem transições entre dois estados geralmente são chamadas de *transições implicitas,* como os estados entre o começo e o fim são implicitamente definidos pelo browser

![A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.](/files/4529/TransitionsPrinciple.png)

Animações CSS permitem que você decida quais propriedades animar (listando-os explicitamente), quando a animação deve começar (definindo o delay), quão longa a transição será (definindo a duração), e como a transição irá ocorrer (definindo o tempo da função, linear ou rápido no início, lento no final).

Quais propriedade CSS podem transicionadas?
-------------------------------------------

Você mesmo pode definir qual propriedade será transicionada e de qual maneira. E isso permite a criação de transições complexas. Como não faz sentido animar algumas propriedades, existe uma lista finita com propriedades que podem ser transicionadas (en-US).

**Nota:** A lista de propriedades que podem ser animadas sofre alterações a medida que a especificação se desenvolve.

**Nota:** O valor `automatico` , geralmente é complexo. A especificação recomenda não animar com valores automaticos. Alguns user agents, como aqueles baseados no Genko, implementam esse requisito, como aqueles baseados no WebKit, são menos rigosos. Animações CSS que utlizam o valor `automatico`, podem levar resultados imprevisiveis, dependendo do Browser e da versão, e isso pode ser evitado.

Definindo transições
--------------------

Transições CSS são controladas usando a propriedade `transition`. Essa é a melhor maneira de configurar uma transição, assim evitamos parâmetros fora de sintonia, o que pode ser muito frustrante desperdiçar tanto tempo debuggando CSS.

Você pode controlar componentes individuais da transição com a seguinte sub propriedade:

**(Observe que essas transições fazem um loop infinitamente apenas para o propósito de nossos exemplos; `transitions` apenas visualizam a mudança na propriedade de começo ao fim. Se você precisar de visualizações desse loop, procure na propriedade `animation`.)**

`transition-property` (en-US)

Especifica o nome ou nomes das propriedades CSS que as transições serão aplicadas. Somente as propriedades listadas aqui serão animadas durante a transição; alterações e todas outras propriedades ocorrem instantaneamente.

`transition-duration` (en-US)

Especifica a duração em que as transições devem ocorrer. Você pode especificar uma única duração que se aplica a todas as propriedades durante a transição ou vários valores para permitir que cada propriedade faça a transição em um período de tempo diferente.

`transition-duration: 0.5s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top transform -webkit-transform color;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}
.box1 {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top transform -webkit-transform color;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transformv color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-duration: 1s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top -webkit-transform color;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform color;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}
.box1 {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top -webkit-transform transform color;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-duration: 2s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top transform -webkit-transform color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
}
.box1 {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top transform -webkit-transform color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-duration: 4s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top transform -webkit-transform color;
  -webkit-transition-duration: 4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 4s;
  transition-timing-function: ease-in-out;
}
.box1 {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top transform -webkit-transform color;
  -webkit-transition-duration: 4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 4s;
  transition-timing-function: ease-in-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-timing-function`

![](/files/3434/TF_with_output_gt_than_1.png) Especifica uma função para definir como os valores intermediários das propriedades são calculados. As timing functions (en-US) determinam como os valores intermediários da transição são calculados. A maioria das funções de temporização pode ser especificada fornecendo o gráfico da função correspondente, conforme definido por quatro pontos definindo um bezier cúbico. Você também pode escolher o Easing Functions Cheat Sheet.

`transition-timing-function: ease`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-timing-function: ease;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-timing-function: ease;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-timing-function: linear`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-timing-function: linear;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-timing-function: linear;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-timing-function: step-end`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: step-end;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-timing-function: step-end;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: step-end;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-timing-function: step-end;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-timing-function: steps(4, end)`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: steps(4, end);
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-timing-function: steps(4, end);
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: steps(4, end);
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-timing-function: steps(4, end);
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-delay`

Define quanto tempo esperar entre o momento que uma propriedade é alterada e a transição começa.

`transition-delay: 0.5s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 0.5s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-delay: 0.5s;
  transition-timing-function: linear;
}

.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 0.5s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-delay: 0.5s;
  transition-timing-function: linear;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-delay: 1s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 1s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-delay: 1s;
  transition-timing-function: linear;
}

.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 1s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-delay: 1s;
  transition-timing-function: linear;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-delay: 2s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 2s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-delay: 2s;
  transition-timing-function: linear;
}

.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 2s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-delay: 2s;
  transition-timing-function: linear;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-delay: 4s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-delay: 4s;
  transition-timing-function: ease-in-out;
}

.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-delay: 4s;
  transition-timing-function: ease-in-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

A sintaxe do CSS é abreviada da seguinte forma:

```css
div {
  transition: <property> <duration> <timing-function> <delay>;
}
```

Exemplos
--------

### Exemplo simples

Esse exemplo executa uma transição de com duração de 4 segundos de delay entre o tempo que o usuário passa o mouse sobre o elemento (evento mouseover), e o início do efeito da animação

```css
#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}
```

### Exemplo de multiplicas animações de propriedades
```

<body>
  <p>
    The box below combines transitions for: width, height, background-color,
    transform. Hover over the box to see these properties animated.
  </p>
  <div class="box">Sample</div>
</body>
```

#### Conteúdo CSS

```css
.box {
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #0000ff;
  -webkit-transition:
    width 2s,
    height 2s,
    background-color 2s,
    -webkit-transform 2s;
  transition:
    width 2s,
    height 2s,
    background-color 2s,
    transform 2s;
}

.box:hover {
  background-color: #ffcccc;
  width: 200px;
  height: 200px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
```

### Quando os tamanhos dos valores das listas das propriedades são de tamanhos diferentes

Se alguma propriedade da lista de valores for menor que os outros, esse valor será repetido para que eles correspondam. Por exemplo:

```css
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}
```

Isso é tratado como se fosse:

```css
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}
```

Da mesma forma, se um valor da propriedade da lista, for maior que a `transition-property` (en-US), ela será truncada, então você terá o seguinte CSS:

```css
div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}
```

Isso pode ser interpretado como:

```css
div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}
```

### Usando transições ao destacar menus

Um uso comum de css é para destacar os itens do menu, como hover quando o usúario passa o mouse sobre um elemento. É facíl fácil usar transições CSS para tornar o efeito mais atraente;

Antes de olharmos para os códigos, você poderia dar uma olhada nesse live demo (assumindo que seu browser suporte transições).

Primeiro, nós criamos o menu utilizando apenas HTML

```html
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact Us</a>
  <a href="#">Links</a>
</nav>
```

Em seguida, nós implementamos o CSS para implementar o visual e aparência do nosso menu. As partes relevantes são serão mostrada aqui:

```css
a {
  color: #fff;
  background-color: #333;
  transition: all 1s ease-out;
}

a:hover,
a:focus {
  color: #333;
  background-color: #fff;
}
```

Este CSS estabelece a aparência do menu, com as cores de fundo e texto mudando quando o o ocorre o evento de `:hover` e estado de `:focus`.

Exemplos JavaScript
-------------------

**Nota:** Cuidados devem ser tomados ao usar uma transição imediatamente após:

* adding the element to the DOM using `.appendChild()`
* removing an element's `display: none;` property.

This is treated as if the initial state had never occurred and the element was always in its final state. The easy way to overcome this limitation is to apply a `window.setTimeout()` of a handful of milliseconds before changing the CSS property you intend to transition to.

### Using transitions to make JavaScript functionality smooth

Transitions are a great tool to make things look much smoother without having to do anything to your JavaScript functionality. Take the following example.

```html
<p>Click anywhere to move the ball</p>
<div id="foo"></div>
```

Using JavaScript you can make the effect of moving the ball to a certain position happen:

```js
var f = document.getElementById("foo");
document.addEventListener(
  "click",
  function (ev) {
    f.style.transform = "translateY(" + (ev.clientY - 25) + "px)";
    f.style.transform += "translateX(" + (ev.clientX - 25) + "px)";
  },
  false,
);
```

With CSS you can make it smooth without any extra effort. Simply add a transition to the element and any change will happen smoothly:

```css
p {
  padding-left: 60px;
}

#foo {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
}
```

Você pode brincar um pouco aqui: http://jsfiddle.net/9h261pzo/291/

### Detectando o começo e a completude de uma transição

Você pode usar o evento `transitionend (en-US)` para detectar a uma animação que estava sendo executada chegou ao fim. Esse é o objeto `TransitionEvent` (en-US), que possúi duas propriedades adicionadas além do objeto típico

`propertyName`

A string indicando o nome da propriedade CSS cuja transição será completada

`elapsedTime`

A float indicating the number of seconds the transition had been running at the time the event fired. This value isn't affected by the value of `transition-delay`.

As usual, you can use the `addEventListener()` method to monitor for this event:

```js
el.addEventListener("transitionend", updateTransition, true);
```

Você detecta o começo de uma transição usando `transitionrun` (antes do delay) e `transitionstart` (depois do delay):

```js
el.addEventListener("transitionrun", signalStart, true);
el.addEventListener("transitionstart", signalStart, true);
```

**Nota:**: O evento `transitionend` não dispara se a transição é abortada antes de a transição ser concluída, porque o efeito é feito com `display``: none`

Especificações
--------------

| Specification |
| --- |
| CSS Transitions  |

Veja Também
-----------

* The `TransitionEvent` (en-US) interface and the `transitionend (en-US)` event.
* Utilizando animações css


MathML element reference - MathML

MathML element reference
========================

Essa é uma lista alfabética dos elementos de **apresentação** de MathML.

O termo **marcação de apresentação** é usado para descrever a estrutura da notação matemática, enquanto que **marcação de conteúdo** fornece um significado matemático básico e não é feito para ser renderizado pelo parser de MathML (ver Erro do Firefox 276028). Se você desejar aprender mais sobre marcação de conteúdo considere o Capítulo 4 na especificação do MathML 3.

### math

* `<math> (en-US)` (Elemento de alto nível)
### A

* `<maction> (en-US)` (Binded actions to sub-expressions)
* `<maligngroup>` (Grupo de alinhamento)
* `<malignmark>` (Pontos de alinhamento)
### E

* `<menclose> (en-US)` (Enclosed contents)
* `<merror> (en-US)` (Enclosed syntax error messages)
### F

* `<mfenced> (en-US)` (Parenteses)
* `<mfrac> (en-US)` (Fração)
### G

* `<mglyph>` (Exibindo símbolos non-standard)
### I

* `<mi> (en-US)` (Identifier)
### L

* `<mlabeledtr>` (Labeled row in a table or a matrix)
* `<mlongdiv>` (Notação de longa divisão)
### M

* `<mmultiscripts> (en-US)` (Prescripts and tensor indices)
### N

* `<mn> (en-US)` (Número)
### O

* `<mo> (en-US)` (Operador)
* `<mover> (en-US)` (Overscript)
### P

* `<mpadded> (en-US)` (Space around content)
* `<mphantom> (en-US)` (Invisible content with reserved space)
### R

* `<mroot> (en-US)` (Radical with specified index)
* `<mrow> (en-US)` (Grouped sub-expressions)
### S

* `<ms> (en-US)` (String literal)
* `<mscarries>` (Annotations such as carries)
* `<mscarry>` (Single carry, child element of `<mscarries>`)
* `<msgroup>` (Grouped rows of `<mstack>` and `<mlongdiv>` elements)
* `<msline>` (Linhas horizontais dentro de elementos `<mstack>`)
* `<mspace> (en-US)` (Espaço)
* `<msqrt> (en-US)` (Raiz quadrada sem index)
* `<msrow>` (Colunas nos elementos `<mstack>`)
* `<mstack>` (Stacked alignment)
* `<mstyle> (en-US)` (Style change)
* `<msub> (en-US)` (Subscript)
* `<msup> (en-US)` (Superscript)
* `<msubsup> (en-US)` (Subscript-superscript pair)
### T

* `<mtable> (en-US)` (Tabela ou matriz)
* `<mtd> (en-US)` (Célula numa tabela ou matriz)
* `<mtext> (en-US)` (Texto)
* `<mtr> (en-US)` (Coluna numa tabela ou matriz)
### U

* `<munder> (en-US)` (Underscript)
* `<munderover> (en-US)` (Underscript-overscript pair)
### Other elements

* `<semantics> (en-US)` (Container for semantic annotations)
* `<annotation>` (en-US) (Anotações de dados)
* `<annotation-xml>` (en-US) (Anotações XML)
Ver também
----------

* MathML
* Referência de atributos de MathML (en-US)


Exemplos - MathML

Exemplos
========

Abaixo você irá encontrar alguns exemplos que irá ajudá-lo a entender como utilizar MathML para apresentar conceitos matemáticos complexos na Web.

Teorema de Pitágoras (en-US)

Pequeno exemplo mostrando a demostração do Teorema de Pitágoras.

Solução da equação do segundo grau (en-US)

Linhas gerais de como descobrir a solução para equações do segundo grau.

Testes para MathML

Grande conjunto de tests para MathML.


Quirks Mode e Standards Mode - HTML: Linguagem de Marcação de Hipertexto

Quirks Mode e Standards Mode
============================

Nos velhos dias da web, páginas eram tipicamente escritas em duas versões: Uma para o Netscape Navigator, e outra para o Microsoft Internet Explorer. Quando os padrões web foram criados pelo W3C, navegadores não puderam começar a usá-los imediatamente, pois isto iria quebrar a maior parte dos sites existentes na web. Portanto os navegadores introduziram dois modos para tratar os novos padrões em sites condescendentes diferentemente dos antigos sites legados.

Existem agora três modos usados pelos mecanismos de layout nos navegadores web: "quirks mode" ("modo equivocado"), "almost standards mode" ("modo quase padrão"), e "full standards mode" ("modo de padrões completos"). Em **quirks mode**, o layout emula o comportamento não-padrão do Netscape Navigator 4 e do Internet Explorer 5 para Windows que é requerido para não quebrar o conteúdo existente na Web. No **full standards mode**, o comportamento é (espera-se) o descrito pelas especificações do HTML e CSS. No **almost standards mode**, há apenas um número muito pequeno de peculiaridades não-padrão implementadas.

Como os navegadores determinam qual modo usar?
----------------------------------------------

Para documentos HTML, os navegadores usam um DOCTYPE no início do documento para decidir se os tratarão em *quirks mode* ou *standards mode*. Para garantir que sua página use o *full standards mode*, certifique-se que sua página tenha um DOCTYPE como deste exemplo:

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Olá Mundo!</title>
  </head>
  <body></body>
</html>
```

O DOCTYPE mostrado no exemplo, `<!DOCTYPE html>`, é o mais simples possível, e o recomendado pelo HTML5. As versões anteriores do HTML padrão recomendavam outras variantes, mas todos os navegadores existentes hoje irão usar o *full standards mode* para este DOCTYPE, até mesmo o Internet Explorer 6. Não há razões válidas para usar um DOCTYPE mais complicado. Se você usar outro DOCTYPE, você pode correr o risco de escolher um que acione o almost *standards mode* ou o *quirks mode*.

Certifique-se de colocar o DOCTYPE logo no início de seu documento HTML. Qualquer coisa antes do DOCTYPE, como um comentário ou uma declaração XML irá acionar o *quirks mode* no Internet Explorer 9 e versões anteriores.

Em HTML5, o único propósito do DOCTYPE é de ativar o *full standards mode*. Versões mais antigas do padrão HTML deram significado adicional ao DOCTYPE, mas nenhum navegador jamais usou o DOCTYPE para qualquer outra coisa além de alternar entre o *quirks mode* e o *standards mode*.

Veja também uma descrição detalhada de quando diferentes navegadores escolhem diferentes modos.

### XHTML

Se você servir sua página como XHTML usando o MIME type `application/xhtml+xml` no cabeçalho HTTP `Content-Type`, você não precisará de um DOCTYPE para ativar o *full standards mode*, já que tais documentos sempre usam este modo. Note porém que servir suas páginas como `application/xhtml+xml` irá fazer com que o Internet Explorer 8 (e anteriores) mostre uma caixa de diálogo para download de um formato desconhecido ao invés de exibir sua página, pois a primeira versão do Internet Explorer com suporte ao XHTML é o Internet Explorer 9.

Se você servir conteúdo como XHTML usando o MIME type `text/html`, os navegadores irão lê-lo como HTML, e você precisará colocar o DOCTYPE para usar o *standards mode*.

Como faço para ver o modo usado?
--------------------------------

No Firefox, selecione *Propriedades da página* no menu de contexto, e procure por *Renderização*.

No Internet Explorer, pressione *F12*, e procure por *Modo de Documento*.

Quais as diferenças entre os modos?
-----------------------------------

Veja a lista de peculiaridades ("quirks") e "almost standards mode" para entender a diferença entre estes modos.


Referência HTML - HTML: Linguagem de Marcação de Hipertexto

Referência HTML
===============

Esta referência de HTML descreve todos os **elementos** e **atributos** do HTML, incluindo **atributos globais** que se aplicam a todos elementos.

Referência de elementos do HTML

Esta página lista todos os elementos do HTML que são criados usando tags.

Referência de atributos do HTML

Os elementos do HTML contêm atributos, que são valores adicionais que configuram os elementos ou ajustam seu comportamento de várias formas, para que se adaptem aos critérios dos usuários.

Atributos globais

Atributos globais são atributos comuns a todos os elementos do HTML; podem ser usados em todos os elementos, embora possam não ter efeito em alguns elementos.

Tipos de links (en-US)

Em HTML, os tipos de links a seguir indicam o relacionamento entre dois documentos, em que um aponta para o outro usando um elemento `<a>`, `<area>` ou `<link>`.

Categorias de conteúdo

Todo elemento em HTML é membro de uma ou mais categorias de conteúdo — estas categorias agrupam elementos que compartilham características comuns.


Atributos - HTML: Linguagem de Marcação de Hipertexto

Atributos
=========

| Nome do Atributo | Elementos | Descrição |
| --- | --- | --- |
| accept | `<form>` (en-US), `<input>` | Lista de tipos que o servidor aceita, tipicamente um tipo de arquivo. |
| accept-charset | `<form>` (en-US) | Lista de conjunto de caracteres suportados. |
| accesskey | Global attribute | Define um atalho no teclado para ativar ou adicionar foco ao elemento. |
| action | `<form>` (en-US) | A URI de um programa que processa a informação submetida através do formulário. |
| align | `<applet>`, `<caption>`, `<col>` (en-US), `<colgroup>` (en-US), `<hr>`, `<iframe>`, `<img>`, `<table>`, `<tbody>` (en-US), `<td>` (en-US), `<tfoot>` , `<th>`, `<thead>` (en-US), `<tr>` (en-US) | Especifica o alinhamento horizontal do elemento. |
| alt | `<applet>`, `<area>`, `<img>`, `<input>` | Texto alternativo caso uma imagem não possa ser exibida. |
| async | `<script>` | Indica que o script deve ser executado assíncrono. |
| autocomplete | `<form>` (en-US), `<input>` | Indica se controles neste formulário podem por padrão ter seus valores completados automaticamente pelo navegador. |
| autofocus | `<button>`, `<input>`, `<select>`, `<textarea>` | O elemento deve ser focado automaticamente após a página ser carregada. |
| autoplay | `<audio>`, `<video>` | O aúdio ou vídeo deve ser reproduzido assim que possível. |
| bgcolor | `<body>`, `<col>` (en-US), `<colgroup>` (en-US), `<marquee>`, `<table>`, `<tbody>` (en-US), `<tfoot>`, `<td>` (en-US), `<th>`, `<tr>` (en-US) | Cor do plano de fundo do elemento.Nota: Este é um atributo legado. Por favor use a propriedade CSS `background-color` em vez disso. |
| border | `<img>`, `<object>` (en-US), `<table>` | A largura da borda.Nota: este é um atributo legado. Por favor use a propriedade CSS `border` (en-US) em vez disso. |
| buffered | `<audio>`, `<video>` | Contém o intervalo de tempo da mídia que já foi carregada. |
| charset | `<meta>`, `<script>` | Declara a codificação dos caracteres da página ou do script. |
| checked | `<command>`, `<input>` | Indica se o elemento deve ser checado no carregamento da página. |
| cite | `<blockquote>`, `<del>`, `<ins>` (en-US), `<q>` | Contêm uma URI que aponta para a fonte da citação ou alteração. |
| class | Global attribute | Frequentemente usado com CSS para estilizar os elementos com propriedades comuns. |
| code | `<applet>` | Especifica a URL do arquivo de classe do miniaplicativo que será carregado e executado. |
| codebase | `<applet>` | Este atributo fornece a URL absoluta ou relativa do diretório onde os arquivos .class do miniaplicativo são armazenados. |
| color | `<basefont>` (en-US), `<font>` (en-US), `<hr>` | Este atributo define a cor do texto usando o nome de uma cor ou uma cor especificada em hexadecimal através do formato #RRGGBB.Nota: este é um atributo legado. Por favor use a propriedade CSS `color` em vez disso. |
| cols | `<textarea>` | Define o número de colunas numa area de texto. |
| colspan | `<td>` (en-US), `<th>` | O atributo colspan define o número de colunas que uma célula deve conter. |
| content | `<meta>` | Um valor associado com `http-equiv` ou `name` dependendo do contexto. |
| contenteditable | Global attribute | Indica se o conteúdo do elemento é editável. |
| contextmenu | Global attribute | Define o ID de um elemento `<menu>` (en-US) que servirá como o menu de contexto de um outro elemento. |
| controls | `<audio>`, `<video>` | Indica se o navegador deve mostrar ou não os controles de reprodução ao usuário. |
| coords | `<area>` | Uma escolha de valores especificando as coordenadas da região hot-spot. |
| data | `<object>` (en-US) | Especifica a URL do recurso. |
| datetime | `<del>`, `<ins>` (en-US), `<time>` | Indica a data e o horário associados ao elemento. |
| default | `<track>` | Indica que a faixa deve estar habilitada a não ser que as preferências do usuário indiquem algo diferente. |
| defer | `<script>` | Indica que o script deve ser executado após a página ter sido analisada. |
| dir | Global attribute | Defina a direção do texto. Os valores permitidos são ltr (Esquerda para direita) e rtl (Direita para esquerda) |
| dirname | `<input>`, `<textarea>` |  |
| disabled | `<button>`, `<command>`, `<fieldset>`, `<input>`, `<optgroup>`, `<option>`, `<select>`, `<textarea>` | Indica se o usuário pode ou não interagir com o elemento. |
| draggable | Global attribute | Define se o elemento pode ser arrastado. |
| dropzone | Global attribute | Indica que o elemento aceita a soltagem de conteúdo nele. |
| enctype | `<form>` (en-US) | Define o tipo de conteúdo da data do formulário quando o `method` é POST. |
| for | `<label>`, `<output>` | Descreve elementos na qual pertencem a este. |
| form | `<button>`, `<fieldset>`, `<input>`, `<label>`, `<meter>`, `<object>` (en-US), `<output>`, `<progress>`, `<select>`, `<textarea>` | Indica o formulário que é o proprietário do elemento. |
| headers | `<td>` (en-US), `<th>` | IDs dos elementos `<th>` na qual se aplicam a este elemento. |
| height | `<canvas>`, `<embed>`, `<iframe>`, `<img>`, `<input>`, `<object>` (en-US), `<video>` | Nota: Em algumas instâncias, tal como `<div>`, isto é um atributo legado, em cujo caso a propriedade CSS `height` deveria ser usado em vez. Em outros casos, assim como `<canvas>`, a altura deve ser especificado com esse atributo. |
| hidden | Global attribute | Indica a relevância de um elemento. |
| high | `<meter>` | Indica o menor limite da faixa superior. |
| href | `<a>`, `<area>`, `<base>`, `<link>` | A URL de um recurso ligado. |
| hreflang | `<a>`, `<area>`, `<link>` | Especifica o idioma de um recurso ligado. |
| http-equiv | `<meta>` |  |
| icon | `<command>` | Especifica uma imagem na qual represente o comando. |
| id | Global attribute | Frequentemente usado com CSS para estilizar um elemento específico. O valor deste atributo deve ser único. |
| ismap | `<img>` | Indica que a imagem é parte de um mapa de imagem "sever-side". |
| itemprop | Global attribute |  |
| kind | `<track>` | Especifica o tipo de caminho de texto. |
| label | `<track>` | Especifica um título "user-releadable" de um caminho de texto. |
| lang | Global attribute | Define o idioma usado no elemento. |
| language | `<script>` | Define o idioma do script usado no elemento. |
| list | `<input>` | Identifica uma lista de opções pré definidas para sugerir ao usuário. |
| loop | `<audio>`, `<bgsound>` (en-US), `<marquee>`, `<video>` | Indica se a mídia deveria começar tocando do começo quando ela é finalizada. |
| low | `<meter>` | Indica o maior limite da menor distância. |
| manifest | `<html>` | Especifica a URL do cache manifest do documento. documento |
| max | `<input>`, `<meter>`, `<progress>` | Indica o valor máximo permitido. |
| maxlength | `<input>`, `<textarea>` | Define o núemro máximo de caracteres permitido no elemento. |
| media | `<a>`, `<area>`, `<link>`, `<source>`, `<style>` | Especifica uma sugestão da mídia para qual recurso ligado foi designado. |
| method | `<form>` (en-US) | Define qual método HTTP usar quando enviar um formulário. Pode ser GET(padrão) ou POST. |
| min | `<input>`, `<meter>` | Indica o valor mínimo permitido. |
| multiple | `<input>`, `<select>` | Indica se múltiplos valores podem ser inseridos em uma entrada do tipo `email` ou `file`. |
| name | `<button>`, `<form>` (en-US), `<fieldset>`, `<iframe>`, `<input>`, `<object>` (en-US), `<output>`, `<select>`, `<textarea>`, `<map>`, `<meta>`, `<param>` (en-US) | Nome do elemento. Por exemplo usado pelo servidor para identificar os campos no envio do formulário. |
| novalidate | `<form>` (en-US) | Este atributo indica que o formulário não deveria ser validado quando enviado. |
| open | `<details>` | Indica se os detalhes serão mostrados no carregamento da página. |
| optimum | `<meter>` | Indica o valor numérico optimal. |
| pattern | `<input>` | Define uma espreção regular na qual o valor do elemento será validado de encontro. |
| ping | `<a>`, `<area>` |  |
| placeholder | `<input>`, `<textarea>` | Fornece uma sugestão ao usuário de o que pode ser inserido no campo. |
| poster | `<video>` | Uma URL indicando uma poster frame para mostrar desde que o usuário toque ou busque. |
| preload | `<audio>`, `<video>` | Indica se todo o recurso, partes dele ou nada deveria ser pré carregado. |
| pubdate | `<time>` | Indica se esta data e tempo é a data no mais próximoelemento antecessor`<article>`. |
| radiogroup | `<command>` |  |
| readonly | `<input>`, `<textarea>` | Indica se o elemento pode ser editado. |
| rel | `<a>`, `<area>`, `<link>` | Especifica o relacionamento do objeto alvo para o objeto ligado. |
| required | `<input>`, `<select>`, `<textarea>` | Indica se este elemento é requerido para preencher ou não. |
| reversed | `<ol>` | Indica se a lista deveria ser mostrada em uma ordem decrescente em vez de uma crescente. |
| rows | `<textarea>` | Define o número de linhas em uma área de texto. |
| rowspan | `<td>` (en-US), `<th>` | Define o número de linhas que uma célula de tabela deveria abranger mais. |
| sandbox | `<iframe>` |  |
| spellcheck | Global attribute | Indica se o spell de checagem está permitido para o elemento. |
| scope | `<th>` |  |
| scoped | `<style>` |  |
| seamless | `<iframe>` |  |
| selected | `<option>` | Define o valor na qual será selecionado no carregamento da página. |
| shape | `<a>`, `<area>` |  |
| size | `<input>`, `<select>` | Define a largura do elemento (em pixels). Se o elemento de atributo `type` é `text` ou `password` então este é o número de caracteres. |
| sizes | `<link>` |  |
| span | `<col>` (en-US), `<colgroup>` (en-US) |  |
| src | `<audio>`, `<embed>`, `<iframe>`, `<img>`, `<input>`, `<script>`, `<source>`, `<track>`, `<video>` | URL de um conteúdo incorporável. |
| srcdoc | `<iframe>` |  |
| srclang | `<track>` |  |
| start | `<ol>` | Define o primeiro número se não for 1. |
| step | `<input>` |  |
| style | Global attribute | Define estilos CSS na qual ultrapassarão estilos previamente configurados. |
| summary | `<table>` |  |
| tabindex | Global attribute | Ultrapassa a ordem de tabulação padrão do navegador e segue o especificado como alternativa. |
| target | `<a>`, `<area>`, `<base>`, `<form>` (en-US) |  |
| title | Global attribute | Texto a ser mostrado em uma dica quando suspenso sobre um elemento. |
| type | `<button>`, `<input>`, `<command>`, `<embed>`, `<object>` (en-US), `<script>`, `<source>`, `<style>`, `<menu>` (en-US) | Define o tipo de elemento. |
| usemap | `<img>`, `<input>`, `<object>` (en-US) |  |
| value | `<button>`, `<option>`, `<input>`, `<li>`, `<meter>`, `<progress>`, `<param>` (en-US) | Define o valor padrão na qual será mostrado no elemento no carregar da página. |
| width | `<canvas>`, `<embed>`, `<iframe>`, `<img>`, `<input>`, `<object>` (en-US), `<video>` | Nota: Em algumas instâncias, tal como `<div>`, este é um atributo legado, no caso da propriedade CSS `width` deveria ser usado ao em vez. em outros casos, tal como `<canvas>`, a largura deve ser especificada com este atributo. |
| wrap | `<textarea>` | Indica se o texto deveria ser enrolado. |


Microformatos - HTML: Linguagem de Marcação de Hipertexto

Microformatos
=============

*Microformatos* (ás vezes abreviado como **μF**) são convenções utilizadas para incorporar convenções semânticas em HTML e providenciar uma API a ser usada por mecanismos de pesquisa, agregadores e outras ferramentas. Esses padrões mínimos de HTML são usados para marcar entidades que variam de informações fundamentais a específicas de domínio, como pessoas, organizações, eventos e locais.

Os microformatos são suportados pelos principais mecanismos de pesquisa. Os dados são transportados na propriedade de classe que pode ser adicionada a qualquer elemento HTML. Além de legíveis por máquina, seu formato é projetado para ser facilmente lido por humanos.

Existem bibliotecas de análise para a maioria das linguagens para microformatos2.

### Como os Microformatos Funcionam?

Um autor de uma página web pode adicionar microformatos no seu HTML. Por exemplo se ele quer se identificar ele podem utilizar um h-card como:

```html
<a class="h-card" href="http://example.com">Joe Bloggs</a>
```

Quando um analisador encontra esse dado, ele saberá que nessa página contém um "card" que descreve uma pessoa ou uma organização chamada `Joe Blogger` com uma URL de `http://example.com/`. O analisador disponibiliza esses dados por meio de APIs que podem ser usadas por diferentes aplicativos.

Como neste exemplo, alguns padrões de marcação requerem apenas um único nome de classe raiz de microformato, que os analisadores usam para encontrar algumas propriedades genéricas, como: `name`, `url`, `photo`.

Prefixos de Microformatos
-------------------------

Todos os microformatos consistem de uma raíz e uma coleção de propriedades. As propriedades são opcionais e potencilamente multivaloradas - aplicações que necessitam de um valor único devem utilizar a primeira instância de uma propriedade. Os dados hierárquicos são representados com microformatos aninhados, normalmente como valores de propriedade.

Todas os nomes de classes de microformatos utilizam prefixos. Os prefixos são Os prefixos são **independentes da sintaxe dos vocabulários**, os quais são desenvolvidos separadamente.

* **"h-\*" para nome de classes raíz**, p.ex "h-card", "h-entry", "h-feed", e várias outras. Essas classes de alto nível normalmente indicam um tipo e o vocabulário esperado de propriedades correspondente. Por exemplo:
    + h-card descreve uma pessoa ou uma organização.
    + h-entry descreve conteúdo on-line em série ou com data marcada como uma postagem de blog.
    + h-feed descreve um fluxo de dados ou um feed de postagens.
    + Você pode encontrar vários outros You can find many more vocabulários na wiki de microformatos2.
* **"p-\*" para propriedades de texto simples,** p.ex "p-name", "p-summary"
    + Análise de texto simples, texto de elemento em geral. Em certos elementos HTML, use atributos especiais primeiro, por exemplo img / alt, abbr / título.
* **"u-\*" para propriedades URL**, p.ex "u-url", "u-photo", "u-logo"
    + Análise especial necessária: prefer a/href, img/src, object/data etc. atributos sobre o conteúdo do elemento.
* **"dt-\*" para propriedades de data e hora**, p.ex "dt-start", "dt-end", "dt-bday"
    + Análise especial necessária: value-class-pattern and separate date time value parsing for readability.
* **"e-\*" para propriedades da árvore de elementos** em que toda a hierarquia de elementos contidos é o valor, p.ex "e-content". O prefixo "e-" também pode ser lembrado mnemonicamente como "árvore de elementos", "marcação incorporada", ou "marcação encapsulada".
Alguns exemplos de microformatos
--------------------------------

### h-card

O microformato h-card representa uma pessoa ou uma organização.

O valor de cada propriedade é definido no HTML utilizando a propriedade class, qualquer elemento pode receber.

#### Exemplo de h-card

```html
<p class="h-card">
  <img class="u-photo" src="http://example.org/photo.png" alt="" />
  <a class="p-name u-url" href="http://example.org">Joe Bloggs</a>
  <a class="u-email" href="mailto:joebloggs@example.com"
 >joebloggs@example.com</a
 >,
  <span class="p-street-address">17 Austerstræti</span>
  <span class="p-locality">Reykjavík</span>
  <span class="p-country-name">Iceland</span>
</p>
```

| Propriedade | Descrição |
| --- | --- |
| **`p-name`** | O nome completo/formatado da pessoa ou organização |
| **`u-email`** | endereço de e-mail |
| **`u-photo`** | uma foto da |
| **`u-url`** | página na web ou outra URL representando a pessoa ou a organização |
| **`u-uid`** | identificador universal único, de preferência URL canônico |
| **`p-street-address`** | número da rua + enderço |
| **`p-locality`** | cidade ou vilarejo |
| **`p-country-name`** | nome do país |

#### Exemplo de h-card aninhado

```html
<div class="h-card">
  <a class="p-name u-url" href="http://blog.lizardwrangler.com/"
 >Mitchell Baker</a
 >
  (<a class="p-org h-card" href="http://mozilla.org/">Mozilla Foundation</a>)
</div>
```

JSON analisado:

```js
{
  "items": [{
  "type": ["h-card"],
  "properties": {
    "name": ["Mitchell Baker"],
    "url": ["http://blog.lizardwrangler.com/"],
    "org": [{
    "value": "Mozilla Foundation",
    "type": ["h-card"],
    "properties": {
      "name": ["Mozilla Foundation"],
      "url": ["http://mozilla.org/"]
    }
    }]
  }
  }]
}
```

Nota: o h-card aninhado implica nas propriedades 'name' e 'url', assim como qualquer outro h-card apenas com nome de classe raiz em um `<a href>`.

### h-entry

O microformato h-entry representa um conteúdo em série ou um conteúdo com data marcada na web. h-entry é frequentemente usado com conteúdo destinado a ser distribuído, p.ex postagens em blog.

Exemplo de h-entry como uma postagem em blog:

```html
<article class="h-entry">
  <h1 class="p-name">Microformats are amazing</h1>
  <p>
    Published by
    <a class="p-author h-card" href="http://example.com">W. Developer</a> on
    <time class="dt-published" datetime="2013-06-13 12:00:00"
 >13<sup>th</sup> June 2013</time
 >
  </p>

  <p class="p-summary">In which I extoll the virtues of using microformats.</p>

  <div class="e-content">
    <p>Blah blah blah</p>
  </div>
</article>
```

#### Propriedades

| Propriedade | Descrição |
| --- | --- |
| **`p-name`** | nome/título da entrada |
| **`p-author`** | quem escreveu a entrada, h-card opcionalmente incorporado |
| **`dt-published`** | quando a entrada foi publicada |
| **`p-summary`** | breve resumo da entrada |
| **`e-content`** | conteúdo completo da entrada |

#### Exemplo de h-entry analisado
```

<div class="h-entry">
  <p><span class="p-author h-card">
    <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/></a>
    <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a></span>
     Replied to <a class="u-in-reply-to" href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/microformats">a post on
   <strong>developer.mozilla.org</strong> </a>:
  </p>
   <p class="p-name e-content">Hey thanks for making this microformats resource</p>
   <p> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a>
  published this <a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"><time class="dt-published"
   datetime="2019-05-31T14:19:09+0000">31 May 2019</time></a></p>
</div>
```

```
{
  "items": [
    {
      "type": [ "h-entry" ],
      "properties": {
        "in-reply-to": [ "https://developer.mozilla.org/pt-BR/docs/Web/HTML/microformats" ],
        "name": [ "Hey thanks for making this microformats resource" ],
        "url": [ "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource" ],
        "published": [ "2019-05-31T14:19:09+0000" ],
        "content": [
          {
            "html": "Hey thanks for making this microformats resource",
            "value": "Hey thanks for making this microformats resource",
            "lang": "en"
          }
        ],
        "author": [
          {
            "type": [ "h-card" ],
            "properties": {
              "name": [ "Greg McVerry" ],
              "photo": [ "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" ],
              "url": [ "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ]
            },
            "lang": "en",
            "value": "Greg McVerry"
          }
        ]
      },
      "lang": "en"
    }
```

### h-feed

O h-feed é um fluxo de dados ou um feed de posts de h-entry, como postagens completas em uma página inicial ou em páginas de arquivo, sumários ou outras listagens de postagens

#### Exemplo h-feed

```html
<div class="h-feed">
  <h1 class="p-name">Microformats Blogs</h1>
  <article class="h-entry">
    <h2 class="p-name">Microformats are amazing</h2>
    <p>
      Published by
      <a class="p-author h-card" href="http://example.com">W. Developer</a> on
      <time class="dt-published" datetime="2013-06-13 12:00:00"
 >13<sup>th</sup> June 2013</time
 >
    </p>
    <p class="p-summary">
      In which I extoll the virtues of using microformats.
    </p>
    <div class="e-content"><p>Blah blah blah</p></div>
  </article>
</div>
```

#### Propriedades

| Propriedades | Descrição |
| --- | --- |
| **`p-name`** | nome do feed |
| **`p-author`** | autor do feed, opcionalmente incorporado com um h-card |

#### Filhos

| **h-entry aninhado** |  |
| --- | --- |
| objetos representando os itens do feed |  |

### h-event

O `h-event` é para evento na web. O h-event é frequentemente usado com listagens de eventos e páginas de eventos individuais.

```html
<div class="h-event">
  <h1 class="p-name">Microformats Meetup</h1>
  <p>
    From
    <time class="dt-start" datetime="2013-06-30 12:00"
 >30<sup>th</sup> June 2013, 12:00</time
 >
    to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time> at
    <span class="p-location">Some bar in SF</span>
  </p>
  <p class="p-summary">
    Get together and discuss all things microformats-related.
  </p>
</div>
```

#### Propriedades

| Propriedade | Descrição |
| --- | --- |
| **`p-name`** | nome do evento (ou título) |
| **`p-summary`** | breve sumário do evento |
| **`dt-start`** | data e hora de início do evento |
| **`dt-end`** | data e hora de termino do evento |
| **`p-location`** | local do evento, opcionalmente incorporado com um h-card |

#### Exemplo de h-event analisado
```

<div class="h-event">
  <h2 class="p-name">IndieWeb Summit</h2>
  <time class="dt-start" datetime="2019-06-29T09:00:00-07:00">June 29, 2019 at 9:00am  (-0700)</time><br>through <time class="dt-end" datetime="2019-06-30T18:00:00-07:00">June 30, 2019 at 6:00pm (-0700)</time><br>
  <div class="p-location h-card">
    <div>
    <span class="p-name">Mozilla</span>
     </div>
     <div>
      <span class="p-street-address">1120 NW Couch St</span>,
      <span class="p-locality">Portland</span>,
      <span class="p-region">Oregon</span>,
      <span class="p-country">US</span>
     </div>
       <data class="p-latitude" value="45.52345"></data>
      <data class="p-longitude" value="-122.682677"></data>
  </div>
    <div class="e-content">Come join us
     </div>
    <div>
     <span class="p-author h-card"><a class="u-url p-name" href="https://aaronparecki.com">Aaron Parecki</a></span> Published this <a href="https://aaronparecki.com/2019/06/29/1/" class="u-url">event </a>on <time class="dt published" datetime="2019-05-25T18:00:00-07:00">May 5th, 2019</time>
    </div>
</div>
```

```
{
  "items": [
    {
      "type": [ "h-event" ],
      "properties": {
        "name": [ "IndieWeb Summit" ],
        "url": [ "https://aaronparecki.com/2019/06/29/1/" ],
        "author": [
          {
            "type": [ "h-card" ],
            "properties": {
              "name": [ "Aaron Parecki" ],
              "url": [ "https://aaronparecki.com"]
            },
            "lang": "en",
            "value": "Aaron Parecki"
          }
        ],
        "start": [ "2019-06-29T09:00:00-07:00" ],
        "end": [ "2019-06-30T18:00:00-07:00" ],
        "published": [ "2019-05-25T18:00:00-07:00" ],
        "content": [
          {
            "html": "Come join us",
            "value": "Come join us",
            "lang": "en"
          }
        ],
        "location": [
          {
            "type": [ "h-card" ],
            "properties": {
              "name": [ "Mozilla" ],
              p-street-address: [ "1120 NW Couch St" ]
              "locality": [ "Portland" ],
              "region": [ "Oregon" ],
              "country": [ "US" ],
              "latitude": [ "45.52345" ],
              "longitude": [ "-122.682677" ]
            },
            "lang": "en",
            "value": "Mozilla"
          }
        ]
      },
      "lang": "en"
    }
  ],
```

See also

* Microformat na Wikipedia
* Site oficial dos Microformatos
* Motores de busca suportados no site oficial do Microformats
* Microformatos no IndieWebCamp