Pro Yearly is on sale from $80 to $50! »

CSS-Cookbook - Auszug

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.

521db10df5241d9b2b70a555cc54e9e8?s=128

Jens Grochtdreis

May 19, 2016
Tweet

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