High-precision timers

Timer Specifications

• User Timing - measures js code performance
  • PerformanceMark - named timestamp since navigationStart
  • PerformanceMeasure - named duration between two marks
• Navigation Timing - measures page navigation
  • PerformanceNavigation - type of page navigation
  • PerformanceTiming - page navigation timestamps
• Resource Timing - measures resources timings
  • PerformanceResourceTiming - resource initiator and timestamps

<dialog> Element

Dialog Features

• Centered in the Viewport
• Can be Modal
• Always on Top
• Anchored to Element (optional)
• Return value on close (optional)

Responsive images

Content and style images

• <picture> element - browser follows author's intentions
• <img srcset> attribute - author hints the browser's choice
• image-set() - similar to srcset but for style images

Web Components

HTML Templates - <template> element

• the template's content is parsed to DOM
• the template's DOM is not part of document's DOM tree
• content property holds the template's DOM
• template's DOM is activated by appending it to the document's DOM
  • scripts are executed
  • images are fetched

Custom HTML Elements - <element> element

• has name and optionally extends a supertype
• optionally define a JS API
• lifecycle callbacks
  • readyCallback - is created
  • insertedCallback - is inserted into a document
  • removedCallback - is removed from a document
• can be defined in script as an alternative to markup

Shadow DOM

• a DOM tree separate from the document DOM
• attached to an element - a shadow host
• gets rendered instead of the host's DOM
• can render host's DOM at specified <content> points
• can render other host shadow trees at specified <shadow> points
• by default blocks author styles except for the inherited ones
• can style the host and the inserted content
• can allow an element or certain props to be styled
• events that escape the shadow are retargeted to host

HTML Imports

• a way to include and reuse HTML documents in other HTML documents
• in particular, imports let authors include Custom Element definitions from external URLs

Flexbox

Flexbox container

• a parent (container) lays out its children (items) in two axes
  • main axis - start, end, size
  • cross axis - start, end, size
• main axis
  • flex-direction establishes the axis
  • justify-content distributes the extra free space
• cross axis
  • flex-wrap establishes the axis
  • align-content distributes the extra free space
  • align-items lays out the items

Flexbox items

• can change the appearance order
• can take up free space proportionaly
• can shrink proportionaly if necessary
• can set its initial size (before free space is distributed)
• can override the container's item alignment

Multi-column Layout

Columns

• have count and width
• have gaps and rules between them
• column breaks' places can be specified
• an element can span across multiple columns
• content is balanced equally or filled sequentally

CSS Filters

CSS Filters

• Predefined
  • blur(), brightness(), contrast(), etc.
• Custom
  • manipulate the color and shape
  • adopt the WebGL shading language

CSS Regions

CSS Regions

• for complex layouts (magazine-like)
• content flows from one area (region) to another
• regions for a flow are chained in a document order

CSS Exclusions + CSS Shapes

CSS Exclusions

• define areas around which content can flow
• content flows around a single exclusion side or both sides

CSS Shapes

• control the shapes around which content flows

CSS Masking

CSS Masking

• provides two means for partially or fully hiding portions of visual elements
  • masking
  • clipping