Upgrade to Pro — share decks privately, control downloads, hide ads and more …

∞ things I didn’t know about HTML, CSS, and Jav...

Avatar for Mathias Bynens Mathias Bynens
March 01, 2014
Programming
3.9k
11

∞ 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.

Avatar for Mathias Bynens

Mathias Bynens

March 01, 2014

More Decks by Mathias Bynens

See All by Mathias Bynens
V8 internals for JavaScript developers @ Fronteers 2018
Avatar for Mathias Bynens mathiasbynens
3
540
V8 internals for JavaScript developers
Avatar for Mathias Bynens mathiasbynens
2
1.1k
What’s new in ES2018?
Avatar for Mathias Bynens mathiasbynens
2
160
V8 internals for JavaScript developers
Avatar for Mathias Bynens mathiasbynens
1
200
Preventing timing attacks on the web @ Fronteers Jam 2016
Avatar for Mathias Bynens mathiasbynens
4
280
Front-End Performance: The Dark Side @ ColdFront Conference 2016
Avatar for Mathias Bynens mathiasbynens
1
530
Hacking with Unicode in 2016
Avatar for Mathias Bynens mathiasbynens
15
15k
Front-End Performance: The Dark Side @ Fronteers Spring Conference 2016
Avatar for Mathias Bynens mathiasbynens
16
57k
3.14 things I didn’t know about CSS @ CSSConf.asia 2015
Avatar for Mathias Bynens mathiasbynens
4
1.2k

Other Decks in Programming

See All in Programming
CLIであることを活かしたGitHub Copilot CLI活用術 / GitHub Copilot CLI Pro Tips & Tricks
Avatar for Naoya.i nao_mk2
1
1.2k
DynamoDBには集計系のクエリがないけどなんとかしたい
Avatar for 村上優稀 musan
1
120
ReactとSvelteのその先、Ripple-TS / Beyond React and Svelte: Ripple-TS
Avatar for TOMIKAWA Sotaro ssssota
3
1.9k
次世代リンターで探る、tsgo 時代における型認識カスタムルールの現実解
Avatar for Yuta Takahashi ytakahashii
3
1.4k
不変条件と整合性境界—ビジネスが決める設計判断と実現パターン / Invariants and Consistency Boundaries
Avatar for nrs nrslib
12
3.2k
「エンジニアインターン、どうやって取った？」準備のリアルを語るLT会 Progate BAR
Avatar for akio akiomatic
0
110
Technical Debt: Understanding it Rightly, Engaging it Rightly #LaravelLiveJP
Avatar for shogogg shogogg
0
190
SPMマルチモジュールで テストカバレッジを取得する技法
Avatar for yosshi yosshi4486
0
140
柔軟なPDFレイアウトエディタを支える型システム設計 — Discriminated UnionとConditional Typeの実践
Avatar for minako-ph minako__ph
4
1.2k
Why Laravel apps break—Mastering the fundamentals to keep them maintainable
Avatar for 武田 憲太郎 kentaroutakeda
1
330
Stage 3 Decorators でできること / できないこと / TSKaigi 2026
Avatar for Susisu susisu
1
1.4k
TSKaigi 2026 TypeScriptバックエンドのオブザーバビリティ戦略 — Datadog × NestJSの実践
Avatar for Taisei Yamamoto taiseiyamamotoan
1
210

Featured

See All Featured
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.3k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.5k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
850
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.7k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.1k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
390
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.3k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.5k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k

Transcript

  1. @mathias · #kodio_2014 Ten things I didn’t know about HTML

  2. @mathias

  3. Ten things I didn’t know about HTML @mathias · #kodio_2014

  4. ∞ things I didn’t know about HTML, CSS & JavaScript

    @mathias · #kodio_2014

  5. Back to the ’90s kickin’ it old skool

  6. None

  7. Background colors <body bgcolor="pink"></body>

  8. Background colors <body bgcolor="pink"></body>

  9. Background colors <body bgcolor="#ffc0cb"></body>

  10. Background colors <body bgcolor="ffc0cb"></body>

  11. Background colors <body bgcolor="#f3f"></body> " #FF33FF

  12. Background colors <body bgcolor="f3f"></body> " #0F030F

  13. Background colors <body bgcolor="sick"></body> " #00C000

  14. Background colors <body bgcolor="MrT"></body> " #000000

  15. Background colors <body bgcolor="chucknorris"></body> " #C00000

  16. Background colors <body bgcolor="crap"></body> " #C0A000

  17. Background colors <body bgcolor="!"></body> " #000000

  18. Background colors <body bgcolor="kodio"></body> " #00D000

  19. Background colors http://mths.be/bgcolor

  20. Background colors http://mths.be/bgcolor

  21. “Valid HTML” conformance criteria

  22. Document Type Definition

  23. DTD <head> <p>Lorem ipsum.</p> </head>

  24. DTD <kitchensink>

  25. DTD fail <input type="date" placeholder="foo">

  26. DTD fail <input type="date" placeholder="foo"> <table> <tr><td>foo</td></tr> <tr><td colspan="2">bar</td></tr> </table>

  27. 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>

  28. Computer says no <img src="foo.png" alt=""> <time datetime="2013-10-03">LOL</time> <blockquote>not a

    quote</blockquote>

  29. 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>

  30. 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">

  31. Character references aka. “entities”

  32. Character references <!-- valid and reliable: --> <p>foo &amp; bar</p>

    <!-- renders as “foo & bar” -->

  33. ;

  34. github:twbs/bootstrap#3057

  35. github:twbs/bootstrap#3057

  36. ;

  37. ; PRETENDS TO BE OPTIONAL BREAKS STUFF WHEN OMITTED

  38. Character references <!-- valid and reliable: --> <p>foo &amp; bar</p>

    <!-- renders as “foo & bar” -->

  39. Character references <!-- invalid, but reliable: --> <p>foo &amp bar</p>

    <!-- renders as “foo & bar” -->

  40. Character references <!-- invalid, and confusing: --> <p title="foo&ampbar"> foo&ampbar

    </p> <!-- title renders as “foo&ampbar” --> <!-- text renders as “foo&bar” -->

  41. Character references <!-- valid and reliable: --> <p>foo & bar</p>

    <!-- renders as “foo & bar” --> http://mths.be/bdu

  42. Character references <!-- valid and reliable: --> <p>foo &gt; bar</p>

    <!-- renders as “foo > bar” -->

  43. Character references <!-- invalid, but reliable: --> <p>foo &gt bar</p>

    <!-- renders as “foo > bar” -->

  44. Character references <!-- invalid, and confusing: --> <p title="foo&gtbar"> foo&gtbar

    </p> <!-- title renders as “foo&gtbar” --> <!-- text renders as “foo>bar” -->

  45. Character references <!-- valid and reliable: --> <p>foo > bar</p>

    <!-- renders as “foo > bar” -->

  46. Character references <p>foo&#x85;bar</p> <!-- which symbol is this? --> <!--

    how will it render? -->

  47. Character references <p>foo&#x85;bar</p> <!-- which symbol is this? --> <!--

    how will it render? -->

  48. &#x85; is U+0085, right?

  49. &#x85; is U+0085, right? ✘

  50. Nope, not in HTML!

  51. Nope, not in HTML!

  52. …but it is in XHTML

  53. Character references

  54. Tags

  55. Valid HTML <!DOCTYPE html>
 <html>
 <head>
 <title>Foo</title>
 </head>
 <body>
 …


    </body>
 </html>

  56. Valid HTML <!DOCTYPE html>
 <html>
 <head>
 <title>Foo</title>
 </head>
 <body>
 …


    </body>
 </html>

  57. Valid HTML <!DOCTYPE html>
 <html>
 <head>
 <title>Huh?</title>
 <body>
 …


  58. Valid HTML <!DOCTYPE html>
 <html>
 <head>
 <title>Huh?</title>
 <body>
 …


  59. Valid HTML <!DOCTYPE html>
 <title>lolwut</title>
 …


  60. None
  61. None

  62. ^ n FTFY

  63. Using CSS without HTML

  64. None
  65. None

  66. 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

  67. 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
  68. None

  69. Font family names

  70. CSS html {
 font-family: 'Comic Sans MS';
 } “If there’s

    whitespace in the font family name, it must be quoted.”

  71. CSS html {
 font-family: Comic Sans MS;
 } “If there’s

    whitespace in the font family name, it must be quoted.” http://mths.be/bft

  72. CSS html {
 font-family: 456bereastreet;
 }

  73. CSS html {
 font-family: 456bereastreet;
 }

  74. CSS html {
 font-family: \34 56bereastreet;
 }

  75. CSS html {
 font-family: \34 56bereastreet;
 }

  76. CSS html {
 font-family: '456bereastreet';
 }

  77. CSS http://mths.be/bjm

  78. Attribute values

  79. Attribute values <a href="foo">…</a> <style> a[href="foo"] { background: hotpink; }

    </style>

  80. Attribute values <a href=foo>…</a> <style> a[href=foo] { background: hotpink; }

    </style>

  81. Attribute values <a href=foo|bar>…</a> <style> a[href=foo|bar] { background: hotpink; }

    </style>

  82. Attribute values <a href=foo|bar>…</a> <style> a[href=foo|bar] { background: hotpink; }

    </style>

  83. Attribute values <a href=foo|bar>…</a> <style> a[href="foo|bar"] { background: hotpink; }

    </style> http://mths.be/bal

  84. Attribute values http://mths.be/bjn

  85. Handling user input

  86. http://mths.be/bqv

  87. http://mths.be/bqv

  88. Characters in JS

  89. JavaScript string length >> 'A'.length // U+0041 1 >> 'A'

    == '\u0041' true >> 'B'.length // U+0042 1 >> 'B' == '\u0042' true

  90. 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

  91. 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

  92. 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

  93. JS variable names

  94. Which is invalid? var H ̹̙̦̮͉̩̗̗ ͧ̇̏̊̾ Eͨ͆͒̆ͮ̃ ͏̷̮̣̫̤̣Cͯ̂͐ ͏̨̛͔̦̟͈̻O

    ̜͎͍͙͚̬̝̣ ̽ͮ͐͗̀ͤ̍̀ ͢ M̴̡̲̭͍͇̼̟̯̦ ̉̒͠ Ḛ̛̙̞̪̗ ͥ ͤͩ̾͑̔͐ ͅ Ṯ̴̷̷̗̼͍ ̿̿̓̽͐ H ̙̙ ̔̄ ͜ ; var "_ಠಠ_"; var ໦ϗ îਓƎ ℵೋീΔେ; var ʃː λ ˀπ ᐩᐨᐟᑉᐦᐸᐳ\u200C; var a; http://mths.be/ber

  95. ♥ JS var H ̹̙̦̮͉̩̗̗ ͧ̇̏̊̾ Eͨ͆͒̆ͮ̃ ͏̷̮̣̫̤̣Cͯ̂͐ ͏̨̛͔̦̟͈̻O ̜͎͍͙͚̬̝̣

    ̽ͮ͐͗̀ͤ̍̀ ͢ M̴̡̲̭͍͇̼̟̯̦ ̉̒͠ Ḛ̛̙̞̪̗ ͥ ͤͩ̾͑̔͐ ͅ Ṯ̴̷̷̗̼͍ ̿̿̓̽͐ H ̙̙ ̔̄ ͜ ; // valid var !_ಠಠ_!; // valid var ໦ϗ îਓƎ ℵೋീΔେ; // valid var ʃː λ ˀπ ᐩᐨᐟᑉᐦᐸᐳ\u200C; // valid var a; // syntax error http://mths.be/ber

  96. /^(?!(?: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

  97. \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]*$/

  98. JS variable names http://mths.be/bjo

  99. Questions? @mathias