Weiches Scrollen bei overflow: auto auf iOS Geräten

Unter iOS haben Container mit einem overflow: auto; per default ein sehr hartes direktes Scrollen, welches sich lediglich synchron zum Wischen bewegt. Dieses Verhalten kann mittels
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
optimiert werden. Dieses Verhalten wird auch 'Momentum Scrolling' genannt. Hiermit wird das Weiterlaufen bei einem Wischen (swipe) bis zum langsamen Auslaufen aktiviert und wirkt wesentlich weicher.

Pure CSS Off-Canvas Navigation

Mit Hilfe des CSS3 Selektor :target lässt sich eine Off-Canvas Navigation mit reinem CSS, komplett ohne Javascript realisieren. Einziges Manko: Funktional wird es zwar ab dem Internet Explorer 9, die Animationen jedoch erst ab Internet Explorer 10 unterstützt.

Beschreibung

Im Grundzustand wird die Navigation mit dem negativen Wert der eigenen Breite aus dem Sichtbereich des Browsers geschoben.

CSS3: Selector :target

Der CSS3 Selector :target hat ein paar interessante use cases. Einer ist, dass man Ankerziele hervorhebt. (http://labs.jooon.de/css/selectors/target/) Das :target macht nichts anderes als zu checken, ob die URL ein Hashwert enthält und dazu ein passende ID existiert. mit dem :target wird dann das entsprechende Element angesprochen. :target dient also als eine Art "dynamischer" Selector für IDs. Neben dem Hervorheben von Anchorlinks gibt es noch weitere spannende Anwendungsmöglichkeiten. So ist es beispielsweise möglich Elemente rein durch CSS und HTML ein und auszublenden, ohne dass sie direkt verbunden sind.

Mehrere Spalten mit gleicher Höhe mittels display: table und table-cell

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Layout with table / table-cell</title>
<style type="text/css">
#wrapper {
display: table;
}

aside, section {
display: table-cell;
}

aside {
width: 25%;
}

section {
width: 75%;
}
</style>
</head>
<body>
<div id="wrapper">
<section>

CSS-Sprites und -webkit-transition

CSS-Sprites sind eine Möglichkeit mittels CSS Grafiken für eine Website oder einzelne Elemente in einer einzelnen Grafik zu steuern. So können die verschiedenen Status mittels background-position positioniert werden. Dies hat den Vorteil, dass Javascript nur eine Anfrage an den Server sendet und so die Geschwindigkeit maximiert und (die Serverlast minimiert) wird. Dies ist vor allem für große Websites mit großen Traficaufkommen von Bedeutung.

Zusätzliche CSS Dateien in Drupal einbinden

Um in Drupal 6 weitere CSS-Dateien über das Theme einzubinden, muss lediglich die [themename].info des entsprechenden Themes angepasst werden.

[themename].info

stylesheets[all][] = reset.css
stylesheets[all][] = style.css

Komplettes Beispiel

name = example-theme
description = Test Theme for Drupal 6
core = 6.x
engine = phptemplate

stylesheets[all][] = reset.css
stylesheets[all][] = style.css

CSS Frameworks

Auf Hidden Pixels wurde eine Sammlung von CSS Frameworks zusammen gestellt. Sie sagen auch wunderbar in einem Satz, was CSS Frameworks sind. "A framework is a basic conceptual structure which you can use in your web-projects." Ich kann es nicht besser ausdrücken. Weiter zu der Sammlung

Seiten