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

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

@mathias

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

∞ things I didn’t know about HTML, CSS & JavaScript
@mathias · #kodio_2014

Back to the ’90s kickin’ it old skool

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

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

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

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

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

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

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

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

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

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

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

Background colors http://mths.be/bgcolor

“Valid HTML” conformance criteria

Document Type Deﬁnition

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

DTD <kitchensink>

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

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

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>

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

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>

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

Character references aka. “entities”

Character references  <p>foo & bar</p>

github:twbs/bootstrap#3057

; PRETENDS TO BE OPTIONAL BREAKS STUFF WHEN OMITTED

Character references  <p>foo &amp bar</p>

Character references  <p title="foo&ampbar"> foo&ampbar
</p>

http://mths.be/bdu

Character references  <p>foo > bar</p>

Character references  <p>foo &gt bar</p>

Character references  <p title="foo&gtbar"> foo&gtbar
</p>

Character references  <p>foo > bar</p>

Character references <p>foobar</p>

is U+0085, right?

is U+0085, right? ✘

Nope, not in HTML!

…but it is in XHTML

Character references

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

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

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

^ n FTFY

Using CSS without HTML

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

Font family names

CSS html {  font-family: 'Comic Sans MS';  } “If there’s
whitespace in the font family name, it must be quoted.”

CSS html {  font-family: Comic Sans MS;  } “If there’s
whitespace in the font family name, it must be quoted.” http://mths.be/bft

CSS html {  font-family: 456bereastreet;  }

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

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

CSS http://mths.be/bjm

Attribute values

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

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

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

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

Attribute values http://mths.be/bjn

Handling user input

http://mths.be/bqv

Characters in JS

JavaScript string length >> 'A'.length // U+0041 1 >> 'A'
== '\u0041' true >> 'B'.length // U+0042 1 >> 'B' == '\u0042' true

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

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

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

JS variable names

Which is invalid? var H ̹̙̦̮͉̩̗̗ ͧ̇̏̊̾ Eͨ͆͒̆ͮ̃ ͏̷̮̣̫̤̣Cͯ̂͐ ͏̨̛͔̦̟͈̻O
̜͎͍͙͚̬̝̣ ̽ͮ͐͗̀ͤ̍̀ ͢ M̴̡̲̭͍͇̼̟̯̦ ̉̒͠ Ḛ̛̙̞̪̗ ͥ ͤͩ̾͑̔͐ ͅ Ṯ̴̷̷̗̼͍ ̿̿̓̽͐ H ̙̙ ̔̄ ͜ ; var "_ಠಠ_"; var ໦ϗ îਓƎ ℵೋീΔେ; var ʃː λ ˀπ ᐩᐨᐟᑉᐦᐸᐳ\u200C; var a; http://mths.be/ber

♥ JS var H ̹̙̦̮͉̩̗̗ ͧ̇̏̊̾ Eͨ͆͒̆ͮ̃ ͏̷̮̣̫̤̣Cͯ̂͐ ͏̨̛͔̦̟͈̻O ̜͎͍͙͚̬̝̣
̽ͮ͐͗̀ͤ̍̀ ͢ M̴̡̲̭͍͇̼̟̯̦ ̉̒͠ Ḛ̛̙̞̪̗ ͥ ͤͩ̾͑̔͐ ͅ Ṯ̴̷̷̗̼͍ ̿̿̓̽͐ H ̙̙ ̔̄ ͜ ; // valid var !_ಠಠ_!; // valid var ໦ϗ îਓƎ ℵೋീΔେ; // valid var ʃː λ ˀπ ᐩᐨᐟᑉᐦᐸᐳ\u200C; // valid var a; // syntax error http://mths.be/ber

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

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

Questions? @mathias

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

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

More Decks by Kod.io Linz

Other Decks in Programming

Featured

Transcript