Initial-Werte für Css-Eigenschaften

Gelegentlich passiert es, dass mir nicht sofort der Initial-Wert für bestimmte Css-Eigenschaften einfällt. Um in solchen Momenten nicht wild zu raten oder aber versehentlich einen falschen Wert aufzuschreiben (wieso das keine gute Idee ist, schreibt Divya Manian in Safe CSS Defaults), empfiehlt sich ein Blick in diese Liste von Initial-Werten für sehr viele Css-Eigenschaften.

Eine Alternative dazu ist das Projekt CSS Values: Auf der Website gibt man einfach die gewünschte Eigenschaft ein und erhält sowohl eine Liste der möglichen Werte als auch weiterführende Links zu dieser Eigenschaft.

MySQL-Terminal mit Root-Rechten auf Windows 7 ausführen

Ich lege in meiner lokalen Entwicklungsumgebung (Windows 7, XAMPP) für jedes Projekt einen eigenen Datenbank-Nutzer an, der nur Zugriff auf eine projektspezifische Datenbank besitzt. Dazu muss ich folgende Schritte ausführen:

  1. Die Eingabeaufforderung ausführen
  2. Auf Festplattenpartition D:\ wechseln
  3. In das XAMPP-MySQL-Verzeichnis navigieren
  4. Mich als Root-User anmelden
  5. Mein Passwort eingeben

Um diesen Prozess etwas zu optimieren, habe ich eine kleine Batch-Datei geschrieben die mir quasi auf Knopfdruck die ersten vier Schritte abnimmt:

@echo off
d:
cd d:\xampp\mysql\bin
mysql.exe -h localhost -u root -p

Es lebe die Faulheit.

Parameter

@echo off unterdrückt begleitende Ausgabe-Schritte des Scripts im Terminal.

Gut zu wissen

Natürlich wäre es auch möglich, das entsprechende Passwort direkt im Anmeldeprozess zu übergeben und so alle fünf Schritte vom Script erledigen zu lassen:

mysql.exe -h localhost -u root -pPASSWORT

Aber… lieber nicht.

VirtualHosts (Domains/ Subdomains) einrichten mit XAMPP

Beim Bearbeiten verschiedener Projekte kann es aus Gründen der Übersichtlichkeit hilfreich sein diese in der lokalen Entwicklungsumgebung mit verschiedenen Domains bzw. Subdomains aufzurufen. Um dies zu gewährleisten sind zwei Schritte notwendig (bezogen auf die Arbeit mit XAMPP unter Windows).

Anlegen eines VirtualHosts für den Apache-Webserver

Im Ordner [XAMPP-Installationspfad]\xampp\apache\conf\extra liegt die Datei httpd-vhosts.conf. In diese wird folgendes Snippet eingefügt:

# Standard-Localhost-Konfiguration
<VirtualHost *:80>
    DocumentRoot "C:\xampp\htdocs"
    ServerName localhost
</VirtualHost>

# VirtualHost aevo.de
<VirtualHost *:80>
    DocumentRoot "C:\xampp\htdocs\wordpress"
    ServerName aevo.de
    ServerAlias www.aevo.de
</VirtualHost>

Der DocumentRoot verweist auf das Verzeichnis, in dem das entsprechende Projekt liegt. Hier muss also der Dateipfad zum Projektordner eingetragen werden.
Die Domain/ Subdomain unter der das Projekt gefunden werden soll wird bei ServerName eingetragen; im ServerAlias können alternative Adressen eingetragen werden (z.B. die www-Subdomain wie im obigen Beispiel).
Achtung: Der erste Codeblock ist wichtig! Ohne ihn geht die normale Localhost-Konfiguration verloren, das heißt dass sämtliche Aufrufe von Localhost/ 127.0.0.1 dann immer auf den zuletzt definierten Vhost verweisen– und das möchten wir nicht.

Zuordnen der gewünschten Domain/ Subdomain in der hosts-Datei

Im zweiten Schritt muss die hosts-Datei editiert werden, um die gewünschte Domain/ Subdomain auf den Localhost verweisen zu lassen.

# Verweis aevo.de auf localhost
127.0.0.1	aevo.de

Im Anschluss sollte der Apache neu gestartet werden, damit alle Änderungen angewendet werden können.

Einzelne YouTube-Videos automatisch und in Endlosschleife abspielen

Um YouTube-Videos automatisch abzuspielen, genügt es de folgenden Parameter an die Video-Url anzuhängen:

autoplay=1

Zum Wiederholen in Endlosschleife wird folgender Parameter angehängt:

loop=1

Aber Achtung, mittels iframe-eingebettete Videos benötigen zusätzlich noch den playlist-Parameter, da der loop-Parameter nicht hinlänglich unterstützt wird.
Sollte also als Einbettungsmethode das iframe gewählt sein, muss folgendes ergänzt werden:

playlist=[VIDEO-ID]

Dadurch wird eine Playlist gebaut, in der ein und das selbe Video wiederholt wird.

Beispiel

http://www.youtube.com/embed/PpclraSt87U?rel=0&autoplay=1&loop=1&playlist=PpclraSt87U

Links

YouTube Embedded Players and Player Parameters

Sass-Mixin: rem mit px-Fallback

Ich nutze im Css so gut wie ausschließlich rem (siehe dazu auch CSS-Tipp: rem als Einheit für Schriftgröße nutzen) als Einheit und trug das benötigte Pixel-Fallback bisher händisch ein. Mit der Zeit nervt das ziemlich, daher war ich sehr erfreut als ich vor kurzem das rem-Mixin für Sass von Hans Christian Reinl fand. Dieses Mixin berechnet aus einem angegebenen rem-Wert das Pixel-Fallback und fügt es ins Stylesheet ein. Das ist prinzipiell eine tolle Sache, half mir aber noch nicht vollständig weiter, da ich sehr oft Pixel als Einheit genannt bekomme. Daher habe ich das Mixin so modifiziert, dass es Pixelwerte annimmt und in rem umrechnet:

@mixin px-rem($property, $values, $main-font-size: 16) {
	// Empty list for all values in px
	$px-values: ();
	$rem-values: ();

	// Iterate over entries
	@each $value in $values {

		// If the value is zero, return 0
		@if $value == 0 or type_of($value) != number {
			$px-values: append($px-values, $value);
			$rem-values: append($rem-values, $value);

		// If the value is not zero, convert it from px to rem
		} @else {
			$px-values: append($px-values,#{$value}px);
			$rem-values: append($rem-values,($value/$main-font-size)+rem);
		}
	}

	// Return the property and its list of converted values
	#{$property}: #{$px-values};
	#{$property}: #{$rem-values};
}

Aufgerufen wird das Mixin wie folgt:

.selector {
    @include px-rem(font-size, 20);
}

Das Ergebnis sieht so aus:

.selector {
    font-size: 20px;
    font-size: 1.25rem;
}

img-Elemente mit inset box-shadow stylen- ein Workaround

[Editors Note: Es gibt eine Demo box-shadow inset für img-Elemente]

In einem Design, dass ich vor kurzem umsetzen musste, gab es jede Menge Bilder die einen nach innen liegenden Schlagschatten aufwiesen. Einfache Sache, dachte ich mir: Dem img-Element einfach einen box-shadow mit der Eigenschaft inset zuweisen– et voilà, die Sache wäre geritzt.

Simple Lösung, die nur einen Nachteil hat: Sie funktioniert nicht.

Alles fängt damit an, dass nach innen weisende Schatten im Css direkt auf den Hintergrund gezeichnet werden.

In terms of stacking contexts and the painting order, the outer shadows of an element are drawn immediately below the background of that element, and the inner shadows of an element are drawn immediately above the background of that element (below the borders and border image, if any).
CSS Backgrounds and Borders Module Level 3

Etwas problematisch bei img-Elementen, denn wenn das referenzierte Bild nicht transparent ist überlagert es den darunter liegenden Schatten, dieser ist also nicht sichtbar.
Somit war dieser Ansatz gestorben– eine zweite Idee musste her.

Pseudo-Elemente to the rescue!

Der zweite Lösungsvorschlag bestand im Erschaffen eines Pseudo-Elements durch :before oder :after sowie dem anschließenden Zuweisen der box-shadow-Eigenschaft zu diesem Pseudo-Element.

Wieder eine simple Lösung, die nur einen kleinen Nachteil hatte: Auch sie funktionierte nicht.

img-Elemente sind sogenannte replaced elements (Anmerkung: Deutsche Übersetzung nicht bekannt). Und was steht in der Spezifikation zu :before und :after sowie ihrem Zusammenspiel mit replaced elements?

This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
Generated content, automatic numbering, and lists

Mist. Mistmistmist.

Aller guten Dinge sind drei

Einen dritten Ansatz hatte ich noch in petto: Er war nicht ganz so schön, weil zusätzliches Markup von Nöten war, doch theoretisch sollte er funktionieren… Und zwar wollte ich dem Bild ein Container-Element (hier bietet sich natürlich figure an) spendieren, diesem Container ein Pseudo-Element zuweisen und dem Pseudo-Element die box-shadow-Eigenschaft verpassen.

Trommelwirbel.

Was soll ich sagen: Es funktionierte. Sogar auf verschiedene Weise: Einmal mit box-shadow und einmal mit einem Css3-Verlauf. Ich habe eine Demo erstellt, wo Markup und Styles nachvollzogen werden können: box-shadow inset für img-Elemente.
Wieder was gelernt.

Lesetipp: Magic Numbers in CSS

Als Nicht-Informatiker kannte ich den Begriff der magischen Zahl bisher nicht, wohl aber das Problem: Bestimmte Zahlenwerte, die nur in Browser A mit Schriftgröße B, Schriftart C und Zoomstufe D funktionieren. Sei es top: 42px;, um ein Flyout-Menü haargenau unterhalb des Schriftzuges seines Elternelements zu positionieren oder auch letter-spacing: -4px; zum Umgehen des Abstandes zwischen Elementen mit der Anzeige-Eigenschaft inline-block– beides funktioniert nur unter bestimmten Voraussetzungen, die nicht als gegeben betrachtet werden dürfen. In Magic Numbers in CSS erklärt Chris Coyier dieses Phänomen und regt zu größerer Bedachtsamkeit beim Umgang bzw. bei der Vermeidung solcher Werte an.

Pixelmaße der fixen Bootstrap-Rastereinheiten in den verschiedenen Viewportgrößen

Die folgenden Werte beziehen sich auf das responsive default grid in Bootstrap (Version 2.3.1)

Bis 767px Viewportbreite

  • Linearisierte Darstellung
  • Body: jeweils 20px Abstand zu beiden Seiten
  • Seite ist fluid

Ab 768 – 979px Viewportbreite

  • Seitenbreite: 724px
  • Abstand zwischen Grid-Units: 20px

Grid

Gridunit Pixelbreite
1/12 42px
2/12 104px
3/12 166px
4/12 228px
5/12 290px
6/12 352px
7/12 414px
8/12 476px
9/12 538px
10/12 600px
11/12 662px
12/12 724px

„Pixelmaße der fixen Bootstrap-Rastereinheiten in den verschiedenen Viewportgrößen“ weiterlesen

Animierte Gif-Dateien automatisch im Internet Explorer abspielen

Dialogfenster erweiterte Internetoptionen im Internet ExplorerAuf manche Sachen kommt man einfach nicht: Im Internet Explorer gibt es in den erweiterten Internetoptionen die Möglichkeit, Animationen in Webseiten zu deaktivieren. Prinzipiell nicht schlecht, allerdings zählen dazu auch animierte Gif-Dateien. Wenn das entsprechende Häkchen also nicht gesetzt ist, kann es durchaus vorkommen dass nur das erste Frame des Gifs angezeigt wird, danach Feierabend ist und die weiteren Frames nicht dargestellt werden. Wenn das Gif also überall abgespielt wird, nur im Internet Explorer nicht: Ein Blick in die erweiterten Internetoptionen kann helfen.