You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
type: "paragraph"
summary: "Animation on the web can be done via {{ZG9teHJlZignU1ZHQW5pbWF0aW9uRWxlbWVudCcsICdTVkcnKQ==}}, {{ZG9teHJlZignd2luZG93LnJlcXVlc3RBbmltYXRpb25GcmFtZScsJ0phdmFTY3JpcHQnKQ==}}, including {{aHRtbGVsZW1lbnQoJ2NhbnZhcycp}} and {{ZG9teHJlZignV2ViR0xfQVBJJywgJ1dlYkdMJyk=}}, CSS {{Y3NzeHJlZignYW5pbWF0aW9uJyk=}}, {{aHRtbGVsZW1lbnQoJ3ZpZGVvJyk=}}, animated gifs and even animated PNGs and other image types. The performance cost of animating a CSS property can vary from one property to another, and animating expensive CSS properties can result in {{Z2xvc3NhcnkoJ2phbmsnKQ==}} as the browser struggles to hit a smooth {{Z2xvc3NhcnkoJ2ZyYW1lIHJhdGUnKQ==}}."
locale: "en-US"
rowIndex: 1
shouldWrap: true
children:
type: "link"
title:
url: "/en-US/docs/Web/CSS/left"
children:
type: "inlineCode"
value: "left"
type: "break"
type: "link"
title:
url: "/en-US/docs/Web/CSS/max-width"
children:
type: "inlineCode"
value: "max-width"
type: "break"
type: "link"
title:
url: "/en-US/docs/Web/CSS/border-width"
children:
type: "inlineCode"
value: "border-width"
type: "break"
type: "link"
title:
url: "/en-US/docs/Web/CSS/margin-left"
children:
type: "inlineCode"
value: "margin-left"
type: "break"
type: "link"
title:
url: "/en-US/docs/Web/CSS/font-size"
children:
type: "inlineCode"
value: "font-size"
type: "paragraph"
summary: "Animation on the web can be done via {{ZG9teHJlZignU1ZHQW5pbWF0aW9uRWxlbWVudCcsICdTVkcnKQ==}}, {{ZG9teHJlZignd2luZG93LnJlcXVlc3RBbmltYXRpb25GcmFtZScsJ0phdmFTY3JpcHQnKQ==}}, including {{aHRtbGVsZW1lbnQoJ2NhbnZhcycp}} and {{ZG9teHJlZignV2ViR0xfQVBJJywgJ1dlYkdMJyk=}}, CSS {{Y3NzeHJlZignYW5pbWF0aW9uJyk=}}, {{aHRtbGVsZW1lbnQoJ3ZpZGVvJyk=}}, animated gifs and even animated PNGs and other image types. The performance cost of animating a CSS property can vary from one property to another, and animating expensive CSS properties can result in {{Z2xvc3NhcnkoJ2phbmsnKQ==}} as the browser struggles to hit a smooth {{Z2xvc3NhcnkoJ2ZyYW1lIHJhdGUnKQ==}}."
locale: "en-US"
rowIndex: 2
shouldWrap: true
children:
type: "text"
value: "Properties that don't affect geometry or position, but are not rendered in their own layer, do not trigger a layout."
td (73:4) => tableCell
type: "paragraph"
summary: "Animation on the web can be done via {{ZG9teHJlZignU1ZHQW5pbWF0aW9uRWxlbWVudCcsICdTVkcnKQ==}}, {{ZG9teHJlZignd2luZG93LnJlcXVlc3RBbmltYXRpb25GcmFtZScsJ0phdmFTY3JpcHQnKQ==}}, including {{aHRtbGVsZW1lbnQoJ2NhbnZhcycp}} and {{ZG9teHJlZignV2ViR0xfQVBJJywgJ1dlYkdMJyk=}}, CSS {{Y3NzeHJlZignYW5pbWF0aW9uJyk=}}, {{aHRtbGVsZW1lbnQoJ3ZpZGVvJyk=}}, animated gifs and even animated PNGs and other image types. The performance cost of animating a CSS property can vary from one property to another, and animating expensive CSS properties can result in {{Z2xvc3NhcnkoJ2phbmsnKQ==}} as the browser struggles to hit a smooth {{Z2xvc3NhcnkoJ2ZyYW1lIHJhdGUnKQ==}}."
locale: "en-US"
rowIndex: 2
shouldWrap: true
children:
type: "link"
title:
url: "/en-US/docs/Web/CSS/color"
children:
type: "inlineCode"
value: "color"
tr (68:3) => tableRow
type: "html"
value: "<td><p>Properties that don't affect geometry or position, but are not rendered in their own layer, do not trigger a layout.</p></td>",type: "html"
value: "<td><p><code><a href=\"/en-US/docs/Web/CSS/color\">color</a></code></p></td>"
table.standard-table (48:1) => table
type: "html"
value: "<tr><td>Properties that affect an element's <em>geometry</em> or <em>position</em> trigger a style recalculation, a layout and a repaint.</td><td><img alt=\"\" src=\"recalculate-style.png\"> <img alt=\"\" src=\"layout.png\"> <img alt=\"\" src=\"paint.png\"></td><td><p><code><a href=\"/en-US/docs/Web/CSS/left\">left</a></code><br><code><a href=\"/en-US/docs/Web/CSS/max-width\">max-width</a></code><br><code><a href=\"/en-US/docs/Web/CSS/border-width\">border-width</a></code><br><code><a href=\"/en-US/docs/Web/CSS/margin-left\">margin-left</a></code><br><code><a href=\"/en-US/docs/Web/CSS/font-size\">font-size</a></code></p></td></tr>",type: "html"
value: "<tr><td><p>Properties that don't affect geometry or position, but are not rendered in their own layer, do not trigger a layout.</p></td><td><img alt=\"\" src=\"recalculate-style.png\"> <img alt=\"\" src=\"layout-faint.png\"> <img alt=\"\" src=\"paint.png\"></td><td><p><code><a href=\"/en-US/docs/Web/CSS/color\">color</a></code></p></td></tr>"
type: "paragraph"
summary: "Navigation timings are metrics measuring a browser's document navigation events. Resource timings are detailed network timing measurements regarding the loading of an application's resources. Both provide the same read-only properties, but navigation timing measures the main document's timings whereas the resource timing provides the times for all the assets or resources called in by that main document and the resources' requested resources."
locale: "en-US"
rowIndex: 4
shouldWrap: true
children:
type: "text"
value: "When the last HTTP redirect is completed, that is when the last byte of the HTTP response has been received. If there is no redirect, or if one of the redirects is not of the same origin, the value returned is "
type: "inlineCode"
value: "0"
type: "text"
value: "."
tr (56:3) => tableRow
type: "html"
value: "<td><p>When the last HTTP redirect is completed, that is when the last byte of the HTTP response has been received. If there is no redirect, or if one of the redirects is not of the same origin, the value returned is <code>0</code>.</p></td>"
table (36:1) => table
type: "html"
value: "<tr><td>{{ZG9teHJlZigiUGVyZm9ybWFuY2VUaW1pbmcucmVkaXJlY3RFbmQiLCJyZWRpcmVjdEVuZCIp}}</td><td><p>When the last HTTP redirect is completed, that is when the last byte of the HTTP response has been received. If there is no redirect, or if one of the redirects is not of the same origin, the value returned is <code>0</code>.</p></td></tr>"