TIL about XHTML + ab. CSS escapes + about SVG in JS

A presentation at Tech Talk @ Tagesspiegel in October 2021 in by Gunnar Bittersmann

Slide 1

Slide 1

TIL about XHTML

Slide 2

Slide 2

SGML

Slide 3

Slide 3

HTML

Slide 4

Slide 4

HTML 4.01 XHTML 1.0 XHTML 1.0 (SGML) text/html (XML) text/html (XML) application/xhtml+xml XHTML 2.0 (XML) application/xhtml+xml

Slide 5

Slide 5

Slide 6

Slide 6

HTML 4.01 XHTML 1.0 XHTML 1.0 (SGML) text/html (XML) text/html (XML) application/xhtml+xml HTML5 HTML5 XHTML5 (HTML syntax) text/html (XML syntax) text/html (XML syntax) application/xhtml+xml

Slide 7

Slide 7

HTML 4.01 XHTML 1.0 XHTML 1.0 (SGML) text/html (XML) text/html (XML) application/xhtml+xml HTML HTML polyglot XHTML (HTML syntax) text/html (XML syntax) text/html (XML syntax) application/xhtml+xml

Slide 8

Slide 8

<!DOCTYPE HTML PUBLIC “-!”W3C!”DTD HTML 4.01!”EN” “http:!”!!#.w3.org/TR/html4/strict.dtd”> <!DOCTYPE html PUBLIC “-!”W3C!”DTD XHTML 1.0 Strict!”EN” “http:!”!!#.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <!DOCTYPE HTML PUBLIC “-!”W3C!”DTD HTML 4.01 Transitional!”EN” “http:!”!!#.w3.org/TR/html4/loose.dtd”> <!DOCTYPE html PUBLIC “-!”W3C!”DTD XHTML 1.0 Transitional!”EN” “http:!”!!#.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <!DOCTYPE HTML PUBLIC “-!”W3C!”DTD HTML 4.01 Frameset!”EN” “http:!”!!#.w3.org/TR/html4/frameset.dtd”> <!DOCTYPE html PUBLIC “-!”W3C!”DTD XHTML 1.0 Frameset!”EN” “http:!”!!#.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

Slide 9

Slide 9

<!DOCTYPE html>

Slide 10

Slide 10

Slide 11

Slide 11

Slide 12

Slide 12

standards compliant A wizard is never late, nor is he early. He arrives precisely when he means to. h CSS box model quirks A wizard is never late, nor is he early. He arrives precisely when he means to. width height width

Slide 13

Slide 13

standards compliant bp h pb CSS box model A wizard is never late, nor is he early. He arrives precisely when he means to. quirks width pb pb bp height bp A wizard is never late, nor is he early. He arrives precisely when he means to. bp width pb

Slide 14

Slide 14

bp h pb CSS box model A wizard is never late, nor is he early. He arrives precisely when he means to. bp width pb pb bp height box-sizing: content-box A wizard is never late, nor is he early. He arrives precisely when he means to. box-sizing: border-box bp width pb

Slide 15

Slide 15

✘

<meta name=”box-model” content=”standards-compliant”!%

Slide 16

Slide 16

<!DOCTYPE HTML PUBLIC “-!”W3C!”DTD HTML 4.01!”EN” “http:!”!!#.w3.org/TR/html4/strict.dtd”> <!DOCTYPE html PUBLIC “-!”W3C!”DTD XHTML 1.0 Strict!”EN” “http:!”!!#.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <!DOCTYPE HTML PUBLIC “-!”W3C!”DTD HTML 4.01 Transitional!”EN” “http:!”!!#.w3.org/TR/html4/loose.dtd”> <!DOCTYPE html PUBLIC “-!”W3C!”DTD XHTML 1.0 Transitional!”EN” “http:!”!!#.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <!DOCTYPE HTML PUBLIC “-!”W3C!”DTD HTML 4.01 Frameset!”EN” “http:!”!!#.w3.org/TR/html4/frameset.dtd”> <!DOCTYPE html PUBLIC “-!”W3C!”DTD XHTML 1.0 Frameset!”EN” “http:!”!!#.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

Slide 17

Slide 17

<!DOCTYPE html>

Slide 18

Slide 18

<!DOCTYPE html PUBLIC “-!”W3C!”DTD XHTML 1.1!”EN” “http:!”!!#.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http:!”!!#.w3.org/2000/xhtml” xml:lang=”de”>

Slide 19

Slide 19

<!DOCTYPE html PUBLIC “-!”W3C!”DTD XHTML 1.1!”EN” “http:!”!!#.w3.org/TR/xhtml11/DTD/xhtml11.dtd” [ <!ATTLIST html lang NMTOKEN #IMPLIED > ]> <html xmlns=”http:!”!!#.w3.org/2000/xhtml” xml:lang=”de” lang=”de”>

Slide 20

Slide 20

<!DOCTYPE html> <html xmlns=”http:!”!!#.w3.org/2000/xhtml”> <head>…!&head> <body> <p> J.&#x202F;R.&#x202F;R. Tolkien !&p> !&body> !&html>

Slide 21

Slide 21

<!DOCTYPE html [ <!ENTITY nnbsp “&#x202F;”> ]> <html xmlns=”http:!”!!#.w3.org/2000/xhtml”> <head>…!&head> <body> <p> J.&nnbsp;R.&nnbsp;R. Tolkien !&p> !&body> !&html>

Slide 22

Slide 22

<!DOCTYPE html [ <!ENTITY nnbsp “&#x202F;”> <!ENTITY SZlig “ẞ”> ]> <html xmlns=”http:!”!!#.w3.org/2000/xhtml”> <head>…!&head> <body> <p> J.&nnbsp;R.&nnbsp;R.&nbsp;Tolkien: DER SCHMIED VON GRO&SZlig;HOLZINGEN !&p> !&body> !&html>

Slide 23

Slide 23

TIL about XHTML

Slide 24

Slide 24

Slide 25

Slide 25

TIL ab. CSS escapes

Slide 26

Slide 26

Slide 27

Slide 27

Slide 28

Slide 28

Slide 29

Slide 29

Slide 30

Slide 30

Slide 31

Slide 31

Slide 32

Slide 32

Slide 33

Slide 33

Slide 34

Slide 34

Slide 35

Slide 35

Slide 36

Slide 36

TIL about SVG in JS

Slide 37

Slide 37

TIL about BVG in JS

Slide 38

Slide 38

Slide 39

Slide 39

Slide 40

Slide 40

Slide 41

Slide 41

Slide 42

Slide 42

TIL about SVG in JS

Slide 43

Slide 43

TIL about XHTML

Slide 44

Slide 44

TIL ab. CSS escapes

Slide 45

Slide 45