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

A presentation at Tech Talk @ Tagesspiegel by Gunnar Bittersmann

TIL about XHTML

SGML

HTML

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

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

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

<!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”>

<!DOCTYPE html>

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

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

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

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

<!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”>

<!DOCTYPE html>

<!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”>

<!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”>

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

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

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

TIL about XHTML

TIL ab. CSS escapes

TIL about SVG in JS

TIL about BVG in JS

TIL about SVG in JS

TIL about XHTML

TIL ab. CSS escapes

Gunnar Bittersmann
@gunnarbittersmann

1 / 45

Quirks and standard rendering modes
DOCTYPE
Entity-Deklaration im DOCTYPE
CSS escapes
SVG in JS

Resources

The following resources were mentioned during the presentation or are useful additional information.

Code

The following code examples from the presentation can be tried out live.

https://codepen.io/gunnarbittersmann/pen/abwEdZz

Hobbits

Zeichen zwischen Zahl und Einheit sowie bei mehrteiligen Abkürzungen: narrow no-break space U+202F
https://codepen.io/gunnarbittersmann/pen/vYZmoqY

CSS escapes (Winterberg)

CSS-Escapes in Klassen- und ID-Selektoren
https://codepen.io/gunnarbittersmann/pen/bGRrjRM?editors=0010

SVG in JS

document.createElementNS