Slide 1
Slide 1 text
The most useless tag of them all
CSS Day 2016 – June 16th
Slide 2
Slide 2 text
your name here:
Slide 3
Slide 3 text
the idea
Slide 4
Slide 4 text
Slide 5
Slide 5 text
The most useless tag of them all
Slide 6
Slide 6 text
HTML is special. Unlike many other languages the browser
won’t show an error message when you make a mistake.
Sure, that makes it easy to write bad code, but it also
allows HTML to be both backwards and future compatible.
It allowed the HTML5 specification to extend the existing
form field types. It allowed the RICG to create the
element. And it forms the basis of Web
Components because it makes custom elements possible.
And most importantly, it allows the tag, which
by definition does absolutely nothing. This talk will explain
the concepts behind graceful degradation, progressive
enhancement and feature detection, and focus on how to
solve practical problems with these concepts.
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
resilience
Slide 22
Slide 22 text
HTML is both backwards and
future compatible
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
The World Wide Web project
World Wide Web
The WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.Everything there is online about W3 is linked directly or indirectly
Slide 26
Slide 26 text
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Slide 29
Slide 29 text
Slide 30
Slide 30 text
…
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
…
Slide 34
Slide 34 text
Slide 35
Slide 35 text
Slide 36
Slide 36 text
Slide 37
Slide 37 text
What is this, 1995? Take a chill pill!
Enable your JavaScript! Booyah!
Slide 38
Slide 38 text
What is this, 1995? Take a chill pill!
Enable your JavaScript! Booyah!
Slide 39
Slide 39 text
confirm(
'You will lose unsaved changes ' +
'if you cancel, is this OK?'
);
Slide 40
Slide 40 text
confirm(
'You will lose unsaved changes ' +
'if you cancel, is this OK?'
);
Slide 41
Slide 41 text
<!--
confirm(
'You will lose unsaved changes ' +
'if you cancel, is this OK?'
);
//-->
Slide 42
Slide 42 text
<!--
confirm(
'You will lose unsaved changes ' +
'if you cancel, is this OK?'
);
//-->
Slide 43
Slide 43 text
create polyfills for our favourite tags
Slide 44
Slide 44 text
Slide 45
Slide 45 text
my eyes! please make it stop!
Slide 46
Slide 46 text
@keyframes blink {
0% {
visibility: visible;
}
50% {
visibility: hidden;
}
}
blink {
animation: blink 1s steps(1) infinite;
}
Slide 47
Slide 47 text
Slide 48
Slide 48 text
supported by all browsers
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
DOM
HTML
>
Slide 51
Slide 51 text
DOM
HTML
> tokenizer
&
tree builder
Slide 52
Slide 52 text
tokenizer
Slide 53
Slide 53 text
analyse html character by character
Slide 70
Slide 70 text
Data state – Character reference in data state – RCDATA state – Character reference in RCDATA state
– RAWTEXT state – Script data state – PLAINTEXT state – Tag open state – End tag open state –
Tag name state – RCDATA less-than sign state – RCDATA end tag open state – RCDATA end tag name
state – RAWTEXT less-than sign state – RAWTEXT end tag open state – RAWTEXT end tag name state –
Script data less-than sign state – Script data end tag open state – Script data end tag name state –
Script data escape start state – Script data escape start dash state – Script data escaped state –
Script data escaped dash state – Script data escaped dash dash state – Script data escaped less-than
sign state – Script data escaped end tag open state – Script data escaped end tag name state – Script
data double escape start state – Script data double escaped state – Script data double escaped dash
state – Script data double escaped dash dash state – Script data double escaped less-than sign state –
Script data double escape end state – Before attribute name state – Attribute name state – After
attribute name state – Before attribute value state – Attribute value (double-quoted) state – Attribute
value (single-quoted) state – Attribute value (unquoted) state – Character reference in attribute value
state – After attribute value (quoted) state – Self-closing start tag state – Bogus comment state –
Markup declaration open state – Comment start state – Comment start dash state – Comment state –
Comment end dash state – Comment end state – Comment end bang state – DOCTYPE state – Before
DOCTYPE name state – DOCTYPE name state – After DOCTYPE name state – After DOCTYPE public keyword
state – Before DOCTYPE public identifier state – DOCTYPE public identifier (double-quoted) state –
DOCTYPE public identifier (single-quoted) state – After DOCTYPE public identifier state – Between DOCTYPE
public and system identifiers state – After DOCTYPE system keyword state – Before DOCTYPE system
identifier state – DOCTYPE system identifier (double-quoted) state – DOCTYPE system identifier (single-
quoted) state – After DOCTYPE system identifier state – Bogus DOCTYPE state – CDATA section state
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 76
Slide 76 text
ƃɐʇ ɐ sı sıɥʇ
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
this really is a tag too!
Slide 81
Slide 81 text
No content
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
unicode
? ?
Slide 90
Slide 90 text
unicode
Slide 91
Slide 91 text
HTML
i-❤:before {
content: 'I ❤';
}
I ❤ HTML
Slide 92
Slide 92 text
XHTML
is-:after {
content: ' = ';
}
XHTML =
Slide 93
Slide 93 text
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
custom elements
custom dom interface for your own element
receive events when an element is
created, attached or detached,
and when attributes are changed
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
Slide 98
Slide 98 text
Slide 99
Slide 99 text
Slide 100
Slide 100 text
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
A
document.createElement('image').tagName
B
IMAGE Something else
Slide 103
Slide 103 text
document.createElement('image').tagName
A B
IMAGE Something else
Slide 104
Slide 104 text
d = document.createElement('div');
d.innerHTML = '';
d.firstChild.tagName
A B
IMAGE Something else
Slide 105
Slide 105 text
d = document.createElement('div');
d.innerHTML = '';
d.firstChild.tagName
A B
IMAGE Something else
Slide 106
Slide 106 text
tree builder
Slide 108
Slide 108 text
{
type: 'tag open'
name: 'a',
attributes: [
{
name: 'href',
value: '#'
}
]
}
{
type: 'tag close'
name: 'a'
}
{
type: 'character'
value: ''
}
Slide 109
Slide 109 text
HTMLAnchorElement
HTMLBodyElement
Text :
HTMLHeadElement
Slide 110
Slide 110 text
creating missing elements
Slide 121
Slide 121 text
No content
Slide 122
Slide 122 text
fixing mistakes
Slide 123
Slide 123 text
1 2 3
Slide 124
Slide 124 text
No content
Slide 125
Slide 125 text
1 2 3
Slide 126
Slide 126 text
1 2 3
A C
B
3
Bold Italic
3
Italic
3
Regular
Slide 127
Slide 127 text
1 2 3
HTMLBodyElement
Slide 128
Slide 128 text
1 2 3
HTMLElement : b
HTMLBodyElement
Slide 129
Slide 129 text
1 2 3
Text : 1
HTMLElement : b
HTMLBodyElement
Slide 130
Slide 130 text
1 2 3
HTMLElement : i
HTMLElement : b
HTMLBodyElement
Text : 1
Slide 131
Slide 131 text
1 2 3
HTMLElement : i
HTMLElement : b
HTMLBodyElement
Text : 1
Text : 2
Slide 132
Slide 132 text
1 2 3
HTMLElement : i
HTMLElement : b
HTMLBodyElement
Text : 1
Text : 2
Slide 133
Slide 133 text
1 2 3
HTMLElement : i
HTMLElement : b
HTMLBodyElement
Text : 1
Text : 2
Slide 134
Slide 134 text
1 2 3
HTMLElement : i
HTMLElement : b
HTMLBodyElement
Text : 1
Text : 2
Slide 135
Slide 135 text
1 2 3
HTMLElement : b HTMLElement : i
HTMLElement : i
HTMLBodyElement
Text : 1 Text : 3
Text : 2
Slide 136
Slide 136 text
1 2 3
HTMLElement : b HTMLElement : i
HTMLElement : i
HTMLBodyElement
Text : 1 Text : 3
Text : 2
Slide 137
Slide 137 text
HTMLElement : b HTMLElement : i
HTMLElement : i
1 2 3
HTMLBodyElement
Text : 1 Text : 3
Text : 2
Slide 138
Slide 138 text
1 2 3
A C
B
3
Bold Italic
3
Italic
3
Regular
Slide 139
Slide 139 text
1 2 3
A C
3
Bold Italic
3
Italic
3
Regular
B
Slide 140
Slide 140 text
aside
Slide 141
Slide 141 text
HTMLElement
Slide 142
Slide 142 text
HTMLElement
Slide 143
Slide 143 text
No content
Slide 144
Slide 144 text
No content
Slide 145
Slide 145 text
No content
Slide 146
Slide 146 text
No content
Slide 147
Slide 147 text
No content
Slide 148
Slide 148 text
validation
Slide 149
Slide 149 text
No content
Slide 150
Slide 150 text
No content
Slide 151
Slide 151 text
Slide 152
Slide 152 text
No content
Slide 153
Slide 153 text
noscript
Slide 154
Slide 154 text
all browsers support javascript
Slide 155
Slide 155 text
nobody disables javascript anymore
Slide 156
Slide 156 text
and if you do, stuff will break
Slide 157
Slide 157 text
deal with it
Slide 158
Slide 158 text
No content
Slide 159
Slide 159 text
…
Slide 160
Slide 160 text
1 2 3
HTMLBodyElement
Slide 161
Slide 161 text
1 2 3
HTMLElement : noscript
HTMLBodyElement
Slide 162
Slide 162 text
1 2 3
HTMLElement : noscript
Text : 1
HTMLBodyElement
Slide 163
Slide 163 text
1 2 3
HTMLElement : noscript
Text : 1
HTMLBodyElement
Slide 164
Slide 164 text
1 2 3
HTMLElement : noscript
Text : 1 2
HTMLBodyElement
Slide 165
Slide 165 text
1 2 3
HTMLElement : noscript
Text : 1 2
HTMLBodyElement
Slide 166
Slide 166 text
1 2 3
Text : 3
HTMLElement : noscript
Text : 1 2
HTMLBodyElement
Slide 167
Slide 167 text
1 2 3
Text : 3
HTMLElement : noscript
Text : 1 2
HTMLBodyElement
Slide 168
Slide 168 text
…
Slide 169
Slide 169 text
no
Slide 170
Slide 170 text
…
Slide 171
Slide 171 text
wtf?
Slide 172
Slide 172 text
@html5test
Slide 173
Slide 173 text
https://html5te.st/quiz
#HTMLQuiz