Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Avatar for Mathias Bynens Mathias Bynens
March 01, 2014
Programming
4.1k
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
560
V8 internals for JavaScript developers
Avatar for Mathias Bynens mathiasbynens
2
1.1k
What’s new in ES2018?
Avatar for Mathias Bynens mathiasbynens
2
190
V8 internals for JavaScript developers
Avatar for Mathias Bynens mathiasbynens
1
230
Preventing timing attacks on the web @ Fronteers Jam 2016
Avatar for Mathias Bynens mathiasbynens
4
310
Front-End Performance: The Dark Side @ ColdFront Conference 2016
Avatar for Mathias Bynens mathiasbynens
1
560
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
golang-bob.pdf
Avatar for Yura Iwatsuka iwatsukayura
0
150
複雑なUIコンポーネントとの ⻑い付き合い⽅：波及するバグからテスト戦略を経て、安全な再設計へ
Avatar for masahiko.asai mixplace
0
500
Performance Optimization With LLMs
Avatar for xLeitix xleitix
0
230
コーディング自動化の次へ。人の介入をゼロにするファクトリーとサポートAIによる実践
Avatar for Seiji Takahashi timakin
5
5k
[Dev Group Paris Octobre 26] Agentforce, SIforce, Claudeforce, Slackbot… on s'y retrouve ?
Avatar for Nathan Abondance nabondance
0
120
クラウドエージェントは、 何がそんなに便利なのか / what makes cloud agents so useful
Avatar for r-kagaya rkaga
4
670
PyConTW 2026 - AI Coding 不只是工具升級, 區域醫院醫療資訊系統協作開發與資訊團隊轉型實踐
Avatar for Max Lai cclai999
0
220
Web Framework Benchmark Battle 2026, Any%
Avatar for Akira Matsuda a_matsuda
3
3.1k
高橋メソッドでCVE解説シリーズ 〜CVE-2026-112816〜
Avatar for Hakkadaikon hakkadaikon
0
170
ChromeでローカルLLM
Avatar for ryu ryu1013
0
180
AI時代のIaC入門 〜なぜインフラをコードで管理したいのか？〜 / Introduction to IaC in the AI Era
Avatar for アキキー | Akihisa Ikeda akihisaikeda
6
1.3k
Next.js: The final boss of Web Performance
Avatar for Estela Franco guaca
0
370

Featured

See All Featured
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.7k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.6k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
760
Leo the Paperboy
Avatar for Maya Tellez mayatellez
10
2.4k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
43k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.7k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
380
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.4k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
290

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