- In HTML5,
<style>tags must have thescopedattribute if they are in the<body>tag. Styles will be applied to its parent and siblings. - Google uses a chain of iframes inside
<noscripttags, to track users in case the browser has javascript disabled. <meta property="og:image" content="(the facebook share thumbnail)">- There is a
timetag in HTML5, and it does something if you tell it to. ▾is a thing. Those bastards...- I hear it's okay for html comments to be outside the tag, but not if it comes before <!DOCTYPE>. The only two browsers I suspect trouble are firefox and opera.
- HTML5 allows
ato containdiv. - HTML5 element IDs can begin with a number.
$('#5'), for example, works. - HTML5 element IDs can contain multiple dots:
<div id="a.b.c"></div>. - Adding
width=device-widthoruser-scalable=noon some versions of mobile browsers apparently introduces the side benefit of not introducing a hover-click delay. - HTML5 tainted canvas is a
(new Image).crossOrigin = ...change that allows a limited selection of browsers to serve images from any remote origin. This was implemented to allow canvases to reading images to be requested using cookies. crossOrigindefaults to anonymous. There is no need to specifyanonymous.- Serving an anonymous image inside a canvas removes a canvas' ability to be read.
- Hashes can actually go to an ID as well as a name (
#foo-><div id="foo"/>). - In HTML5,
atags can have adownloadattribute that forces the link to be downloaded. - Websites can restrict content sources by appending a header to the response. Here is the one github uses.
- The
addresselement was not created for postal addresses (...) unless those addresses are in fact the relevant contact information for a document or section of a document - Nested
spans are okay. The same probably speaks for other inline elements, too. - A
<button>with undeclaredtypeapparently defaults to a submit button. - You can define your own tags. They just need at least one dash in the tag name, e.g.
<x-hello>,<md-tag>,com-foo. The key function here isvar XFoo = document.registerElement('x-foo');
Content-Security-Policy: default-src *; script-src assets-cdn.github.com www.google-analytics.com collector-cdn.github.com; object-src assets-cdn.github.com; style-src 'self' 'unsafe-inline' 'unsafe-eval' assets-cdn.github.com; img-src 'self' data: assets-cdn.github.com identicons.github.com www.google-analytics.com collector.githubapp.com *.githubusercontent.com *.gravatar.com *.wp.com; media-src 'none'; frame-src 'self' render.githubusercontent.com gist.github.com www.youtube.com player.vimeo.com checkout.paypal.com; font-src assets-cdn.github.com; connect-src 'self' ghconduit.com:25035 live.github.com uploads.github.com s3.amazonaws.com
- In Chrome,
<img>tags with nosrchave a grey border that does not go away with any amount of CSS. - HTML5 allows closing tags to be omitted where the semantics are obvious, for example,
liinul, oroptioninoptgroup. Then again, your colleagues will kill you, so it is not a usable part of the spec. - However, custom tags can never be self-closing in HTML5.
disabledprevents focus on the element, whereasreadonlylets you focus on it, but not edit it.readonlyelements also getsubmitted.- You can change an
<input>'s placeholder style using pseudoselectors::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder, if the field'sappearance: textfield. With that said, these styles are platform-dependent (as you may expect with prefixed styles), and currently the placeholder cannot be inspected. - Well, you cannot specify offline file wildcards.
- Saving too much in localStorage gives you a
DOM Exception 22: QuotaExceededError. - In
<head>, when you expect a script to have access to nothing:document.headis actually available. - "Use of the Application Cache is deprecated on insecure origins", which is great. AppCache sucks blue balls, anyway.
- An empty href points to the same document.
- "Properties" are likely something where
prop in nodeis true. "Attributes" are likely what you write directly in HTML. So if aninputelement hasvalue="foo", but user types inbar, then that element has attributefoo, but valuebar.
60fps = limiting each frame to 16ms.
- USE PAGESPEED to analyse your render tree.
- Three stages of rendering: Layout (calculating geometry of where everything ought to be), Paint (filling in the page), and Compositing (picking a layer to minimise repaints).
- Use the
will-change: watCSS directive to let the browser know what will be changed
Expensive animations include:
- Scrolling
- Transition based on variables