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
   

   View Slide

2. Tabellen responsive
   machen
   2
   

   View Slide

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
   

   View Slide

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

   View Slide

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
   

   View Slide

6. Schauen wir uns das
   Grundprinzip an
   6
   

   View Slide

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
   

   View Slide

8. Die
   Tabelleneigenschaften
   nehmen
   8
   

   View Slide

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

   View Slide

10. Das Ergebnis
    Culture Name
    Display Name
    Culture Code
    ISO 639x
    af-ZA
    Afrikaans - South Africa
    0x0436
    AFK
    sq-AL
    Albanian - Albania
    10
    

    View Slide

11. Den Header verstecken
    11
    

    View Slide

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
    

    View Slide

13. Das Ergebnis
    af-ZA
    Afrikaans - South Africa
    0x0436
    AFK
    sq-AL
    Albanian - Albania
    0x041C
    SQI
    ar-DZ
    Arabic - Algeria
    13
    

    View Slide

14. Die Header-Infos
    nachbauen
    14
    

    View Slide

15. Das HTML
    
    af-ZA
    Afrikaans - South Africa
    0x0436
    AFK
    
    HTML
    15
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

19. Abstand zueinander
    19
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

24. Warum nicht Flexbox
    nutzen?
    24
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

31. Die Flexitems de nieren
    .responsive-table tbody tr {
    ex: 1 1 250px;
    margin-right: 20px;
    }
    CSS
    31
    

    View Slide

32. Die Codereihenfolge ändern
    
    
    
    
    
    HTML
    .responsive-table caption { order: 1;}
    .responsive-table tfoot { order: 3;}
    .responsive-table tbody { order: 2;}
    CSS
    32
    

    View Slide

33. Eine Tabelle scrollbar
    machen
    33
    

    View Slide

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
    

    View Slide

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
    

    View Slide

36. Flexbox light
    36
    

    View Slide

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

    View Slide

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
    

    View Slide

39. View Slide

40. View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide