WordPress & Webwork » css

CSS Usage: welche CSS-Regeln sind im Einsatz?

Vladimir — Fri, 20 Jan 2012 13:08:44 +0000

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 ist der schnellste Coder?

Sahanya — Wed, 18 Jan 2012 17:13:49 +0000

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

CSS: browserspezifische Eigenschaften, Pseudo-Elemente und Pseudo-Klassen von Mozilla

Vladimir — Mon, 02 Jan 2012 12:30:30 +0000

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:

Links im Bild ist das normale Aussehen der Liste aus dem Artikel DokuWiki installieren und rechts im Bild ist die Liste nach dem man die CSS-Regel eingebaut hat. Nach dem gleichen Prinzip kann man auch das Aussehen der nummerierten Liste mit Hilfe der Pseudo-Klasse ::-moz-list-number beeinflussen.

Einen Überblick, allerdings nur bei den Eigenschaften, über die browserspezifischen Angaben liefert Vendor-prefixed CSS Property Overview. Neben Gecko (Mozilla) werden dort WebKit (Chrome, Safari), Presto (Opera) und Trident (IE) berücksichtigt.

Patternify: ganz einfach Hintergrundgrafiken erstellen

Vladimir — Thu, 22 Dec 2011 20:12:41 +0000

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-Links: Generator, Buttons, 100% vs. auto

Vladimir — Sun, 11 Dec 2011 13:11:27 +0000

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:

Bei Button Maker kann man Buttons erstellen, die nur HTML und CSS3 benötigen. Die Erstellung mit dem Generator ist kinderleicht.

In einem Artikel erklärt Roger Johansson den Unterschied bzw. die Auswirkungen von width: auto; und width: 100%;

Damit das ganze nicht trocken bleibt, gibt es auch einen Link zu einem Beispiel.

CSS: automatische Nummerierung von Überschriften

Vladimir — Wed, 07 Dec 2011 13:47:14 +0000

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:

Buchtitel
Kapitel
Abschnitt
Abschnitt
Kapitel

Das passende CSS dazu würde folgendermaßen aussehen:

body {counter-reset: ebene1;}

h1:before {
    content: counter(ebene1) " ";
    counter-increment: ebene1;}
h1 {counter-reset: ebene2;}

h2:before {
    content: counter(ebene1) "." counter(ebene2) " ";
    counter-increment: ebene2;}
h2 {counter-reset: ebene3;}

h3:before {
    content: counter(ebene1) "." counter(ebene2) "." counter(ebene3) " ";
    counter-increment: ebene3;}

Als Ergebnis bekommt man dann folgendes:

Siehe auch die Demo-Datei.

Erklärung des Codes

Zuerst wird im body der Counter (ebene1) auf 1 gesetzt. Anschließend wird mit dem Pseudoelement :before jeder Überschrift erster Ordnung eine Nummer verpasst, die um eins steigt (counter-increment). Anschließend wird beim jeden Vorkommen von h1 der Counter für die zweite Ebene zurückgesetzt, damit wir das gewünschte 1, 1.1, 1.2, 2, 2.1, 2.2 erreichen und nicht 1, 1.1, 1.1, 2, 2.1, 2.1 bekommen.

Um bei den Zählern Punkte, Leerzeichen und andere Zeichenketten einzufügen muss man Sie in "Anführungszeichen" verpacken: "." für ein Punkt und " " für ein Leerzeichen.

Wem die Dezimalzahlen nicht reichen, der kann auch auf andere Zählweisen ausweichen:

content: counter(ebene1, upper-roman) " ";

Mit upper-roman wird in großen römischen Zahlen gezählt. Unterstützt werden die Zählweisen, die man auch von den Listen her kennt.

Unterstützt wird die automatische Nummerierung von allen modernen Browsern und diesmal ist sogar auch der Internet Explorer 8 mit von der Partie.

Weiterführende Links

CSS: jede Unterseite auf 100% Höhe

Vladimir — Wed, 23 Nov 2011 14:52:35 +0000

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%.

Zuerst streckt man sowohl body als auch html, den Hauptknoten im Dokumentbaum, auf 100%. Anschließend vergibt man ein Mindesthöhe von 100% und weist der Höhe an sich einen automatischen Wert zu. Da aber der Internet Explorer 6 und kleiner nichts mit der Eigenschaft min-height anfangen können wird denen height: 100%; ... da die ja die Angaben zu Höhe als "Mindesthöhe" interpretieren.

Das obere Code-Beispiel war noch um die CSS-Deklaration overflow: hidden !important; reicher. Diese Deklaration bewirkte bei Firefox, dass der div-Kontainer, wenn er über den Anzeigenbereich hinausgeht, sich auch bis zum Bildschirmende ausbreitet. Ich konnte bei Firefox 8 keinen Unterschied feststellen mit und ohne diese Deklaration.

CSS3: Infos und Auflistung über aktive Mediaqueries

Vladimir — Mon, 07 Nov 2011 12:34:25 +0000

Drüben bei Jens entdeckte ich ein nettes Tool für CSS-Entwickler auf CSS Media Queries.com:

Dort werden eine Reihe von Mediaqueries samt Erklärungen aufgelistet und die aktiven bzw. für dein System passenden hervorgehoben. In meinem Fall wären dies:

@media only screen and (min-width : 1224px)
@media screen

Schalte ich die Sidebar in meinem Firefox aus, dann kommt folgendes Mediaquery hinzu:

@media only screen and (min-width : 1824px)

Humor mit CSS

Vladimir — Tue, 04 Oct 2011 11:31:02 +0000

Das auch Webworker Humor haben, beweist die Seite CSS Humor.com. Dort werden witzige Sachen in den CSS-Code integriert. Wie man unschwer erkennen kann, hat der schwarze, makabere und bissige Humor einen wichtigen Stellenwert. Hier ein paar Beispiele:

.elvispresley {visibility: hidden; position: top;}

Es gibt einige Beispiele die sich mit Michael Jackson beschäftigen, zum Beispiel:

.michael.jackson {background-color: black;}
.michael-jackson {color: white !important;}

Aber auch andere Berühmtheiten werden "berücksichtigt":

#justin_bieber .talent {display: none;}
.JohnLennon {widows: 1;}
#william_shatner {pause-after: 100ms;}
.danny.devito {max-height: 0; width: 100%;}

Viel Spaß beim Stöbern.

CSS3: Mehrspaltiger Text

Vladimir — Tue, 27 Sep 2011 17:13:51 +0000

Eine einfache Möglichkeit um mehrspaltige Artikel zu erstellen, wie man sie aus den Zeitschriften kennt, wünschen sich einige Webworker schon seit langer Zeit. In der Vergangenheit war das nur mit diversen Tricks oder manuell möglich. Entweder hat man auf Javascript-Lösungen zurückgegriffen, wie zum Beispiel Columnizer jQuery Plugin oder man hat die Spalten selber definiert, mit floats gearbeitet und manuell die Texte auf die jeweiligen Spalten verteilt.

Mit dem CSS Multi-column Layout Module von W3C gibt es seit einiger Zeit den Ansatz, dass Browser die mehrspaltigen Inhalte unterstützen sollen. Hier ein Beispiel:

Ich bin der Text in der ersten Spalte… Lorem Ipsum und hast du nicht gesehen.

Ich bin der Text in der zweiten Spalte… Lorem Ipsum und hast du nicht gesehen.

Hier der entsprechende Code:

div {
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-rule: 1px dotted #999;
-webkit-column-rule: 1px solid #999;
column-rule: 1px solid #999;
border: 1px solid #ddd;
padding: .5em;
}

Das ganze wird von Firefox (bzw. aktuellen Geckos), Google Chrome, Opera und dem Internet Explorer 10 unterstützt. Unter Create Columns Easily With The CSS3 Multi-Column Layout Module gibt es einen sehr ausführlichen Artikel zu diesem Thema und dort werden auch unter weiterführenden Links Javascript-Lösungen vorgestellt.

WordPress und Mehrspaltigkeit

Auf 6 Ways to Display WordPress Post Content in Multiple Columns werden Lösungen vorgestellt, wie man auch in WordPress mehrspaltiger Artikel realisieren kann.

Auf Texto.de wird eine einfache Lösung vorgestellt, wie man mit eigener Funktion und Shortcodes manuell Spalten generieren kann.

Links zu dem Thema

Links: WordPress, Google+, Editoren, CSS3, Chrome

Vladimir — Wed, 21 Sep 2011 11:41:50 +0000

Ich muss mich mal ein paar Browser-Tabs entledigen, die ich vom Browserstart zum Browserstart, teilweise seit Wochen mit mir herumschleppe:

Auf Theme Code Matters, Too gibt es einen interessanten und ausführlichen Artikel für Entwickler von WordPress-Themes. Es wird u.a. die Code-Qualität und Standard-Techniken angesprochen.

Es dürfte sich mittlerweile herumgesprochen haben, dass Google+ seine Pforten für alle geöffnet hat. Wer darüber und die aktuellen Neuerungen in Google+ lesen möchte, einfach hier vorbei schauen:

Drüben bei Guido gibt es eine kleine Auflistung nützlicher Erweiterungen für den Code-Editor Notepad++. Der Besuch bei ihm erinnerte mich, dass ich Anleitung für die schicken CSS-Buttons:

seit mehr als zwei Wochen in den offenen Tabs herumschleppe. Die Anleitung ist ausführlich und das ganze kann man sich im Demo-Bereich anschauen.

Auf Entwickler.com werden 10 Quellen aufgelistet, die wiederum jeweils zwischen 8 bis 32 Erweiterungen für Google Chrome auflisten, die dem Webworker bei der Arbeit helfen.

Mit HTML-Editor Dokumente und E-Books für Amazon Kindle erstellen (2)

Vladimir — Mon, 05 Sep 2011 13:05:34 +0000

Nach dem du im ersten Teil dieser Artikelserie die Entwicklungs- und Testumgebung eingerichtet und dich mit ihr vertraut hast, geht es nun darum das erste Kindle-Dokument zu erstellen.

Erstelle eine leere HTML-Datei und füge dort ein Grundgerüst ein:





  Titel deines E-Books

Ich persönlich habe im konkreten Fall mit XHTML 1.0 transitional gearbeitet. Du kannst mit der strict-Variante arbeiten, auf HTML 4 oder 5 ausweichen oder komplett auf den Doctype verzichten. Ich habe mich dennoch für einen Doctype entschieden, man muss sich ja nicht unnötigerweise eine Fehlerquelle verschaffen, auch wenn sie nur hypothetischer Natur sein könnte.

Hinweis an Einsteiger: Im head bzw. in den meta-Angaben bestimmt man den Zeichensatz und gibt den Namen des Autors bzw. der Autoren an. Wenn man Dokumente für Kindle produziert sollte man wie auch sonst darauf achten, dass die meta-Angaben zum Zeichensatz und die Einstellung wie die Dateien beim abspeichern codiert werden übereinstimmen. Wenn du mit dem westeuropäischen Zeichensatz (iso-8859-1) arbeitest, dann musst du deine Dateien auch entsprechend abspeichern: als ANSI. Wenn du mit utf-8 arbeitest, dann musst du deine Dateien auch als utf8 abspeichern, da es sonst zu Konflikten kommt.

Der erste Inhalt

Nun hast du die HTML-Datei mit Grundgerüst erstellt und jetzt geht es darum, den ersten Inhalt einzufügen. im PDF-Dokument Amazon Kindle Publishing Guidelines (pdf, 1,84 mbyte) kannst du auf den Seiten 32 und 33 sehen welche HTML-Elemente unterstützt werden. Viele HTML-Elemente werden nicht unterstützt und die, die unterstützt werden dann auch nicht immer im vollen Umfang.

Aber wie ich schon im vorherigen Artikel erwähnt, ist die Unterstützung ausreichend um ein Buch zu produzieren. Immerhin sind die wichtigen Elemente um ein Text auszuzeichnen – Überschriften, Absatz, Listen, Zitat und Tabellen – und den Inhalt mit zusätzlichen Inhalten anzureichern (Bilder, Video und Audio) vorhanden.

Hier eine HTML-Datei. Ich weiß, der Inhalt ist nicht sonderlich geistreich, aber der Inhalt ist momentan nebensächlich:




  Wir testen das Kindle-Format

  
  


Die erste Überschrift

Nun zwei Absätze. Swine ribeye shoulder shankle tongue. Kielbasa rump salami shankle. Meatball meatloaf ham, shankle rump.
Zweiter Absatz: Beef ribs turducken pastrami ham hock, pork chop shank turkey sirloin pancetta shankle ham cow rump strip steak fatback.

Ich bin ein Zitat und hier steht bestimmt irgendetwas ganz schlaues.

Die zweite Überschrift

Hier follgen zwei Listen. Zuerst eine Aufzählung und dann eine nummerierte Liste:

    Butter
    Mehl
    Eier


    Gold
    Silber
    Bronze

Hier ein absatz mit ein paar unmaskierten Umlauten und Sonderzeichen: Ää Öö Üü ß und jetzt ein paar diakritische Zeichen Ćć Čč Šš.

Speichere diese Datei ab. Übrigen, am Ende des Artikels gibt es ein zip-Paket mit den ganzen Code-Beispielen. Rufe nun die Kommandozeile auf. In Windows einfach auf die Windows-Taste drücken und in den Suchschlitz cmd eingeben und Enter drücken.

Gehe in den Ordner wo sich deine kindlegen.exe befindet und rufe dort dann die HTML-Datei auf. Damit ich nicht lange Pfadangaben eintippen muss habe ich einfach die HTML-Datei innerhalb des KindleGen-Ordners abgelegt. Daher muss ich nur folgenden Aufruf starten: kindlegen name-der-html-datei.html. Siehe auch die letzte Zeile im folgenden Screenshot:

KindleGen im Einsatz

KindleGen liefert Informationen und gibt Warnungen aus wenn etwas fehlen sollte. Im Moment ist das lediglich das Buch-Cover, aber diesem Thema werden wir uns im letzten Teil der Artikelserie widmen. Nun rufst du mit dem KindlePreviewer die neu generierte mobi-Datei auf:

Herzlichen Glückwunsch, du hast gerade dein erstes Dokument für Amazon Kindle erstellt. Sieht so weit gut aus, aber mir haben auf Anhieb ein paar Sachen nicht gefallen. Ich mag die eingerückten Absätze nicht und zudem finde ich einige Abstände zu eng, daher habe ich mir folgende CSS-Regeln für Kindle-Dokumente erstellt:

h1 {font-size: 1.5em; margin-bottom: 1em;}
h2 {font-size: 1.375em; margin: 1.25em 0 0.25em 0;}
h3 {font-size: 1.25em; margin: 1.25em 0 0.25em 0;}
h4 {font-size: 1.125em; margin: 1.25em 0 0.25em 0;}
h5 {font-size: 1em; font-weight: bold; margin: 1.25em 0 0.25em 0;}
h6 {font-size: 1.375em; font-weight: bold; margin: 1.25em 0 0.25em 0;}
table {margin-top: 0.75em;}
p {margin: .125em 0 .5em 0; text-indent: 0;}
ul, ol, blockquote, pre, dl, hr {margin-top: .125em; margin-bottom: .5em;}
.inhaltsverzeichnis ul {list-style: none; padding-left: 0; margin-left: 20px;}

Wenn man diese CSS-Datei verlinkt und dann die mobi-Datei neu generiert, dann schaut das Dokument so aus:

Ich persönlich finde das so übersichtlicher und leserlicher. Aber das ist natürlich Geschmackssache. Das war der zweite Teil der Artikelserie. Im nächsten Teil wird es darum gehen, wie man ein Inhaltsverzeichnis erstellt und wie man Seitenumbrüche realisiert. Und im vierten Teil wirst du lernen wie man in das E-Book das Cover einbindet und Sektionen definiert.

Link und Download:

Amazon Kindle Publishing Guidelines (pdf, 1,84 mbyte)
Download der Code-Beispiele und der Gerüstdateien (Kindle) (zip, 3,3 kbyte)

Mit HTML-Editor Dokumente und E-Books für Amazon Kindle erstellen (1)

Vladimir — Sun, 04 Sep 2011 15:26:53 +0000

Wie ich es bereits im Artikel Amazon Kindle: unser erstes WordPress-E-Book versprochen habe werde ich hier auf perun.net beschreiben, wie man lediglich mit einem Text- bzw. HTML-Editor Dokumente und E-Books für Amazon Kindle erstellt.

Doch bevor du loslegst musst du ein paar Vorbereitungen treffen und die Entwicklungsumgebung einrichten.

Die Vorbereitung

Um Dokumente und E-Books für Kindle zu erstellen benötigt man keine teure Entwicklungsumgebung … im Grunde genommen muss man kein Cent extra Geld ausgeben, wenn man es nicht möchte.

Folgende Komponenten sind notwendig:

Ein guter Code- bzw. HTML-Editor
KindleGen: ein kostenloses Kommandozeilen-Tool von Amazon
KindlePreviewer: ein kostenloses Vorschau-Tool von Amazon
Gegebenenfalls: ein Screenshot-Tool bzw. Tool um Grafiken zu bearbeiten. Kostenlose Programme sind ebenfalls vorhanden.

Ich persönlich nutze seit Jahren WeBuilder als HTML-Editor, aber man kann ohne Probleme auch mit kostenlosen Editoren, wie zum Beispiel PSPad arbeiten.

Die Vorgehensweise ist einfach. Im HTML-Editor erstellt man das Dokument. Mit dem KindleGen von Amazon wandelt man das HTML-Dokument in Mobipocket-Format um und mit KindlePreviewer kann man das Dokument so anzeigen lassen, wie es auf einem Amazon Kindle ausschauen wird.

Mobipocket (.mobi) ist das Format der gleichnamigen Firma aus Frankreich und es handelt sich hierbei um ein Tochterunternehmen von Amazon.com. Daraus resultiert, dass Amazon Kindle dieses Format nicht nur unterstützt, sondern dass das eigene Format (.azw) auf Mobipocket basiert und laut Wikipedia (en) sind die Unterschiede zwischen den beiden Formaten marginal oder besser gesagt für uns uninteressant.

Sowohl KindleGen wie auch KindlePreviewer sind kostenlos und es gibt sie für Windows und Mac. KindleGen existiert auch in einer Version für Linux, KindlePreviewer leider nicht. Herunterladen kann man beide Tools auf Kindle Publishing Programs.

KindleGen im Einsatz

Einrichtung der Umgebung

Ich geh jetzt davon aus, dass du einen Code-Editor und ein Grafikprogramm bereits installiert, eingerichtet und angepasst hast.

Bei KindleGen muss man nichts installieren, man muss lediglich Das Paket dort entpacken bzw. entzippen wo man es auf der Festplatte haben möchte. Um das Programm zu starten muss man die Kommandozeile (aka DOS-Box, aka Eingabaufforderung etc.) starten und dort geht man mit Angabe des Laufwerks, z. B. d: und des Befehls cd – z. B. cd Meine-Programme\Kindlegen – in den Ordner rein wo sich die kindlegen.exe befindet.

Von hier aus wird man dann später die Buch-Datei aufrufen um sie umzuwandeln. Die Vorgehensweise bei Linux und Mac ist nahezu identisch.

Der KindlePreviewer wird "normal" installiert und die generierte Mobipocket-Datei kann man dann u.a. mit einem Rechtsklick in KindlePrevier öffnen oder man öffnet die Anwendung und geht dann den "klassischen" Weg über File → Open Book oder man schiebt einfach aus dem Explorer die .mobi-Datei in den Previewer rein.

Auch wenn man selber einen Amazon Kindle hat, so empfiehlt es sich denn dennoch das Vorschau-Tool zu installieren. Es ist viel komfortabler die Software aufzurufen als bei jeder kleiner Änderung die Datei an den Kindle zu schicken.

Hinweis: wenn du auf dem Rechner die Kindle-App installiert hast, dann kannst du die Mobipocket-Datei auch dort anschauen.

Die nächsten Schritte

Nach dem du dir jetzt Entwicklungsumgebung eingerichtet und dich mit der vertraut gemacht hast, wird es im nächsten Artikel darum gehen, wie man aus einer HTML-Datei ein Kindle-Dokument erstellt und die grundlegenden CSS-Regeln individualisiert.

Noch ein Tipp an die jüngeren Kollegen. vergesst bitte HTML5 und CSS3 und versucht euch an HTML 4 oder XHTML 1.0 und CSS 1 zu erinnern. Ältere Kollegen sollten sich einfach in die Zeit 1998-2002 zurückversetzen. Das ganze ist ein bisschen scherzhaft gemeint. Der HTML- und CSS-Umfang ist sehr beschränkt, aber das ist OK und völlig ausreichend: wir wollen hier Bücher und keine dynamische Webportale produzieren.

Ich gehe davon aus, dass dieser zweite Artikel in ein bis zwei Tagen online gehen soll. Der dritte Artikel, der dann Mitte nächster Woche erscheinen sollte wird sich damit beschäftigen wie man ein einfaches Inhaltsverzeichnis erstellt und Seitenumbrüche einfügt.

Im vierten und letzten Teil der Artikelserie wirst du lernen wie man mit Hilfe einer xml-Datei mit mehreren HTML-Dateien arbeitet, das Buch-Cover integriert und Sektionen erstellt.

Nach der Lektüre dieser vier Artikel sollte jeder, der keine Angst vor dem Text-Editor hat, in der Lage sein ein komplettes und vollständiges Buch für Kindle zu erstellen.

Ich weiß, es existieren diverse Tools, die das problemlose Umwandeln von z. B. Word oder PDF in Kindle versprechen. Leider bleibt es sehr häufig bei dem Versprechen und zudem ist die Methode, die ich beschreibe, die "sauberste" und produziert die kleinsten Dateigrößen. Wer jetzt nicht weiß, was ich mit sauber meine, der kann sich gerne anschauen was Word produziert, wenn man ein Dokument als HTML abspeichert.

Die Dateigröße des E-Books ist deswegen wichtig, weil man als Autor den Download-Traffic der E-Books – wenn man sie auf Amazon veröffentlicht – bezahlt und zwar mit 12 Eurocent pro angefangenem Megabyte und zwar pro Verkauf.

Validierung, CSS3 vs. Photoshop, responsive Webdesign

Vladimir — Sat, 03 Sep 2011 11:25:56 +0000

Zur Abwechslung gibt es mal wieder drei Links zu CSS3:

Wie man den CSS-Validator so einstellt, dass zumindest die Vendor-Präfixe nicht als Fehler angekreidet werden.
Im Artikel CSS3 vs Photoshop: Transforms werden die Fähigkeiten von CSS3 und Photoshop in Bezug auf Transformationen (Rotation, Skalierung etc.) vergliechen.
Unter dem Beitrag The ultimate responsive web design roundup verbirgt sich eine sehr lange Auflistung zu Quellen, die sich mit dem Thema responsive Webdesign (an das Ausgabegerät anpassen) beschäftigen.

Viel Spaß beim Lesen.

CSS-Hack für Opera 11

Vladimir — Fri, 26 Aug 2011 08:41:00 +0000

Ich hatte gestern Abend ein Problem mit Opera 11. In allen anderen Browsern (Firefox, Chrome, dem Internet Explorer) habe ich es geschafft einen Bereich vertikal zu zentrieren, kein Problem.

Einzig Opera weigerte sich und verfrachtete das Element nach oben. Um mir die Zeit zu verschaffen mich mit dem Problem tiefer gehend zu befassen habe ich mich für einen CSS-Hack entschieden. Einige der älteren Hacks, wie zum Beispiel das einbinden einer opera.css funktionierten bei meiner Installation nicht, aber folgender Hack tut seinen Dienst:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
       /* Hier kommen dann die abweichenden Regeln */
 }

Gefunden bei stackoverflow.com.

Dem CSS-Hack traue ich nur bedingt, aber als schnelle Übergangslösung geht es in Ordnung. Jetzt geht es darum herauszufinden warum sich Opera bei der vertikalen Zentrierung über line-height so störrisch angestellt hat.

CSS: Das große Little Boxes Buch

Vladimir — Wed, 03 Aug 2011 08:00:45 +0000

Seit einigen Tagen steht das Rezensionsexemplar des neuen CSS-Buches vom Kollegen Peter Müller auf meinem Arbeitstisch. Das Werk heißt Das große Little Boxes Buch und ist mit seinen 800 Seiten und dem Hardcover alles andere als little.

Der große Umfang des Buches kommt dadurch zu Stande, dass Peter zwei seiner Bücher – Little Boxes 1 und Little Boxes 2 – aktualisiert und zu einem Buch zusammengefasst hat.

Das Werk richtet sich eindeutig an CSS-Anfänger oder an Kollegen, die sich in den letzten 4-5 Jahren in diesem Segment nicht fortgebildet haben. Denn das Buch fängt bei Adam & Eva an und hört mit einem 65-Seitigen YAML-Abschnitt auf.

Das Buch ist in zehn Abschnitte aufgeteilt, die da wären:

Die Einleitung
HTML-Crashkurs
CSS-Grundlagen
CSS-Positionierung: Positionierung und Floats
Mehrspaltige Layouts mit CSS: Positionierung und Floats mit fester und flexibler Breite
Vertiefung von HTML und CSS: HTML und CSS optimieren, Vertiefung in das Boxmodell und in die Selektoren
Navigation gestalten: vertikal und horizontal, Dropdown-Navigation etc.
Inhalte gestalten: Fließtext, Listen und Formulare gestalten, abgerundete Ecken
Das CSS-Framework YAML: inkl. Umgang mit dem YAML-Builder und Layoutbeispiele
Die Werkzeugkiste: Browsererweiterungen, Editoren und Linkliste

Peter schreibt gut, verständlich und dennoch locker. Man sieht den Texten an, dass er bereits mehrere gute Bücher geschrieben hat und das er seit Jahren als IT-Dozent arbeitet. Wer nach einer guter CSS-Einstiegslektüre sucht, dem kann ich Das große Little Boxes Buch auf jeden Fall empfehlen.

In Anbetracht des Umfanges ist der Preis von knapp 35 Euro fair und gerechtfertigt. Manch einen wird es stören, dass das Buch nicht in "Farbe" sondern in "Schwarz-weiß" ist, aber die Abbildungen sind auch in den verschiedenen Graustufen gut erkennbar und schließlich handelt es sich hierbei um kein Buch zum Thema Design, wo visuelle Feinheiten der Layoutbeispiele im Vordergrund stehen. Zudem darf man nicht vergessen, dass ein Farbdruck sich im Preis auf jeden Fall bemerkbar gemacht hätte.

Im Artikel befinden sich ein paar Partner-Links zu Amazon. Wenn du etwas darüber kaufst bekomme ich u. U. eine kleine Provision. Dir entstehen keine Extra-Kosten. Möchtest du das nicht, dann einfach bei Amazon die Suchfunktion benutzen.

CSS: Pseudo-Spriting, neuer Clearfix-Hack, normalize.css

Vladimir — Fri, 08 Jul 2011 10:52:46 +0000

Die CSS-Sprites sind eine sehr beliebte Methode um die Performance einer Website zu verbessern. Die CSS-Sprites sind zum einen sparsam bei der Dateigröße, das äußert sich vor allem bei vielen kleinen Grafiken (z. B. Icons) und zudem werden HTTP-Aufrufe gespart. Als Beispiel habe ich die Hintergrundgrafik eingefügt, mit der ich hier die Icons der diversen Netzwerke einbinde.

Standardmäßig eignen sich die CSS-Sprites dann wenn man entweder die Höher oder die Breite des Elements kennt. Kennt man die Breite, dann sortiert man die einzelnen Grafiken horizontal. Kennt man die Höhe, dann sortiert man dagegen vertikal. Wenn man aber weder die Breite noch die Höhe des Elements kennt, dann hat man ein Problem. Hier kann aber der Artikel Pseudo Spriting helfen.

Dort werden zwei Lösungswege vorgestellt. Zum einen greift man auf das Pseudoelement :before zurück und in der zweiten Lösung ordnet man die einzelnen Grafiken diagonal an.

Neue Möglichkeit um Floats zu beenden (clearen)

Auf A new micro clearfix hack wird eine recht neue Methode vorgestellt um die Floats zu beenden bzw. zu clearen:

/* Für moderne Browser */
.cf:before,
.cf:after {content: ""; display: table;}

.cf:after {clear: both;}

/* Für IE 6/7 (löst hasLayout aus) */
.cf {zoom: 1;}

Auf Über hasLayout gibt es eine ausführliche, deutschsprachige Beschreibung.

normalize.css vs. reset.css

Wer sich bis jetzt mit dem CSS-Reset nicht anfreunden konnte und sich über unterschiedliche Darstellung diverser Elemente in verschiedenen Browsern ärgert, für den könnte die normalize.css ein Blick wert sein.

Anstatt wie beim CSS-Reset alles auf "Null" zu setzen werden in der normalize.css die Elemente aneinander angeglichen und es wird versucht diverse Bugs auszubügeln.

Wer es als gegeben hinnimmt, dass sich manche Elemente von Browser zu Browser unterscheiden können, der lässt sowohl die reset.css wie die normalize.css links liegen.

Via Guido Mühlwitz.

Simple Media Queries Tester

Vladimir — Sun, 26 Jun 2011 12:47:59 +0000

Kollege Frank Bültge hat einen netten Tester für die Media Queries erstellt. Wer sich jetzt fragt was das nun wieder ist, dem empfehle ich für erste den Artikel im Archiv von Dr. Web Magazin.

Mit Hilfe der Media Queries versucht man in CSS3 die Fähigkeiten des Ausgabemediums abzufragen, zum Beispiel:

@media only screen and (max-device-width: 480px) {...}

Mit Hilfe der Media Queries kann man nicht nur die Breite und Höhe des Displays und des Browserfensters abfragen sondern auch die Position und die Auflösung.

Simple Media Queries Tester

Im Tester von Frank kann man die Breite und die Höhe für die Geräte definieren und dann die zu testende URL eingeben. So bin ich auch auf das Tool aufmerksam geworden. In den Stats ist mir aufgefallen, dass jemand fleißig perun.net getestet hat.

Bevor sich jemand die Mühe macht: nein, ich setzte hier die Media Queries nicht ein.

HTML und CSS: Dokus und Referenzen

Vladimir — Sun, 19 Jun 2011 12:54:10 +0000

Welche Werte sind für die CSS-Eigenschaft text-transform erlaubt, welche Pseudo-Klassen und -Elemente gibt es, welche Browser unterstützen display: inline-block; oder wie ging das noch mal mit float und clear? … für die Beantwortung solcher Fragen eignen sich weniger die Blogs als vielmehr Websites, die dem chronologischen Aufbau nicht unterworfen sind.

Hier folgen einige meiner Meinung nach wichtige Dokumentationen und Referenzen zu HTML und CSS. In der Liste finden sich sowohl deutsche, wie auch englischsprachige Projekte.

SelfHTML

Viele Jahre lang war SelfHTML die deutschsprachige Anlaufstelle Nr. 1 wenn es um (X)HTML, CSS und Webdesign-Grundlagen ging. Mittlerweile ist die Hauptseite ein bisschen in die Jahre gekommen, aber im SelfHTML-Wiki geht es weiter: neues Layout, neue Inhalte und viele Informationen.

SelfHTML-Wiki

Einführung in XHTML, CSS und Webdesign

Michael Jendryschik kommt, wie man am Namen erkennen kann … aus Dortmund. Ich kenne ihn persönlich und ich kenne auch seine sehr ausführliche Dokumentation mit dem Namen Einführung in XHTML, CSS und Webdesign.

Einführung in XHTML, CSS und Webdesign

Hier kann man sich entscheiden: entweder man liest die Dokumentation online oder man kauft sich das Buch … man kann auch beides machen.

The StyleWorks

The StyleWorks ist eine weitere deutschsprachige Referenz. Sie bezieht sich lediglich auf CSS 2.1, aber für viele Fälle ist das ausreichend, da die meisten Projekte CSS3 wenn überhaupt noch in ganz kleinen Dosen einsetzen.

The StyleWorks

CSS 4 you

Bis vor ca. 4-5 Jahren war CSS 4 you die Nummer 1 bei den CSS-Referenzen im deutschsprachigen Raum. Leider liegen die letzten kleinen Aktualisierung schon mehr als 1,5 Jahre zurück und ein Großteil ist auf dem Stand von 2006-2008. Aber dennoch ist die Website es wert in die Lesezeichen aufgenommen zu werden. Viele Infos sind nach wie vor aktuell und die Website ist übersichtlich aufgebaut.

CSS 4 you

Little Boxes Teil 1

Den Autor Peter Müller kenne ich persönlich und er steht hinter der Buch-Reihe Little Boxes welches sich mit HTML und CSS beschäftigt. Little Boxes 1 aus dem Jahr 2009 kann man komplett kostenlos online lesen.

Little Boxes 1

SitePoint

SitePoint ist zwar eine englischsprachige Website, aber die Referenz ist sehr umfangreich und vergleichsweise aktuell. SitePoint bietet eine Referenz für CSS, HTML und Javascript.

SitePoint: Referenz für CSS, HTML und Javascript

SitePoint ist auch wegen einem anderen Aspekt interessant: wegen dem CodeBurner. Bei CodeBurner handelt es sich um die Möglichkeit, die Referenz von SitePoint in Firefox, Opera oder Mac OS Dashboard zu integrieren. Über CodeBurner habe ich bereits auf Webwork-Tools.de geschrieben.

Mozilla Developer Network

Mozilla Developer Network habe ich im letzten Artikel vorgestellt und das dürfte momentan die modernste Dokumentation und Referenz sein.

Mozilla Developer Network

Die Aktualität

An den oben genannten Beispiele kann man sehr gut erkennen, dass solche Dokus und Referenzen von einer Person kaum zu schaffen sind. Das ganze ist viel zu umfangreich und es ändert sich viel zu schnell: neue Eigenschaften und Werte, neue Browserversionen etc.

Solche Unterfangen sind etwas für gut organisierte Communitys wo zumindest ein oder mehrere Sponsoren oder ein Verein im Hintergrund für die Architektur und die Finanzierung sorgen. Nur so kann man umfangreich werden und vor allem auf lange Sicht auch aktuell bleiben. Hier denke ich das SelfHTML-Wiki und das Mozilla Developer Network eine richtige Richtung einschlagen

Da ich logischerweise nicht alle Quellen kenne und auch hier nennen kann würde es mich interessieren, welche Quelle ihr so nutzt bzw. bevorzugt?

Fachbücher auf Amazon kaufen

CSS3: Schriftgrößen mit rem angeben

Vladimir — Mon, 02 May 2011 20:56:42 +0000

Mittlerweile gibt es bei der Umsetzung von Websites zwei "Hauptphilosophien" in Bezug darauf, welche Einheiten man bei den Schriften wählt: Pixel oder Em. Bei Pixel ist die Vorgehensweise einfach, man vergibt den entsprechenden Bereichen einen gewünschten Pixelwert, z. B. font-size: 14px;. Pixel ist auch eine relative Einheit und zwar in Bezug auf das Ausgabegerät des Betrachters. Je nach Monitor ist eine Schriftgröße von 14 Pixel kleiner oder größer.

Die Problematik rund um `em`

Die Einheit em richtet sich nach den Browsereinstellungen des Nutzers. In den allermeisten Browsern ist die Größe der Schrift mit 16 Pixel voreingestellt. Gibt man zum Beispiel für den Inhaltsbereich font-size: 1.5em; an dann ist die Schrift 24 Pixel groß. So weit, so gut. In Verbindung damit, dass man auch den Ausmaßen der einzelnen Bereiche der Website ebenfalls Breitenangaben in em spendiert hat, war man in der Lage sog. "zoomable Layouts" zu erstellen: änderte der Nutzer die Schrifteinstellungen so wurde auch die Website breiter bzw. schmaler.

Hat der Nutzer aus welchen Gründen auch immer, die Standardgröße der Schrift in den Browsereinstellungen erhöht oder kleiner gemacht, dem entsprechend anders schaute auch das Ergebnis auf der Website aus.

Weil das Rechnen mit der Basiszahl 16 nicht so komfortabel ist kam man dann irgendwann auf die Idee die Schriftgröße von body auf 10 Pixel zu setzen: body {font-size: 62.5%;}. Wollte ich jetzt in der Sidebar der Schrift eine Größe von 14 Pixel spendieren, dann gab man einfach #sidebar {font-size: 1.4em;} ein.

Dies ist eindeutig leichter zu merken als 0.875em bzw. .875em (Kurzschreibweise). Die 0, 875 bekommt man wenn man die 14 Pixel durch 16 Pixel teilt.

Der Haken an der ganzen Geschichte ist, dass die Angabe zur Schriftgröße an die Kindelemente vererbt wird. Bei Pixelangaben kein Problem, bei em schon. Hier ein Beispiel zur Verdeutlichung:

body        {font-size: 62.5%;}
#sidebar    {font-size: 1.4em;}
.kleiner    {font-size: 1.2em;}

Und hier die Preisfrage, was meinst du welche Schriftgröße haben die Listenpunkte im folgenden Code:

Die richtige Antwort ist (fast) 17 Pixel: 62,5% x 1,4 x 1,2 = 16,8. Zu der Problematik der Vererbung gesellten sich Rundungsfehler in Browsern und (ich finde den Artikel leider nicht mehr) bei umfangreicheren Layouts war der Browser etwas länger beschäftigt um die Schriftgrößen auszurechnen, als dies bei reinen Pixelangaben der Fall gewesen wäre.

Aus der Summe der Probleme und der Tatsache, dass die meisten Browsern solide Zoomfunktionen eingebaut sind, sind viele Webworker dazu übergegangen wieder Pixel für die Schriftgrößen einzusetzen. Was jetzt mehr eingesetzt wird, darüber kann ich nichts sagen.

Jetzt habe ich so weit ausgeholt … worauf wollte ich eigentlich hinaus? Ach ja, zu rem.

`rem` als das bessere `em`

Seit einiger Zeit gibt es allerdings eine zusätzliche relative Einheit (rem), die zumindest ein Teil der Problematik rund um em lösen kann. Wenn ich den Artikel von Johnathan Snook richtig verstanden habe, dann funktioniert rem wie em, nur das es sich nicht wie em auf das Eltern-Element sondern auf das Root-Element (body) bezieht.

Wenn man jetzt das letzte Beispiel modifiziert:

body        {font-size: 62.5%;}
#sidebar    {font-size: 1.4em;}
.kleiner    {font-size: 1.2rem;}

dann wäre bei den Listenpunkten:

Die Schriftgröße nicht 16,8 Pixel sondern 12 Pixel.

Dank rem wäre zumindest die Vererbungsproblematik gelöst. Und dadurch das man sich direkt auf body bezieht und nicht die Angaben der vorhergehenden Elemente (teilweise über drei Stufen) miteinbezieht, sinkt auch die Gefahr der Rundungsfehler.

Einen Haken gibt es…

… und das ist der Browsersupport. Opera kennt rem noch nicht und der Internet Explorer bis einschl. Version 8 kennt diese Einheit auch nicht. Die anderen Browser können mit dieser Einheit umgehen. Will man rem einsetzen und dennoch kein Browser ausschließen, dann könnte man folgendermaßen vorgehen:

body        {font-size: 62.5%;}
#sidebar    {font-size: 14px; font-size: 1.4rem;}

Ich für meinen Teil werde werde auch weiterhin bei Pixel bleiben. Alle relevanten Browser verfügen über einen gut funktionierenden Seitenzoom und alle diese Browser können Schriften skalieren, egal ob die Größe per Pixel oder Em bestimmt wurde.

Im Artikel befindet sich ein Partner-Link zu Amazon. Wenn du etwas darüber kaufst bekomme ich u. U. eine kleine Provision. Dir entstehen keine Extra-Kosten.

WordPress & Webwork » css

CSS Usage: welche CSS-Regeln sind im Einsatz?

Verwandte Beiträge:

Wer ist der schnellste Coder?

Verwandte Beiträge:

CSS: browserspezifische Eigenschaften, Pseudo-Elemente und Pseudo-Klassen von Mozilla

Verwandte Beiträge:

Patternify: ganz einfach Hintergrundgrafiken erstellen

Verwandte Beiträge:

CSS-Links: Generator, Buttons, 100% vs. auto

Verwandte Beiträge:

CSS: automatische Nummerierung von Überschriften

Buchtitel

Kapitel

Abschnitt

Abschnitt

Kapitel

Erklärung des Codes

Weiterführende Links

Verwandte Beiträge:

CSS: jede Unterseite auf 100% Höhe

Verwandte Beiträge:

CSS3: Infos und Auflistung über aktive Mediaqueries

Verwandte Beiträge:

Humor mit CSS

Verwandte Beiträge:

CSS3: Mehrspaltiger Text

WordPress und Mehrspaltigkeit

Links zu dem Thema

Verwandte Beiträge:

Links: WordPress, Google+, Editoren, CSS3, Chrome

Verwandte Beiträge:

Mit HTML-Editor Dokumente und E-Books für Amazon Kindle erstellen (2)

Der erste Inhalt

Die erste Überschrift

Die zweite Überschrift

Link und Download:

Verwandte Beiträge:

Mit HTML-Editor Dokumente und E-Books für Amazon Kindle erstellen (1)

Die Vorbereitung

Einrichtung der Umgebung

Die nächsten Schritte

Verwandte Beiträge:

Validierung, CSS3 vs. Photoshop, responsive Webdesign

Verwandte Beiträge:

CSS-Hack für Opera 11

Verwandte Beiträge:

CSS: Das große Little Boxes Buch

Verwandte Beiträge:

CSS: Pseudo-Spriting, neuer Clearfix-Hack, normalize.css

Neue Möglichkeit um Floats zu beenden (clearen)

normalize.css vs. reset.css

Verwandte Beiträge:

Simple Media Queries Tester

Verwandte Beiträge:

HTML und CSS: Dokus und Referenzen

SelfHTML

Einführung in XHTML, CSS und Webdesign

The StyleWorks

CSS 4 you

Little Boxes Teil 1

SitePoint

Mozilla Developer Network

Die Aktualität

Fachbücher auf Amazon kaufen

Verwandte Beiträge:

CSS3: Schriftgrößen mit rem angeben

Die Problematik rund um em

rem als das bessere em

Einen Haken gibt es…

Verwandte Beiträge:

Die Problematik rund um `em`

`rem` als das bessere `em`