WordPress & Webwork - perun.net

CSS Usage ist ein Addon für Mozilla Firefox, welche den Firebug um eine zusätzliche Funktion erweitert. Mit CSS Usage kann man herausfinden welche CSS-Regeln auf einer bestimmten Seite eingesetzt werden.

Nach der Installation bindet sich CSS Usage in Firebug als zusätzlicher Tab ein. Mit Klick auf Scan untersucht man die gerade aufgerufene Seite. Aktiviert man AutoScan dann kann man mehrere Unterseiten der gleichen Website aufrufen und die Erweiterung berücksichtigt dies.

CSS Usage listet alle eingebundenen CSS-Dateien komplett auf. Dabei werden eingesetzte Regeln mit hellgrüner Farbe ausgegeben. Regeln, die auf einer anderen Unterseite eingesetzt wurden sind dunkelgrün und rot sind die Regeln, die gar nicht zum Einsatz kommen.

Wer sich gerne auch bei HTML und CSS mit anderen misst, der sollte mal bei Code Racer vorbeischauen.

Hier kann man live gegen andere Spieler/Coder antreten und sein Wissen bzw. Können rund um HTML und CSS testen. Der Gegner ist also ein anderer Spieler und die Zeit. Und als besondere Gimmicks gibt es für gewonnene Runden auch "Waffen", die einem auf dem Rennen zum Sieg behilflich sein können.

Einfach mal bei Zeiten vorbei schauen.

via @photomatt

Mozilla bietet für die Produkte die auf die Gecko-Engine setzen – wie zum Beispiel Firefox, SeaMonkey, Thunderbird – eine Fülle von browserspezifischen CSS-Eigenschaften, Pseudo-Elementen und Pseudo-Klassen. Eine ausführliche Liste findet man unter Mozilla CSS Extensions.

Eine recht interessante Pseudo-Klasse ist ::-moz-list-bullet. Damit kann man das Aussehen, des Auflistungszeichens per CSS steuern. Hier ein Beispiel:

li::-moz-list-bullet {
    color: #900;
    font-size: 9px;
}

Diese Regel angewendet ergibt folgendes: (weiterlesen…)

Auf Patternify.com kann man ganz einfach und komfortabel Hintergrundgrafiken bzw. Muster (engl. Pattern) erstellen:

Links oben kann man das Muster erstellen oder darunter auf einen Satz vorgefertigter Muster zurückgreifen und die anpassen. Rechts bekommt man das Ergebns in Form einer PNG-Grafik oder als Base64-Code welches man direkt in die CSS-Datei einbinden kann.

Unten rechts kann man mit Klick auf Get Pattern URL kann man den Permalink generieren um später wieder zum gleichen Muster zurückkehren zu können

CSS-Generatoren gibt es sehr viele, aber der Generator auf css3gen.com fällt unter anderem deswegen positiv auf, weil er zum einen ein paar grundlegende Infos bietet. Somit ist das ganze auch für Anfänger verständlich und zum anderen sagt er welche Browser-Versionen die Vendor-Präfixe nicht mehr brauchen:

Den nächsten Link dürfte der eine oder andere schon kennen: (weiterlesen…)

Die CSS-Eigenschaften content, counter-reset und counter-increment sind alte Bekannte, da sie ja zum Umfang von CSS 2.1 gehören … und dieses existiert schon ein paar Jährchen. Auch dieser kurzer Artikel ist nicht der erste seiner Art. Es ist lediglich eine kleine Erweiterung meiner Anleitung, wo es darum geht mit Hilfe eines HTML-Editors Dokumente für den Kindle zu erstellen.

Da man in so einem Fall mit langen HTML-Dokumenten arbeitet, die durch viele Überschriften strukturiert sind, würde es sich anbieten auch die Überschriften durch einen Automatismus zu nummerieren. Sicherlich, das geht auch manuell, aber das ist bei längeren Dokumenten zu einem fehleranfällig und zum anderen nicht sonderlich komfortabel wenn z. B. bei 50 Überschriften eine mittendrin mal wegfallen sollte.

Man stelle sich folgenden Aufbau vor: (weiterlesen…)

Wenn man zentrierte Layouts umsetzt und die Inhalte auf jeweiligen Unterseite zu kurz sind, dann erscheint auf den entsprechenden Seiten auch keine Scrollleiste … logisch. Viele Kunden stört das, weil beim Wechsel zwischen einer langen zu kurzen Seite und umgekehrt die Website "wackelt".

Deswegen wird häufig gewünscht, dass man bei den kurzen Seiten die Scrolleiste erzwingt. Hier eine Methode um dies zu realisieren:

html, body {
    height: 100%; /* Streckt den angezeigten Bereich auf 100% */
}
#container {
    min-height: 100%; /* Mindesthöhe für moderne Browser */
    height: auto !important; /* Für moderne Browser */
    height: 100%; /* "Mindesthöhe" für IE <7 */
}

Gefunden auf CSS Div height: 100%. (weiterlesen…)