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 JavaScript @ Kod.io 2014
Search
Mathias Bynens
March 01, 2014
Programming
10
3.8k
∞ 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
2
440
V8 internals for JavaScript developers
mathiasbynens
1
690
What’s new in ES2018?
mathiasbynens
1
89
V8 internals for JavaScript developers
mathiasbynens
0
110
Preventing timing attacks on the web @ Fronteers Jam 2016
mathiasbynens
3
190
Front-End Performance: The Dark Side @ ColdFront Conference 2016
mathiasbynens
0
280
Hacking with Unicode in 2016
mathiasbynens
14
14k
Front-End Performance: The Dark Side @ Fronteers Spring Conference 2016
mathiasbynens
15
57k
3.14 things I didn’t know about CSS @ CSSConf.asia 2015
mathiasbynens
3
820
Other Decks in Programming
See All in Programming
PHPはいつから死んでいるかの調査
chiroruxx
1
360
ONE WEDGE_company_guide
1wedge_one
0
440
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
160
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
Site Reliability Engineering for GMO
pyama86
7
1k
What We Can Learn From OSS
inouehi
0
420
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.3k
今、知っておきたい! 生成AIエージェントの世界
elith
3
350
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
350
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
190
Featured
See All Featured
A Tale of Four Properties
chriscoyier
150
22k
GraphQLとの向き合い方2022年版
quramy
31
12k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
186
16k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Rails Girls Zürich Keynote
gr2m
91
13k
Docker and Python
trallard
33
2.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
The Invisible Side of Design
smashingmag
294
49k
10 Git Anti Patterns You Should be Aware of
lemiorhan
647
58k
GitHub's CSS Performance
jonrohan
1024
450k
Building Flexible Design Systems
yeseniaperezcruz
318
37k
It's Worth the Effort
3n
180
27k
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