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

TIL about XHTML + ab. CSS escapes + about SVG i...

Gunnar Bittersmann
October 15, 2021
Programming
0
180

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

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

Codepens:
- https://codepen.io/gunnarbittersmann/pen/abwEdZz
- https://codepen.io/gunnarbittersmann/pen/vYZmoqY
- https://codepen.io/gunnarbittersmann/pen/bGRrjRM?editors=0010

Quellen:
- https://www.w3.org/TR/html4/sgml/loosedtd.html
- https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
- https://html.spec.whatwg.org/multipage/named-characters.html
- https://html.spec.whatwg.org/multipage/dom.html#global-attributes
- https://www.w3.org/International/questions/qa-escapes.de

Gunnar Bittersmann

October 15, 2021
Tweet

More Decks by Gunnar Bittersmann

See All by Gunnar Bittersmann
Responsive typography 2
gunnarbittersmann
0
91
Go home, Prettifier, you’re drunk!!
gunnarbittersmann
0
67
3 Fehler sind zu finden
gunnarbittersmann
0
110
TIL that the future :has already begun
gunnarbittersmann
0
79
TIL how to clear floats
gunnarbittersmann
0
74
TIL about showModal (from small things big things one day come)
gunnarbittersmann
0
84
Inclusive Design 24 2022 – Gunnar’s picks
gunnarbittersmann
0
74
The color rebeccapurple
gunnarbittersmann
0
110
Mehrsprachige Websites
gunnarbittersmann
0
84

Other Decks in Programming

See All in Programming
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
230
Figma Dev Modeで変わる！Flutterの開発体験
watanave
0
130
初めてDefinitelyTypedにPRを出した話
syumai
0
420
Better Code Design in PHP
afilina
PRO
0
130
3rd party scriptでもReactを使いたい！ Preact + Reactのハイブリッド開発
righttouch
PRO
1
600
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
受け取る人から提供する人になるということ
little_rubyist
0
230
ローコードSaaSのUXを向上させるためのTypeScript
taro28
1
620
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
Jakarta EE meets AI
ivargrimstad
0
650
Contemporary Test Cases
maaretp
0
140

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Adopting Sorbet at Scale
ufuk
73
9.1k
Optimizing for Happiness
mojombo
376
70k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
130
Writing Fast Ruby
sferik
627
61k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Done Done
chrislema
181
16k

Transcript

  1. TIL about XHTML

  2. SGML

  3. HTML

  4. HTML 4.01 (SGML) text/html XHTML 1.0 (XML) text/html XHTML 1.0

    (XML) application/xhtml+xml XHTML 2.0 (XML) application/xhtml+xml
  5. None

  6. HTML 4.01 (SGML) text/html XHTML 1.0 (XML) text/html XHTML 1.0

    (XML) application/xhtml+xml HTML5 (HTML syntax) text/html HTML5 (XML syntax) text/html XHTML5 (XML syntax) application/xhtml+xml

  7. HTML 4.01 (SGML) text/html XHTML 1.0 (XML) text/html XHTML 1.0

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

  8. <!DOCTYPE HTML PUBLIC "-!//W3C!//DTD HTML 4.01!//EN" "http:!//!!www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC

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

  9. <!DOCTYPE html>

  10. None
  11. None

  12. A wizard is never late, nor is he early. He

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

  13. A wizard is never late, nor is he early. He

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

  14. box-sizing: content-box box-sizing: border-box bp width pb bp width pb

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

  15. <meta name="box-model" content="standards-compliant"!/> ✘

  16. <!DOCTYPE HTML PUBLIC "-!//W3C!//DTD HTML 4.01!//EN" "http:!//!!www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC

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

  17. <!DOCTYPE html>

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

  19. <!DOCTYPE html PUBLIC "-!//W3C!//DTD XHTML 1.1!//EN" "http:!//!!www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" [ <!ATTLIST html

    lang NMTOKEN #IMPLIED > ]> <html xmlns="http:!//!!www.w3.org/2000/xhtml" xml:lang="de" lang="de">

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

    !</body> !</html>

  21. <!DOCTYPE html [ <!ENTITY nnbsp "&#x202F;"> ]> <html xmlns="http:!//!!www.w3.org/2000/xhtml"> <head>…!</head>

    <body> <p> J.&nnbsp;R.&nnbsp;R. Tolkien !</p> !</body> !</html>

  22. <!DOCTYPE html [ <!ENTITY nnbsp "&#x202F;"> <!ENTITY SZlig "ẞ"> ]>

    <html xmlns="http:!//!!www.w3.org/2000/xhtml"> <head>…!</head> <body> <p> J.&nnbsp;R.&nnbsp;R.&nbsp;Tolkien: DER SCHMIED VON GRO&SZlig;HOLZINGEN !</p> !</body> !</html>

  23. TIL about XHTML

  24. None

  25. TIL ab. CSS escapes

  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None

  34. TIL about SVG in JS

  35. TIL about BVG in JS

  36. None
  37. None
  38. None
  39. None
  40. None
  41. None

  42. TIL about SVG in JS

  43. TIL about XHTML

  44. TIL ab. CSS escapes

  45. None