CSS-Snippets

Eine Snippet-Sammlung für CSS.

Links:

Namenskonventionen:

CSS-Frameworks:

Tools:

Flexbox

Verfügbarkeit:

Siehe:

.container {
    display: -ms-flexbox;        // IE 10
    display: -webkit-flex;       // Android <= 4.3, iOS <= 6.1, Safari <= 6
    display: flex;

    -ms-flex-direction: column;  // IE 10
    flex-direction: row;         // Auf x-Achse (Default)
    flex-direction: row-reverse; // Auf x-Achse rechts nach links
    flex-direction: column;      // Auf y-Achse

    -ms-flex-wrap: wrap;         // IE 10
    flex-wrap: wrap;             // Umbruch wenn nötig

    // Übriger Platz entlang der Hauptachse
    -ms-flex-pack: center;       // IE 10
    justify-content: flex-start; // Elemente am Anfang (Default)
    justify-content: flex-end;   // Elemente am Ende
    justify-content: center;     // Elemente in Mitte
    justify-content: space-around;  // Platz um Elemente
    justify-content: space-between; // Platz zwischen Elemente

    // Übriger Platz entlang der Querachse
    -ms-flex-align: center;      // IE 10
    align-items: flex-start;     // Anfang (default)
    align-items: flex-end;       // Ende
    align-items: stretch;        // Volle Höhe/Breite
    align-items: baseline;       // Gemeinsame Baseline
    align-items: center;         // zentriert    
}
.child {
    order: 1;  // Anzeige-Reihenfolge (Default: Source-Order)

    flex-grow: 0;      // Nicht vergrößern (`basis` ist Maximum)
    flex-grow: 1;      // Vergrößern (Der Wert ist das Gewicht)
    flex-shrink: 1;    // Schrumpfen (Der Wert ist das Gewicht)
    flex-basis: 200px; // Initiale Größe, vor `grow` oder `shrink`
    flex-basis: auto;  // Default

    // Abkürzung für `flex-grow`, `flex-shrink` und `flex-basis`
    // Laut Draft sollte man die Abkürzung verwenden
    -ms-flex: 1 1 auto; // IE 10
    flex: [grow] [shrink] [basis];
    flex: 1 1 auto; // Default

    // align-items für dieses Element überschreiben
    align-self: flex-start; // Anfang (default)
}

Anmerkungen:

CSS grid layout

Flexbox ist 1-dimensional, grid ist 2-dimensional.

Verfügbarkeit:

Siehe:

.container {
    display: grid;

    // Definitiion der Spalten
    grid-template-columns: 1fr 1fr 1fr;

    // Einheit `fr` bedeuted fraction (Also Anteil am übrigen Platz)
    // Beispiel: Spalte 1 hat feste Breite, restlichen Platz bekommen
    //           Spalten 2 (zu 1/3) und 3 (zu 2/3)
    grid-template-columns: 500px 1fr 2fr;

    // repeat, minmax (TODO)
    grid-template-columns: repeat(5, 150px 10px) 150px;
    grid-template-columns: repeat(auto-fill, minmax(200px 1fr));

    // Zeilen werden automatisch angelegt, wenn Items zugewiesen werden.
    grid-template-rows: auto; // Default
    grid-template-rows: 50px 100px; // Für bestimmte Zeilenhöhen

    min-height: 1vh; // Volle Höhe einnehmen (`vh` geht ab IE 9)
}
.child {
    grid-column: 3 / 4; // Start: 3, Ende: 4, also Spalte 3
    grid-row:    2 / 3; // Start: 2, Ende: 3, also Zeile 2
}

Zellen automatisch zuweisen:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto; // Kinder automatisch auf Zellen verteilen
    grid-auto-flow: dense;    // Source-Order darf verletzt werden um leere Zellen zu vermeiden
}
.child {
    grid-column-end: span 2;  // Zwei Spalten belegen
}

Zellen per ASCII-Art aka "Holy Grail Layout" zuweisen (siehe Blog-Artikel):

.header  { grid-area: header; }
.footer  { grid-area: footer; }
.side1   { grid-area: nav; }
.side2   { grid-area: ads; }
.content { grid-area: content; }

.container {
    display: grid;
    grid-template-columns: 300px 20px 1fr 20px 300px;
    grid-template-areas:
        "header header header  header header"
        "nav    ...... content ...... ads"
        "footer footer footer  footer footer";
}

@media screen and (max-width: 600px) {
    .container {
        grid-template-areas: "header"
                             "navigation"
                             "main"
                             "ads"
                             "footer";
        grid-template-columns: 100%;
        grid-template-rows: 100px 
                            50px 
                            1fr
                            50px 
                            30px;
    }
}

Box alignment

Siehe:

.container {
    display: ...; // flex oder grid

    // Box-alignment entlang Hauptachse (bei grid x-Achse)
    justify-content: space-between; // Übrigen Platz zwischen die Items (erstes und letztes Item bleibt am Rand)
    justify-content: space-around;  // Übrigen Platz zwischen um Items (auch vor erstes und nach letztes Item)
    justify-items: stretch;
    justify-items: start;
    justify-items: end;
    justify-items: center;

    // Box-alignment entlang Querachse (bei grid y-Achse)
    align-items: stretch;
    align-items: start;
    align-items: end;
    align-items: center;
}
.child {
    justify-self: ...;  // justify-Regel für einzelnes Item
    align-self: ...;    // align-Regel für einzelnes Item
}

Transitions (Animationen)

transition: left .3s ease, width .3s ease;

transition: left .3s, width .3s;

transition-property: left, width;
transition-duration: .3s;
transition-timing-function: ease;  // ease is default

Browser-Margins und ähnliches resetten

/* Resets the browser margins and similar stuff */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, pre,
a, img, b, u, i, ol, ul, li, form, label, table, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}

/* remember to define focus styles! */
:focus {
 outline: 0;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Alle Elemente außer das letzte Stylen

Quelle: Blog-Artikel

CSS:

.mylistitem:not(:last-of-type) {
  border-bottom: 1px solid #eee;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
}

Text mit drei Punkten abkürzen

Verfügbarkeit: alle Browser

CSS:

.sometext {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Vertikal zentrierter mehrzeiliger Text

Weitere Zentriertechniken siehe Blog-Artikel Centering in CSS: A Complete Guide

HTML:

<div class="box">
  Very long text
</div>

scss / less:

.box {
  display: table-cell;
  vertical-align: middle;
}

Beispiel:

Dies ist ein langer Text, der mehrere Zeilen benötigt. Schön zentriert.

IE-hasLayout-Bug

TODO Info ist von 2007. Ist das noch relevant?

Details siehe: http://onhavinglayout.fwpf-webdesign.de/