Tag: html5

After a very long run, Adobe Flash is dead!

This was very long overdue for a variety of reasons. While Flash became almost ubiquitous on the web under Macromedia before being acquired by Adobe, it was also full of .
Apple never offered Flash on it’s mobile devices and helped to drive developers to make use of modern HTML5 to accomplish many of the same effects.
Flash “cookies” were buried deep within the application and were not easily removed by users making them very useful for tracking users.

Timeline:

Step Date
End of Life Announced July 25, 2017
End of support December 31, 2020
Flash blocked January 12, 2021

Support:

Browser Blocked Removed
Chrome 76 88
Firefox 69 85
Safari 14

 

HTML5 Hyperlink Auditing (ping attribute)

This was a browser feature that was relatively unknown until recently when several browsers announced that they would be removing support.  It is useful to track instances when a user clicks on a link, as it could be recorded by the server for analysis of user activity.   As it was done out-of-bounds, there was no additional code, such as javascript, required on the client-side for this to occur.

<a href="..." ping="https://example.com/pingreporter">Example link</a>

References:

HTML5 download attribute

Example

The download attribute allows for the downloaded filename to be specified to be something different than the name in the url.

This is available only on the A tag when an href attribute is already specified and works similarly to setting the header as:
Content-Disposition: attachment; filename="filename.pdf"

NOTE: this is not currently available in IE, Edge(prior to 13) or IOS Safari.

References:

HTML5 autofill using autocomplete

Once in a while, the web development community reintroduces old ideas in a new way. Years ago, there was a concept called ECML (E-Commerce Markup Language) that added an HTML attribute to identify values in a FORM that could be auto-filled from a users “virtual wallet”. Sadly, while it was implemented on a variety of websites (mine included), it was not widely supported and disappeared.

The concept has been reintroduced as values in the ‘autocomplete’ attribute in HTML5. Traditionally this attribute was only used to prevent auto-filling of values, now it can identify which values it is related to for pre-fill.

The usual payment, address and demographic fields (and variations of each) are supported.

EXAMPLE:

^<input type="text" name="ccnum" autocomplete="cc-number" value="" />

REFERENCES:

HTML5 Link Prefetching

Link prefetching is used to identify a resource that might be required by the next navigation, and that the user agent SHOULD fetch, such that the user agent can deliver a faster response once the resource is requested in the future.


<link rel="prefetch" href="http://www.example.com/images/sprite.png" />

<link rel="prefetch" href="/images/sprite.png" />

Supported in:

  • MSIE 11+/Edge
  • Firefox 3.5+ (for HTTPS)
  • Chrome
  • Opera

REFERENCES:

HTML5 preconnect

In addition to dns-prefetch, you can take browser performance one step further by actually creating a new connection to a resource.

By initiating an early connection, which includes the DNS lookup, TCP handshake, and optional TLS negotiation, you allow the user agent to mask the high latency costs of establishing a connection.

Supported in:

  • Firefox 39+ (Firefox 41 for crossorigin)
  • Chrome 46+
  • Opera


<link rel="preconnect" href="//example.com" />
<link rel="preconnect" href="//cdn.example.com" crossorigin />

REFERENCES:

HTML5 DNS prefetch

I often get into some fringe areas of micro-optimizations of website performance, DNS prefetching is another one of those topics.

To understand how this can help, you must first understand the underlying concepts that are used within the communications used to build your web page.

The first of these is a “DNS Lookup”, where the domain name (www.example.com) is converted into a numerical address, the IP address of the server that contains the file(s).

In many websites, content is included from other domains for performance or security purposes.

When the domain names are known in advance, this approach can save time on the connection as the lookup can fetched in advance, before it is required on the page to retrieve assets.

This can be particularly useful for users with slow connections, such as those on mobile browsers.


<link rel="dns-prefetch" href="//www.example.com" />

Supported in:

  • MSIE9+ (MSIE10+ as dns-prefetch)/Edge
  • Firefox
  • Chrome
  • Safari
  • Opera

REFERENCES:

HTML5 script async

The HTML5 “async” attribute simplifies page-load performance improvements and dynamic script loading, it can be useful in modern web browsers.

Simply put, this tag allows for the browser to asynchronously load and execute external javascript files in a parallel vs. serial manner. Unfortunately while most modern browser support it, MSIE versions prior to MSIE10+ are problematic.


<script src="example.js" async="async"></script>

This is particularly useful when using third-party javascript libraries and utilities that have no dependeny relationships with your existing website javascript.

REFERENCES:

HTML cleartype meta tag?

This tag allows for activation of ClearType in Mobile IE for smoothing fonts.


<!--[if IEMobile]><meta http-equiv="cleartype" content="on" /><![endif]-->

NOTE: Future use of this approach is questionable, as MSIE10 dropped support of conditional comments, and HTML5 validators (in general) do not “like” the http-equiv values as they are not standardized

REFERENCES:

HTML5 – abbr replaces acronym

I recently found another element that is no longer supported for HTML5. The <abbr> element represents an abbreviation or acronym, the <acronym> tag was dropped in HTML5 and XHTML2.

REFERENCES: