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
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
510
V8 internals for JavaScript developers
Avatar for Mathias Bynens mathiasbynens
2
910
What’s new in ES2018?
Avatar for Mathias Bynens mathiasbynens
2
150
V8 internals for JavaScript developers
Avatar for Mathias Bynens mathiasbynens
1
180
Preventing timing attacks on the web @ Fronteers Jam 2016
Avatar for Mathias Bynens mathiasbynens
4
250
Front-End Performance: The Dark Side @ ColdFront Conference 2016
Avatar for Mathias Bynens mathiasbynens
1
430
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.1k

Other Decks in Programming

See All in Programming
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
Avatar for m_t_tion1 kaorumuta
2
600
CSC305 Lecture 08
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
230
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
Avatar for ternbusty ternbusty
3
210
Go言語の特性を活かした公式MCP SDKの設計
Avatar for hond hond0413
1
240
SwiftDataを使って10万件のデータを読み書きする
Avatar for akidon0000 akidon0000
0
160
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
Avatar for えいえい ei_ei_eiichi
0
940
実践Claude Code：20の失敗から学ぶAIペアプログラミング
Avatar for 武田隆志 takedatakashi
15
5.6k
Six and a half ridiculous things to do with Quarkus
Avatar for Holly Cummins hollycummins
0
180
オープンソースソフトウェアへの解像度🔬
Avatar for うたもく utam0k
16
3k
Software Architecture
Avatar for Henning Schwentner hschwentner
6
2.3k
理論と実務のギャップを超える
Avatar for kmuto eycjur
0
140
開発生産性を上げるための生成AI活用術
Avatar for starfish719 starfish719
3
1.3k

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
910
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
232
18k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
5.9k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
353
21k
Visualization
Avatar for Eitan Lees eitanlees
149
16k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k

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