CSS-Cookbook - Auszug

Kurzvortrag beim Frontend Meetup in Frankfurt. Ich habe gezeigt, wie man manche Tabellen mit ein wenig CSS für mobile Endgeräte linearisieren kann und wie man ohne Flexbox die Reihenfolge von Layoutbestandteilen bei der Linearisierung beeinflussen kann.

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