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

10 things I didn’t know about HTML, CSS, and Ja...

Avatar for Kod.io Linz Kod.io Linz
March 01, 2014
Programming
360
5

10 things I didn’t know about HTML, CSS, and JavaScript - Mathias Bynens

Avatar for Kod.io Linz

Kod.io Linz

March 01, 2014

More Decks by Kod.io Linz

See All by Kod.io Linz
Kod.io Linz closing notes - Floor Drees
Avatar for Kod.io Linz kodio_linz
0
200
Make yours and other people's life easier! Do support! - Mike Adolphs
Avatar for Kod.io Linz kodio_linz
0
140
Objective-C for Rubyists - Mikael Konutgan
Avatar for Kod.io Linz kodio_linz
0
180
How to become a better developer - Markus Prinz
Avatar for Kod.io Linz kodio_linz
1
130
Docker; The Shipping - Andreas Tiefenthaler
Avatar for Kod.io Linz kodio_linz
1
160
The Ultimate Python Database Toolkit: SQLAlchemy - Muhammet Sena Aydın
Avatar for Kod.io Linz kodio_linz
1
320
How to Get More Women in Tech in 5 Steps - Anika Lindtner
Avatar for Kod.io Linz kodio_linz
0
710
RubyMotion’s Secret Sauce - Joshua Ballenco
Avatar for Kod.io Linz kodio_linz
0
310
Fly, you tools - Piotr Szotkowski
Avatar for Kod.io Linz kodio_linz
1
290

Other Decks in Programming

See All in Programming
決定論的オーケストレーションの設計と実装 / Design and Implementation of Deterministic Orchestration
Avatar for nrs nrslib
4
1.5k
セキュリティの専門家じゃなくてもできる。「セキュリティ意識」をアップデートして サプライチェーン攻撃への耐性を高めよう。
Avatar for tk3fftk tk3fftk
5
980
ローカルLLMを使ってB2Bサービスを作っていての学び
Avatar for Hiroshige Umino yaotti
0
220
IBM Bobを活用したレガシーアプリの最新化
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
1
220
AIキャラアプリkaiwaの低遅延音声通話基盤をどう作ったか - AWS Gravitonで支える低遅延・低コストAI Agent基盤
Avatar for 最上土川 mogamit
0
120
SREは、MCPとSRE Agentをこう使え！
Avatar for kazumax55 kazumax55
0
130
Go1.27で導入されるジェネリクスメソッドでできること
Avatar for mackee mackee
0
200
Datadog × OpenTelemetry 入門と実践のあいだ
Avatar for Max Kento kn_to_maxpno
1
180
スマートグラスで並列バイブコーディング
Avatar for Hayami Shuhei hyshu
0
270
さぁV100、メモリをお食べ・・・
Avatar for nilpe nilpe
0
160
ランチタイムLT会3周年！ランチタイムLT会を3年間続けられたお話
Avatar for y-ohgi y0hgi
1
110
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
Avatar for chobishiba chobishiba
3
610

Featured

See All Featured
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
9.3k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
55k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.7k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
3
1.1k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
400
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
350
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
260
Building an army of robots
Avatar for Kyle Neath kneath
306
46k

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