Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
∞ things I didn’t know about HTML, CSS, and Jav...
Search
Mathias Bynens
March 01, 2014
Programming
11
3.9k
∞ things I didn’t know about HTML, CSS, and JavaScript @ Kod.io 2014
Slides for my talk on random web development fun facts at Kod.io 2014.
Mathias Bynens
March 01, 2014
Tweet
Share
More Decks by Mathias Bynens
See All by Mathias Bynens
V8 internals for JavaScript developers @ Fronteers 2018
mathiasbynens
3
500
V8 internals for JavaScript developers
mathiasbynens
2
890
What’s new in ES2018?
mathiasbynens
2
140
V8 internals for JavaScript developers
mathiasbynens
1
170
Preventing timing attacks on the web @ Fronteers Jam 2016
mathiasbynens
4
250
Front-End Performance: The Dark Side @ ColdFront Conference 2016
mathiasbynens
1
420
Hacking with Unicode in 2016
mathiasbynens
15
15k
Front-End Performance: The Dark Side @ Fronteers Spring Conference 2016
mathiasbynens
16
57k
3.14 things I didn’t know about CSS @ CSSConf.asia 2015
mathiasbynens
4
1k
Other Decks in Programming
See All in Programming
実践!App Intents対応
yuukiw00w
1
350
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.3k
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
210
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
6
860
🔨 小さなビルドシステムを作る
momeemt
1
500
RDoc meets YARD
okuramasafumi
1
110
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
200
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
74th
8
3.2k
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
120
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
580
MLH State of the League: 2026 Season
theycallmeswift
0
160
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
The Cult of Friendly URLs
andyhume
79
6.5k
RailsConf 2023
tenderlove
30
1.2k
Gamification - CAS2011
davidbonilla
81
5.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Agile that works and the tools we love
rasmusluckow
329
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Transcript
@mathias · #kodio_2014 Ten things I didn’t know about HTML
@mathias
Ten things I didn’t know about HTML @mathias · #kodio_2014
∞ things I didn’t know about HTML, CSS & JavaScript
@mathias · #kodio_2014
Back to the ’90s kickin’ it old skool
None
Background colors <body bgcolor="pink"></body>
Background colors <body bgcolor="pink"></body>
Background colors <body bgcolor="#ffc0cb"></body>
Background colors <body bgcolor="ffc0cb"></body>
Background colors <body bgcolor="#f3f"></body> " #FF33FF
Background colors <body bgcolor="f3f"></body> " #0F030F
Background colors <body bgcolor="sick"></body> " #00C000
Background colors <body bgcolor="MrT"></body> " #000000
Background colors <body bgcolor="chucknorris"></body> " #C00000
Background colors <body bgcolor="crap"></body> " #C0A000
Background colors <body bgcolor="!"></body> " #000000
Background colors <body bgcolor="kodio"></body> " #00D000
Background colors http://mths.be/bgcolor
Background colors http://mths.be/bgcolor
“Valid HTML” conformance criteria
Document Type Definition
DTD <head> <p>Lorem ipsum.</p> </head>
DTD <kitchensink>
DTD fail <input type="date" placeholder="foo">
DTD fail <input type="date" placeholder="foo"> <table> <tr><td>foo</td></tr> <tr><td colspan="2">bar</td></tr> </table>
DTD fail <input type="date" placeholder="foo"> → can still be checked
by a computer <table> <tr><td>foo</td></tr> <tr><td colspan="2">bar</td></tr> </table>
Computer says no <img src="foo.png" alt=""> <time datetime="2013-10-03">LOL</time> <blockquote>not a
quote</blockquote>
Computer says no <img src="foo.png" alt=""> → can only be
checked by a human <time datetime="2013-10-03">LOL</time> <blockquote>not a quote</blockquote>
Take-away Don’t obsess about HTML validation. • not the whole
story • validators have bugs, too Functionality trumps validation anyway. <meta http-equiv="X-UA-Compatible" content="IE=edge">
Character references aka. “entities”
Character references <!-- valid and reliable: --> <p>foo & bar</p>
<!-- renders as “foo & bar” -->
;
github:twbs/bootstrap#3057
github:twbs/bootstrap#3057
;
; PRETENDS TO BE OPTIONAL BREAKS STUFF WHEN OMITTED
Character references <!-- valid and reliable: --> <p>foo & bar</p>
<!-- renders as “foo & bar” -->
Character references <!-- invalid, but reliable: --> <p>foo & bar</p>
<!-- renders as “foo & bar” -->
Character references <!-- invalid, and confusing: --> <p title="foo&bar"> foo&bar
</p> <!-- title renders as “foo&bar” --> <!-- text renders as “foo&bar” -->
Character references <!-- valid and reliable: --> <p>foo & bar</p>
<!-- renders as “foo & bar” --> http://mths.be/bdu
Character references <!-- valid and reliable: --> <p>foo > bar</p>
<!-- renders as “foo > bar” -->
Character references <!-- invalid, but reliable: --> <p>foo > bar</p>
<!-- renders as “foo > bar” -->
Character references <!-- invalid, and confusing: --> <p title="foo>bar"> foo>bar
</p> <!-- title renders as “foo>bar” --> <!-- text renders as “foo>bar” -->
Character references <!-- valid and reliable: --> <p>foo > bar</p>
<!-- renders as “foo > bar” -->
Character references <p>foo…bar</p> <!-- which symbol is this? --> <!--
how will it render? -->
Character references <p>foo…bar</p> <!-- which symbol is this? --> <!--
how will it render? -->
… is U+0085, right?
… is U+0085, right? ✘
Nope, not in HTML!
Nope, not in HTML!
…but it is in XHTML
Character references
Tags
Valid HTML <!DOCTYPE html> <html> <head> <title>Foo</title> </head> <body> …
</body> </html>
Valid HTML <!DOCTYPE html> <html> <head> <title>Foo</title> </head> <body> …
</body> </html>
Valid HTML <!DOCTYPE html> <html> <head> <title>Huh?</title> <body> …
Valid HTML <!DOCTYPE html> <html> <head> <title>Huh?</title> <body> …
Valid HTML <!DOCTYPE html> <title>lolwut</title> …
None
None
^ n FTFY
Using CSS without HTML
None
None
CSS without HTML $ curl -i http://mathiasbynens.be/demo/css-without-html HTTP/1.1 200 OK
Date: Wed, 03 Oct 2013 13:33:37 GMT Link: <css-without-html.css>;rel=stylesheet Content-Length: 0 Content-Type: text/html; charset=UTF-8 http://mths.be/bpe
CSS without HTML $ curl -i http://mathiasbynens.be/demo/css-without-html HTTP/1.1 200 OK
Date: Wed, 03 Oct 2013 13:33:37 GMT Link: <css-without-html.css>;rel=stylesheet Content-Length: 0 Content-Type: text/html; charset=UTF-8 http://mths.be/bpe
None
Font family names
CSS html { font-family: 'Comic Sans MS'; } “If there’s
whitespace in the font family name, it must be quoted.”
CSS html { font-family: Comic Sans MS; } “If there’s
whitespace in the font family name, it must be quoted.” http://mths.be/bft
CSS html { font-family: 456bereastreet; }
CSS html { font-family: 456bereastreet; }
CSS html { font-family: \34 56bereastreet; }
CSS html { font-family: \34 56bereastreet; }
CSS html { font-family: '456bereastreet'; }
CSS http://mths.be/bjm
Attribute values
Attribute values <a href="foo">…</a> <style> a[href="foo"] { background: hotpink; }
</style>
Attribute values <a href=foo>…</a> <style> a[href=foo] { background: hotpink; }
</style>
Attribute values <a href=foo|bar>…</a> <style> a[href=foo|bar] { background: hotpink; }
</style>
Attribute values <a href=foo|bar>…</a> <style> a[href=foo|bar] { background: hotpink; }
</style>
Attribute values <a href=foo|bar>…</a> <style> a[href="foo|bar"] { background: hotpink; }
</style> http://mths.be/bal
Attribute values http://mths.be/bjn
Handling user input
http://mths.be/bqv
http://mths.be/bqv
Characters in JS
JavaScript string length >> 'A'.length // U+0041 1 >> 'A'
== '\u0041' true >> 'B'.length // U+0042 1 >> 'B' == '\u0042' true
String length ≠ char count >> 'A'.length // U+1D400 2
>> 'A' == '\uD835\uDC00' true >> 'B'.length // U+1D401 2 >> 'B' == '\uD835\uDC01' true http://mths.be/bed
Surrogate pairs // for non-BMP code points (> 0xFFFF) function
getSurrogates(codePoint) { var high = Math.floor((codePoint - 0x10000) / 0x400) + 0xD800; var low = (codePoint - 0x10000) % 0x400 + 0xDC00; return [ high, low ]; } ! function getCodePoint(high, low) { var codePoint = (high - 0xD800) * 0x400 + low - 0xDC00 + 0x10000; return codePoint; } ! >> getSurrogates('A'); // U+1D400 [ 0xD835, 0xDC00 ] >> getCodePoint(0xD835, 0xDC00); 0x1D400 http://mths.be/bed
JS string character count function countSymbols(string) { return punycode.ucs2.decode(string).length; }
! >> countSymbols('A') // U+0041 1 >> countSymbols('A') // U+1D400 1 http://mths.be/punycode
JS variable names
Which is invalid? var H ̹̙̦̮͉̩̗̗ ͧ̇̏̊̾ Eͨ͆͒̆ͮ̃ ͏̷̮̣̫̤̣Cͯ̂͐ ͏̨̛͔̦̟͈̻O
̜͎͍͙͚̬̝̣ ̽ͮ͐͗̀ͤ̍̀ ͢ M̴̡̲̭͍͇̼̟̯̦ ̉̒͠ Ḛ̛̙̞̪̗ ͥ ͤͩ̾͑̔͐ ͅ Ṯ̴̷̷̗̼͍ ̿̿̓̽͐ H ̙̙ ̔̄ ͜ ; var "_ಠಠ_"; var ϗ îਓƎ ℵೋീΔେ; var ʃː λ ˀπ ᐩᐨᐟᑉᐦᐸᐳ\u200C; var a; http://mths.be/ber
♥ JS var H ̹̙̦̮͉̩̗̗ ͧ̇̏̊̾ Eͨ͆͒̆ͮ̃ ͏̷̮̣̫̤̣Cͯ̂͐ ͏̨̛͔̦̟͈̻O ̜͎͍͙͚̬̝̣
̽ͮ͐͗̀ͤ̍̀ ͢ M̴̡̲̭͍͇̼̟̯̦ ̉̒͠ Ḛ̛̙̞̪̗ ͥ ͤͩ̾͑̔͐ ͅ Ṯ̴̷̷̗̼͍ ̿̿̓̽͐ H ̙̙ ̔̄ ͜ ; // valid var !_ಠಠ_!; // valid var ϗ îਓƎ ℵೋീΔେ; // valid var ʃː λ ˀπ ᐩᐨᐟᑉᐦᐸᐳ\u200C; // valid var a; // syntax error http://mths.be/ber
/^(?!(?:do|if|in|for|let|new|try|var|case|else| enum|eval|false|null|this|true|void|with|break| catch|class|const|super|throw|while|yield|delete| export|import|public|return|static|switch|typeof| default|extends|finally|package|private|continue| debugger|function|arguments|interface|protected| implements|instanceof)$)[$A-Z\_a-z\xaa\xb5\xba \xc0-\xd6\xd8-\xf6\xf8-\u02c1\u02c6-\u02d1\u02e0- \u02e4\u02ec\u02ee\u0370- \u0374\u0376\u0377\u037a-\u037d\u0386\u0388-
\u038a\u038c\u038e-\u03a1\u03a3-\u03f5\u03f7- \u0481\u048a-\u0527\u0531-\u0556\u0559\u0561- \u0587\u05d0-\u05ea\u05f0-\u05f2\u0620-\u064a
\u20f0\u2cef-\u2cf1\u2d7f\u2de0-\u2dff\u302a- \u302f\u3099\u309a\ua620-\ua629\ua66f\ua674- \ua67d\ua69f\ua6f0\ua6f1\ua802\ua806\ua80b\ua823- \ua827\ua880\ua881\ua8b4-\ua8c4\ua8d0- \ua8d9\ua8e0-\ua8f1\ua900-\ua909\ua926-\ua92d \ua947-\ua953\ua980-\ua983\ua9b3-\ua9c0\ua9d0- \ua9d9\uaa29-\uaa36\uaa43\uaa4c\uaa4d\uaa50- \uaa59\uaa7b\uaab0\uaab2-\uaab4\uaab7\uaab8\uaabe \uaabf\uaac1\uaaeb-\uaaef\uaaf5\uaaf6\uabe3- \uabea\uabec\uabed\uabf0-\uabf9\ufb1e\ufe00-
\ufe0f\ufe20-\ufe26\ufe33\ufe34\ufe4d-\ufe4f \uff10-\uff19\uff3f]*$/
JS variable names http://mths.be/bjo
Questions? @mathias