CSS-Cookbook - Auszug

Transcript

1. CSS Cookbook – interessante Designherausforderungen bestehen 1

2. Tabellen responsive machen 2

3. Tabellen und RWD 1. Tabellen sehen so aus, wie wir

   sie erwarten, weil die passenden CSS-Regeln auf das HTML einwirken. 2. Das HTML macht nicht mehr, als Inhalte zu markieren. Es zeichnet diese semantisch aus. Die Optik kommt durch CSS. In diesem Falle durch das Browser-Stylesheet. 3. Diese Optik kann man also mit CSS-Mitteln verändern. 4. Manchmal kann dies nützlich sein. 5. Die folgenden Beispiele können hin und wieder hilfreich sein. 3

4. Es gibt nicht die eine Standardlösung für Tabellen und RWD

   4

5. Tabelle im Browser-CSS table { display: table; } tr {

   display: table-row; } thead { display: table-header-group; } tbody { display: table-row-group; } tfoot { display: table-footer-group; } col { display: table-column; } colgroup { display: table-column-group; } td, th { display: table-cell; } caption { display: table-caption; } CSS 5

6. Schauen wir uns das Grundprinzip an 6

7. Die Ausgangslage Culture Name Display Name Culture Code ISO 639x

   af-ZA Afrikaans - South Africa 0x0436 AFK sq-AL Albanian - Albania 0x041C SQI ar-DZ Arabic - Algeria 0x1401 ARG ar-BH Arabic - Bahrain 0x3C01 ARH 7

8. Die Tabelleneigenschaften nehmen 8

9. Das CSS table, thead, tbody, tr, td, th { display:

   block; } CSS 9

10. Das Ergebnis Culture Name Display Name Culture Code ISO 639x

    af-ZA Afrikaans - South Africa 0x0436 AFK sq-AL Albanian - Albania 10

11. Den Header verstecken 11

12. Das CSS thead { position: absolute; clip: rect(1px 1px 1px

    1px); padding: 0; border: 0; height: 1px; width: 1px; over ow: hidden; } CSS 12

13. Das Ergebnis af-ZA Afrikaans - South Africa 0x0436 AFK sq-AL

    Albanian - Albania 0x041C SQI ar-DZ Arabic - Algeria 13

14. Die Header-Infos nachbauen 14

15. Das HTML <tr> <td data-title="Culture Name">af-ZA</td> <td data-title="Display Name">Afrikaans -

    South Africa</td> <td data-title="Culture Code">0x0436</td> <td data-title="ISO 639x">AFK</td> </tr> HTML 15

16. Das CSS td[data-title] { over ow: hidden; /* Floats einschliessen!

    */ } td[data-title]:before { content: attr(data-title); oat: left; font-size: .8em; color: rgba(94, 93, 82, 0.75); margin-right: 20px; } CSS 16

17. Oder auch so td[data-title]:before { content: attr(data-title); display: inline-block; width:

    35%; padding-right: 10px; white-space: nowrap; } CSS 17

18. Culture Name Display Name Culture Code ISO 639x Culture Name

    Display Name Culture Code ISO 639x Culture Name Display Name Das Ergebnis af-ZA Afrikaans - South Africa 0x0436 AFK sq-AL Albanian - Albania 0x041C SQI ar-DZ Arabic - Algeria 18

19. Abstand zueinander 19

20. Das CSS tr { margin-bottom: 20px; border: 5px solid #444;

    } CSS 20

21. Culture Name Display Name Culture Code ISO 639x Culture Name

    Display Name Culture Code ISO 639x Culture Name Das Ergebnis af-ZA Afrikaans - South Africa 0x0436 AFK sq-AL Albanian - Albania 0x041C SQI ar-DZ 21

22. Die Tabelle in Tabellenoptik Top 10 Grossing Animated Films of

    All Time Film Title Released Studio Worldwide Gross Domestic Gross Foreign Gross Budget Toy Story 3 2010 Disney Pixar $1,063,171,911 $415,004,880 $648,167,031 $200,000,000 Frozen 2013 Disney $1,010,014,508 $393,614,508 $616,400,000 $150,000,000 The Lion King 1994 Disney $987,483,777 $422,783,777 $564,700,000 $45,000,000 Despicable Me 2 2013 Universal $970,761,885 $368,061,265 $602,700,620 $76,000,000 Finding Nemo 2003 Pixar $936,743,261 $380,843,261 $555,900,000 $94,000,000 Shrek 2 2004 Dreamworks $919,838,758 $441,226,247 $478,612,511 $150,000,000 Ice Age: HTML CSS Result Edit on Codepen 22

23. Tabellen immer als Floats Released Studio Worldwide Gross Domestic Gross

    Foreign Gross Budget Toy Story 3 2010 Disney Pixar $1,063,171,911 $415,004,880 $648,167,031 $200,000,000 Released Studio Worldwide Gross Domestic Gross Foreign Gross Budget Frozen 2013 Disney $1,010,014,508 $393,614,508 $616,400,000 $150,000,000 Released The Lion King 1994 Released Despicable Me 2 2013 Top 10 Grossing Animated Films of All Time HTML CSS Result Edit on Codepen 23

24. Warum nicht Flexbox nutzen? 24

25. Mit Flexbox linearisieren table { display: ex; ex-direction: column; width:

    100%; } tbody { display: ex; ex-direction: column; order: 2; } caption { order: 1;} tfoot { order: 3;} tr, th, td { display: block;} thead { /* barrierefrei ausblenden */ } CSS Codepen 25

26. In voller Schönheit Top 10 Grossing Animated Films of All

    Time Film Title Released Studio Worldwide Gross Domestic Gross Foreign Gross Budget Sources: Wikipedia & Box Of ce Mojo. Data is current as of March 12, 2014 Toy Story 3 2010 Disney Pixar $1,063,171,911 $415,004,880 $648,167,031 $200,000,000 Frozen 2013 Disney $1,010,014,508 $393,614,508 $616,400,000 $150,000,000 The Lion King 1994 Disney $987,483,777 $422,783,777 $564,700,000 $45,000,000 Despicable Me 2 2013 Universal $970,761,885 $368,061,265 $602,700,620 $76,000,000 Finding Nemo 2003 Pixar $936,743,261 $380,843,261 $555,900,000 $94,000,000 Shrek 2 2004 Dreamworks $919,838,758 $441,226,247 $478,612,511 $150,000,000 Ice Age: Dawn of the Dinosaurs 2009 Fox $886,686,817 $196,573,705 $690,113,112 $90,000,000 Ice Age: Continental Drift 2012 Fox $877,244,782 $161,321,843 $715,922,939 $95,000,000 Shrek the Third 2007 Dreamworks $798,958,162 $322,719,944 $476,238,218 $160,000,000 Shrek Forever After 2010 Dreamworks $752,600,867 $238,736,787 $513,864,080 $165,000,000 26

27. In schmaler Schönheit Top 10 Grossing Animated Films of All

    Time Released Studio Worldwide Gross Domestic Gross Foreign Gross Budget Toy Story 3 2010 Disney Pixar $1,063,171,911 $415,004,880 $648,167,031 $200,000,000 Released Studio Worldwide Gross Domestic Gross Foreign Gross Budget Frozen 2013 Disney $1,010,014,508 $393,614,508 $616,400,000 $150,000,000 Released Studio Worldwide Gross Domestic Gross Foreign Gross Budget The Lion King 1994 Disney $987,483,777 $422,783,777 $564,700,000 $45,000,000 Released Studio Worldwide Gross Domestic Gross Despicable Me 2 2013 Universal $970,761,885 $368,061,265 Released Studio Worldwide Gross Domestic Gross Finding Nemo 2003 Pixar $936,743,261 $380,843,261 Released Studio Worldwide Gross Domestic Gross Shrek 2 2004 Dreamworks $919,838,758 $441,226,247 27

28. Bitte beachten! Der Code ist mobile- rst aufgebaut. Erst bei

    größeren Breiten wird Flexbox überschrieben. @media (min-width: 52em){ .responsive-table { display: table; } .responsive-table tfoot { display: table-footer-group; } .responsive-table tr { display: table-row; } .responsive-table th, .responsive-table td { display: table-cell; } CSS 28

29. Flex-Container de nieren .responsive-table { width: 100%; display: ex; ex-direction:

    column; } CSS .responsive-table tbody { display: ex; ex-direction: row; ex-wrap: wrap; } CSS 29

30. Den Tabellenkopf barrierefrei verstecken. .responsive-table thead { position: absolute; clip:

    rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; over ow: hidden; } CSS 30

31. Die Flexitems de nieren .responsive-table tbody tr { ex: 1

    1 250px; margin-right: 20px; } CSS 31

32. Die Codereihenfolge ändern <table> <thead></thead> <tfoot></tfoot> <tbody></tbody> </table> HTML .responsive-table

    caption { order: 1;} .responsive-table tfoot { order: 3;} .responsive-table tbody { order: 2;} CSS 32

33. Eine Tabelle scrollbar machen 33

34. Eine scrollbare Tabelle Country Height (meters) Weight (tonnes) Jaeger Technical

    Speci cations Gipsy Danger United States 79 1980 Striker Eureka Australia 76 1850 Crimson Typhoon China 76 1722 Coyote Tango Japan 86 2312 Cherno Alp Russia 85 2412 34

35. Das CSS .table-1 { display: block; width: 100%; } caption

    { display: block; } thead { display: block; oat: left; } thead tr { display: block; } CSS tbody tr { display: inline-block; } th, td { display: block; } tbody { display: block; width: auto; position: relative; over ow-x: auto; white-space: nowrap; } CSS 35

36. Flexbox light 36

37. Nur das passende CSS macht eine Tabelle optisch zu einer

    Tabelle. 37

38. Tabelle im Browser-CSS table { display: table } tr {

    display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group }< td, th { display: table-cell } caption { display: table-caption } CSS 38

39. 39

40. 40

41. display: table-footer-group Mit d i s p l a y

    : t a b l e - f o o t e r - g r o u p sagen wir dem damit behandelten Element, es möge sich wie der Fuss einer Tabelle verhalten. Und der ist am Ende der Tabelle. 41

42. display: table-footer-group 1. Artikel dazu 2. Codepen .erster-im-code { display:

    block; oat: none; width: auto; } .zweiter-im-code { display: table-footer-group } CSS 42

43. Warum nicht die Struktur ändern? • Im Beispiel gibt es

    eine xe Seitenspalte und einen exiblen Inhaltsbereich. • Diese Konstruktion kann man nur in der vorgeschlagenen Art umsetzen, also mit der xen Spalte als Erstes im Code. • Denn die exible Spalte muss mit p o s i t i o n : s t a t i c realisiert werden. • Ein Float hingegen kann nicht vor eine exible Spalte springen. 43

44. Das war's! • Grochtdreis.de • Speakerdeck • Mein Blog •

    Twitter • Webkrauts 44