Beim Programmieren der Website der Fotografin Susanna Drescher habe ich einige CSS Klassen geschrieben die auch ganz nützlich sein könnten bei anderen Websites. Deshalb hier eine kleine Zusammenstellung dieser Styleangaben. Die Klassen bauen auf Bootstrap auf und erweitern das Framework um einige praktische Funktionen.
.animate, .animate:after, .animate:before,
.animate-all, .animate-all:after, .animate-all:before,
.animate-all *, .animate-all *:after, .animate-all *:before {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.animate-off, .animate-off:after, .animate-off:before,
.animate-all-off, .animate-all-off:after, .animate-all-off:before,
.animate-all-off *, .animate-all-off *:after, .animate-all-off *:before {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
.animate-200ms, .animate-fast {
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
-o-transition-duration: .2s;
transition-duration: .2s;
}
.animate-800ms, .animate-long {
-webkit-transition-duration: .8s;
-moz-transition-duration: .8s;
-o-transition-duration: .8s;
transition-duration: .8s;
}Mit diesen Klassen lassen sich sehr komfortabel Animationen für HTML-Elemente erstellen. Bei Bedarf kann auch ein einzelnes Element von den Animationen ausgeschlossen werden, oder es können auch alle Child-Elemente automatisch animiert werden. Das ist z.B. nützlich, um mit CSS die Farbe von Links zu verändern wenn man mit der Maus darüber fährt. Es könnte z.B. praktisch sein, standardmässig alle Elemente zu animieren in dem man dem <body>-Tag die Klasse animate-all mitgibt. Elemente innerhalb des animierten Elements können mit animate-off oder animate-all-off deaktiviert werden. Zusätzlich können Klassen mitgegeben werden die die Dauer der Animation verändern (z.B.: .animate-200ms).
<body class="animate-all animate-800ms">
<style> a:hover { background-color: red; } </style>
<a href="#0">Dieser Link wird beim überfahren in 800ms rot</a>
<a href="#0" class="animate-off">Dieser Link wird beim überfahren sofort rot</a>
</body>Als ebenfalls sehr nützliches Hilfsmittel haben sich .buffer Klassen erwiesen. Ich habe nach einer Möglichkeit gesucht auf unterschiedlichen Geräten – bzw. Bildschirmgrössen – unterschiedlich viel Rand oberhalb und unterhalb eines Elements anzuzeigen, ohne dabei CSS Media Queries verwenden zu müssen.
.buffer-50px {
height: 50px;
}
.buffer-20px {
height: 20px;
}Im HTML Code lassen sich die Klassen dann so verwenden, dass mehrere Buffer-Elemente im DOM vorhanden sind, aber je nach Bildschirmgrösse nur eine bestimmt Anzahl davon angezeigt wird. Auch wenn es semantisch bestimmt nicht ganz korrekt ist, solche <div>s ausschliesslich fürs Layout in den Quelltext zu geben ist es für mich trotzdem eine praktische schnelle Lösung.
<style> h1 { padding: 20px 0; } /* Minimalabstand zum oberen und unteren Element (xs) */ </style>
<div class="buffer-20px visible-lg"></div>
<div class="buffer-20px visible-lg visible-md"></div>
<div class="buffer-20px visible-lg visible-md visible-sm"></div>
<h1>Titel der Website</h1>
<div class="buffer-20px visible-lg visible-md visible-sm"></div>
<div class="buffer-20px visible-lg visible-md"></div>
<div class="buffer-20px visible-lg"></div>Besonders wichtig bei der Website von Susanna Drescher war der Einsatz von Bootstraps .embed-responsive-Klassen. Damit ist es möglich sicherzustellen, dass ein iframe, embed, object oder andere Elemente mit der Klasse .embed-responsive-item immer ein bestimmtes Seitenverhältnis haben. Z.B. damit eingebettete Videos von Youtube immer im Format 16:9 erscheinen und nicht auf Handys z.B. 500px Hoch sind, aber nur ganz schmal, weil das Display so klein ist. Leider sind nur die Formate 16:9 und 4:3 in Bootstrap integriert, deshalb hier ein ganz simpler Code um die Formate 3:2 und ein ein Quadrat (1:1) zu unterstützen.
.embed-responsive-3by2 {
padding-bottom: 66.666666667%;
}
.embed-responsive-1by1 {
padding-bottom: 100%;
}Das Einsetzten dieser .embed-responsive-Klassen ist wirklich ein sehr praktisches Hilfsmittel, dass ich allen ans Herz legen möchte, die eine Website für verschieden grosse Bildschirme programmieren und dabei immer ein optimales Seitenverhältnis von Videos oder Fotos unterstützen wollen.
Auf Susanna Dreschers Website gibt es in der Galerie eine Übersicht mit allen Fotos aus einem Album. Wenn es viele Fotos in einem Album gibt kann es dort zu einem Scrollbalken kommen, was in CSS mit overflow-x: hidden; overflow-y: auto; angegeben wurde. Auf iOS Geräten verlieren DOM Elemente bei denen das Scrollen per overflow festgelegt wurde leider das von diesen Geräten gewohnte «Smooth Scrolling». Es gibt aber die die Möglichkeit das Momentum Scrolling mit folgendem CSS Code (Quelle: CSS-Tricks) wieder zu aktivieren:
.momentum-scrolling {
overflow-y: auto;
}
.momentum-scrolling.active {
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}Ich habe mich entschieden das Momentum Scrolling nur zu aktivieren, wenn zusätzlich die CSS-Klasse .acitve mitgegeben wurde, denn -webkit-overflow-scrolling: touch; funktioniert nur, wenn die Property overflow-y: scroll; gesetzt wurde. Ich habe mich deshalb entschieden, per JavaScript (jQuery) nachträglich die Klasse .active mitzugeben – aber nur bei Touch-Geräten – und standardmässig aber die Property overflow-y: auto; greifen zu lassen. Damit wird verhindert, dass ein Scrollbalken zu sehen ist wenn er nicht benötigt wird, was bei Mac OS X zwar nicht relevant ist, weil die Scrollbalken nicht mehr angezeigt werden, auf anderen Plattformen aber lästig und unschön aussehen könnte.
function isTouch() {
return !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch);
}
if(isTouch()) {
$('.momentum-scrolling').addClass('active');
}Eine wichtige Information dazu ist noch, dass sich mit -webkit-overflow-scrolling leider nicht die x- und y-Achsen einzeln bestimmen lassen. Man ist als darauf angewiesen selbst sicherzustellen, dass z.B. bei der x-Achse nie ein Scrollbalken entstehen kann.