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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Mathias Bynens 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.

Avatar for Mathias Bynens

Mathias Bynens

March 01, 2014
Tweet

More Decks by Mathias Bynens

See All by Mathias Bynens
V8 internals for JavaScript developers @ Fronteers 2018
Avatar for Mathias Bynens mathiasbynens
3
530
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
520
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
野球解説AI Agentを開発してみた - 2026/02/27 LayerX社内LT会資料
Avatar for Shinichi Nakagawa shinyorke
PRO
0
340
それはエンジニアリングの糧である：AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
Avatar for nrs nrslib
0
150
Kubernetesでセルフホストが簡単なNewSQLを求めて / Seeking a NewSQL Database That's Simple to Self-Host on Kubernetes
Avatar for nnaka2992 nnaka2992
0
150
Takumiから考えるSecurity_Maturity_Model.pdf
Avatar for gessy0129 gessy0129
1
150
最初からAWS CDKで技術検証してもいいんじゃない？
Avatar for アキキー | Akihisa Ikeda akihisaikeda
4
160
AIに任せる範囲を安全に広げるためにやっていること
Avatar for Masashi Fukuzawa fukucheee
0
140
脱 雰囲気実装！ AgentCoreを良い感じに WEBアプリケーションに組み込むために
Avatar for Takuya Yonezawa takuyay0ne
3
290
AWS Infrastructure as Code の新機能 2025 総まとめ 〜SA 4人による怒涛のデモ祭り〜
Avatar for Kenji Kono konokenj
10
3.4k
Vuetify 3 → 4 何が変わった？差分と移行ポイント10分まとめ
Avatar for kouki.miura koukimiura
0
150
PHPのバージョンアップ時にも役立ったAST（2026年版）
Avatar for Atsushi Matsuo matsuo_atsushi
0
130
How to stabilize UI tests using XCTest
Avatar for Akio Itaya akkeylab
0
130
ロボットのための工場に灯りは要らない
Avatar for watany watany
11
3k

Featured

See All Featured
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.1k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.6k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
270
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
14k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.8k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
170
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
160
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
480
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
88
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.8k

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