Kategorien
Essentials Freebies, Tools und Templates

Remote Debugging: Mobile Webseiten am PC oder Mac untersuchen

Beim Entwickeln von mobilen Webseiten kommt man irgendwann unweigerlich an den Punkt, an dem man auf dem Smartphone oder Tablet die Entwicklertools im Browser starten möchte, um das HTML und CSS genauer untersuchen zu können.

Dieser Beitrag zeigt Ihnen, wie Sie Webseiten auf Android- und iOS-Geräten mit den Browserentwicklertools auf einem PC oder Mac untersuchen können, und zwar weitgehend mit Bordmitteln und ohne die Installation zusätzlicher Software wie Android SDK, Adobe Edge Inspect oder Weinre (WEb INspector REmote).

Die Hardware

Bevor Sie loslegen, überprüfen Sie kurz die Hardware. Sie benötigen:

  • Smartphone oder Tablet mit Android oder iOS
  • USB-Kabel, um das Gerät mit dem Rechner zu verbinden
  • Mac mit OS X oder PC mit Windows (oder beides)

Am besten funktioniert die im Folgenden beschriebene Vorgehensweise auf Macs unter OS X ab 10.8, denn dort können Sie ohne viel Aufwand sowohl iOS- als auch Android-Geräte untersuchen. Auf PCs hingegen kann man nur Androids debuggen und muss zunächst einen USB-Treiber für das Gerät installieren, was Windows in der Regel allerdings automatisch erledigt.

Remote Debugging mit Android-Geräten (für Win und OS X)

Zum Debuggen von Webseiten auf Androids benötigen Sie folgende Software:

  • als Browser: Googles Chrome ab V28 auf beiden Geräten
  • auf dem PC oder Mac die Chrome-Erweiterung ADB
  • PC mit Windows (ideal 7) oder Mac mit OS X (ab 10.8)
  • unter Windows: USB-Treiber für das Android-Gerät

Und los geht’s.

1. Die Chrome-Erweiterung ADB installieren

Im Chrome auf dem PC oder Mac installieren Sie zunächst die Erweiterung mit dem schönen Namen „ADB“, die innerhalb von Chrome die „Android Debug Bridge“ zur Verfügung stellt und Ihnen damit die Installation des kompletten Android SDK erspart.

Zur Installation der Erweiterung suchen Sie im Chrome Web Store einfach nach den Buchstaben „ADB“ oder klicken auf den Direktlink, den Sie weiter unten bei den „Links zum Beitrag“ finden. Unter Windows 8 klappt die Installation aus dem Chrome Webstore nicht, aber bei Github gibt es genaue Anweisungen zur manuellen Installation. Einen Link dazu finden Sie ebenfalls am Ende des Beitrags.

Nach der Installation der ADB-Extension finden Sie im Chrome rechts oben einen kleinen grauen Androiden.

01-chrome-adb-installed

2. Debugging auf dem Android-Gerät erlauben

Auf dem mobilen Gerät müssen Sie das Debugging gleich zwei Mal erlauben, und zwar einmal in den Einstellungen des Gerätes und einmal im mobilen Chrome. Gehen Sie zunächst in die Einstellungen des Gerätes und erlauben bei den Entwickler-Optionen das USB-Debugging.

02-s2-usb-debugging-quer

Ab Android 4.2 sind die Entwickler-Optionen standardmäßig versteckt. Um sie einzublenden, rufen Sie in Einstellungen die Option Info zum Gerät (4.2) bzw. Über das Telefon (ab 4.3) auf. Dort tappen Sie dann sieben Mal auf die Buildnummer. Unglaublich aber wahr. Nach Absolvierung dieses Rituals gehen Sie wieder eine Seite zurück und finden dann dort die Entwickler-Optionen, in denen Sie wie oben beschrieben das USB-Debugging aktivieren können.

Starten Sie jetzt Chrome auf dem Android-Gerät und aktivieren Sie im Menü Einstellungen - Entwickler-Tools die Option Web-Debugging über USB, indem Sie auf die Option tappen und dann rechts oben den Schiebeschalter auf Ein stellen. [EDIT 2013-11-26: Falls diese Option nicht vorhanden sein sollte, machen Sie einfach mit Schritt 3 weiter. Siehe Kommentar weiter unten.]

03-s2-chrome-web-debugging-ein

Danach rufen Sie im mobilen Chrome die Seite auf, deren Quelltext Sie gleich am PC oder Mac untersuchen möchten.

3. Geräte verbinden und Quelltext untersuchen

Zum Verbinden der Geräte stöpseln Sie unter OS X einfach das USB-Kabel ein und bestätigen eventuelle Sicherheitsabfragen.
Auf dem Android-Gerät erscheint die Meldung Als Mediengerät verbunden und oben in der Statusleiste wird oben links das USB-Symbol sichtbar. Eine eventuelle Meldung „Es wurde keine Software auf Ihrem PC gefunden, die das Gerät erkennt“ können Sie ignorieren bzw. mit OK bestätigen. Es funktioniert trotzdem.

Unter Windows werden nach dem Einstöpseln des USB-Kabels zunächst die Treiber für das Android-Gerät installiert. Im Idealfall passiert dies automatisch und sie brauchen dafür nichts, außer ein paar Minuten Geduld. Falls die Installation aus irgendeinem Grunde nicht klappen sollte, müssen Sie den USB-Treiber für das Androidgerät manuell installieren. Einen Link für Windows OEM USB Treiber finden Sie am Ende des Beitrags.

Nach dem Verbinden der Geräte starten Sie im Chrome auf dem PC oder Mac die weiter oben installierte Erweiterung ADB, indem Sie zunächst auf den grauen Androiden klicken und dann auf den Befehl Start ADB. Daraufhin färbt sich der Android grün.

04-chrome-adb-view-targets

Klicken Sie auf das jetzt grüne Android-Symbol und wählen Sie im ADB-Menü die Option View Inspection Targets. Chrome öffnet die Seite chrome://inspect, auf der Sie eine URL eingeben und damit auf dem mobilen Chrome einen neuen Tab öffnen können. Darunter werden im mobilen Chrome bereits geöffnete Seite gelistet. Sie können sie untersuchen, indem Sie auf den Link Inspect hinter dem Namen der Seite klicken.

Die folgende Screenshot-Montage zeigt auf der linken Seite die Developer Tools im Chrome auf dem Desktop, in denen das HTML-Element für das Menü ausgewählt wurde. Auf der rechten Seiten sehen Sie, wie das auf dem Desktop-Chrome selektierte Element im Chrome auf dem Android-Gerät hervorgehoben wird. Änderungen in den Developer Tools auf dem Desktop werden live und in Farbe im mobilen Browser umgesetzt. Remote Debugging.

05-chrome-devtools-desktop-webseite-mobile

Remote Debugging mit iOS-Geräten (nur OS X)

Zu Analyse von Webseiten auf iOS-Geräten benötigen Sie mindestens iOS 6 und einen Mac. Der wesentliche Unterschied liegt darin, dass das Debugging im Safari stattfindet und nicht im Chrome.

Gleich zu Beginn der Hinweis, dass Sie statt eines echten iOS-Gerätes auch den in der Programmierumgebung Xcode enthaltenen iOS-Simulator benutzen können. Die folgenden Schritte können Sie also auch dann abarbeiten, wenn Sie gerade weder ein iPhone noch ein iPad zur Verfügung haben. Xcode selbst können Sie aus dem Appstore heraus installieren. Im Menü Xcode - Open Developer Tool wird dann der iOS-Simulator gestartet.

1. Im Safari die Entwicklertools aktivieren

Zunächst aktivieren Sie im Safari auf dem Mac und auf dem mobilen Gerät (oder im iOS-Simulator) die Entwicklertools. Auf dem Mac finden Sie dazu in den Einstellungen im Abschnitt Erweitert die Option Menü "Entwickler" in der Menüleiste anzeigen.

06-safari-einstellungen-erweitert

Im iOS-Gerät gehen Sie in die Einstellungen - Safari - Erweitert und aktivieren dort mit dem Schieberegler die Option mit dem unscheinbaren Titel Webinformationen. In der englischen Version heißt der Befehl Web Inspector.

07-ipad-einstellungen-safari-erweitert

2. Geräte verbinden und Quelltext untersuchen

In diesem Schritt verbinden Sie iOS-Gerät und Mac mit dem USB-Kabel. Danach öffnen Sie auf dem Mac den Safari und finden dort im Menü Entwickler relativ weit oben das per USB-Kabel angeschlossene Gerät und bzw. oder den iOS-Simulator.

08-safari-entwicklermenü-ios-devices

Für die gefundenen Geräte werden alle im Safari geöffneten Webseiten angezeigt. Ein Klick auf die gewünschte Seite, und schon sehen Sie auf dem Mac die Entwicklertools mit dem Quelltext der auf dem mobilen Safari geöffneten Webseite. Auch hier werden Änderungen in den Entwicklertools auf dem Mac sofort im mobilen Safari umgesetzt.

09-safari-devtools-ipad-simulator

Fazit

Das Debuggen von Webseiten auf mobilen Geräten von einem PC oder Mac aus ist auch ohne zusätzliche Software recht einfach möglich und erleichtert die Optimierung ganz enorm.

Links zum Beitrag

Remote Debugging für Android:
Chrome downloaden
Die Erweiterung ADB im Chrome Webstore
ADB unter Windows 8 – manuelle Installation.
Windows OEM USB Treiber für Android
– Artikel „Remote Debugging on Android“

Remote Debugging für iOS:
Safari 7
Xcode mit iOS Simulator
– Artikel „Using Web Inspector to Debug Mobile Safari“

Links zu weiteren Tools

(dpe)

Kategorien
Design HTML/CSS

CSS for Runaways: 5 unterschätzte Selektoren

In CSS gibt es jede Menge interessanter Selektoren, die kaum jemand kennt, geschweige denn benutzt, und das hat in erster Linie zwei Gründe. Zum einen scheint es so, als ob die lange Zeit gültigen Beschränkungen des IE6 irgendwann zur Gewohnheit geworden sind. Zum anderen enthält der von CMSystemen erzeugte Quelltext oft viele Klassen, die dann auch für das Styling genutzt werden. Trotzdem oder gerade deswegen lohnt sich ein Blick auf die neuen Selektoren, von denen dieser Artikel fünf kurz vorstellt.

HTML5_sticker

Nummer 1. Der Kindselektor: > selektiert nur Kindelemente.

Nachfahrenselektoren sind weit verbreitet. ul li zum Beispiel selektiert alle Listenelemente innerhalb einer ungeordneten Liste.

Wenn man aber zwischen den beiden Typselektoren statt der Leerstelle ein Größer-als-Zeichen setzt, werden nicht mehr alle Nachfahren, sondern nur noch Kindelemente selektiert.

Kinder sind Elemente, die in der DOM-Hierarchie genau eine Stufe tiefer stehen. ul > li wählt also nur die Listenelemente der ersten Ebene aus. Die Leerstellen links und rechts vom Größer-als-Zeichen sind übrigens optional, machen die Sache aber besser lesbar.

Besonders in verschachtelten Listen wie Navigationen mit mehreren Ebenen ist der Kindselektor sehr praktisch, da man zum Beispiel Einrückungen für die unteren Ebenen nicht erst wieder zurücksetzen muss.

Folgender Selektor entfernt innerhalb einer Navigationsliste mit mehreren Ebenen das padding-left nur für die erste Ebene:

nav > ul { padding-left: 0; } 

Die folgende Abbildung zeigt die Auswirkung dieses Selektors.

abbildung1-kindselektoren
Ein Kindselektor wählt nur die erste Ebene aus.

Ein herkömmlicher Nachfahrenselektor wie nav ul hätte die Einrückung auch für die verschachtelten Listen entfernt, die man dann mühsam wiederherstellen müsste.

Nummer 2. Attributselektoren haben [eckige] Klammern

Der einfachste Attributselektor überprüft nur das Vorhandensein eines Attributs: a[title] selektiert alle Links mit dem Attribut title.

Mit einem Gleichheitszeichen kann man einen Attributselektor auf einen bestimmten Wert einschränken, was besonders in Formularen sehr nützlich ist. Hier zwei Beispiele:

input[type=”email”] 
input[type=”submit”] 

Das Gleichheitszeichen kann durch eine Tilde, ein Hütchen, ein Dollarzeichen oder Sternchen erweitert werden, die folgende Bedeutungen haben:

  • [attr^="zeichen"] = "zeichen" am Anfang des Wertes
  • [attr$="zeichen"] = "zeichen" am Ende des Wertes
  • [attr*="zeichen"] = "zeichen" irgendwo im Wert

Dadurch gibt es besonders für Links einige interessante Möglichkeiten:

  • a[href^="http"] selektiert alle Links mit http am Anfang
  • a[href$=".pdf"] gestaltet alle Links auf PDF-Dateien
  • a[href*="wikipedia.org"] wählt alle Links zur Wikipedia

Fehlt nur noch die Tilde ~. Der Selektor [attr~="zeichen"] wählt alle Elemente, die in einem bestimmten Attribut unter anderem diesen Wert haben, und zwar mit einer Leerstelle davor und dahinter. Das ist besonders praktisch, wenn ein Attribut mehrere Werte hat, wie es zum Beispiel bei Klassen oft der Fall ist:

[class~="grid4"] selektiert alle Elemente mit der Klasse grid4, auch wenn Sie noch weitere Klassen enthalten, wie z. B. <div class="info grid4 box">.

Nummer 3. Die Pseudoklassen :first-child und :last-child

Pseudoklassen heißen so, weil damit zwar wie mit einer Klasse eine Gruppe von Elementen ausgewählt wird, dabei aber im HTML das Attribut class nicht auftaucht.

Besonders nützliche Vertreter dieser Gattung sind :first-child und :last-child, mit denen das erste bzw. das letzte einer Reihe von Geschwistern ausgewählt werden.

So wird in Navigationslisten der erste und der letzte Menüpunkt oft etwas anders gestaltet. Im folgenden Beispiel bekommt zunächst jedes Listenelement rechts eine senkrechte Rahmenlinie:

nav li { border-right: 1px solid #ccc; }

Um dem ersten Listenelement auch links eine senkrechte Linie zu geben, bietet sich :first-child an:

nav li:first-child { border-left: 1px solid #ccc; }  

Die folgende Abbildung zeigt dieses Beispiel im Browser:

abbildung2-first-child
Der Selektor :first-child fügt die erste Rahmenlinie hinzu.

Nummer 4. :nth-child() ist der Zauberstab für Kinder

Mit Pseudoklassen können Sie wie eben gesehen ganz einfach das erste und das letzte Kind eines Elements ansprechen, aber das ist noch lange nicht alles, denn mit :nth-child() können Sie richtiggehend zaubern, was die Auswahl von Kindern angeht.

Der englische Ausdruck the nth child heißt frei übersetzt soviel wie "das xte Kind" oder auch "das soundsovielste Kind". Das "n" ist ein Platzhalter für Ordnungszahlen wie first, second, third und so weiter.

Die Zaubertricks zum Auswählen von Kindelementen werden durch das Klammernpaar nach der Pseudoklasse möglich. Zunächst einmal kann man dort einfache ganze Zahlen notieren: :nth-child(2) wählt zum Beispiel das zweite Kind aus.

Mit :nth-child() können Sie zum Beispiel vier aufeinanderfolgende Listenelemente auswählen und ihnen eine unterschiedliche Hintergrundfarbe zuweisen:

nav li:nth-child(1) { background-color: #058; }
nav li:nth-child(2) { background-color: #069; }
nav li:nth-child(3) { background-color: #07b; }
nav li:nth-child(4) { background-color: #08c; }

abbildung3-nth-child.jpg
;Die Pseudoklasse :nth-child() in Aktion

Die Klammern von :nthchild() können aber nicht nur Zahlen aufnehmen, sondern auch einfache Ausdrücke nach dem Muster :nth-child(an+b), wobei "a" und "b" für beliebige ganze Zahlen stehen. Die Möglichkeiten von :nth-child() tendieren gegen unendlich und zum Üben gibt es auf css-tricks.com ein sehr schönes Tool. Link siehe unten.

:nth-child() ist besonders bei Listen und Tabellen sehr nützlich, denn dort gibt es für ein Elternelement in der Regel viele gleichartige Kindelemente.

Nummer 5. Die Pseudoklasse :target

Mit der Pseudoklasse :target kann man das Sprungziel eines Hyperlinks hervorheben. Ein sehr schönes Beispiel dafür findet sich in der Wikipedia. Wenn man dort auf ein hochgestelltes Fußnotenzeichen klickt, springt man zu der Fußnote auf derselben Seite weiter unten. Diese Fußnote wird mit der Pseudoklasse :target farblich hervorgehoben.

abbildung4-target
Die angeklickte Fußnote wird per :target hervorgehoben.

Der Link <a href="#cite_note-2">[2]</a> springt zu der Fußnote <li id="cite_note-2"> unten auf der Seite. Dadurch wird der Zusatz #cite_note-2 an das Ende der URL gehängt und das Element mit dieser ID durch das folgende CSS hervorgehoben:

ol.references > li:target { background: #def; }  

Das Pfiffige an :target ist, dass das li-Element nur hervorgehoben wird, wenn vorher auf den Link geklickt wurde, der die ID des Listenelementes aufruft.

Mit dem geschickten Einsatz von :target kann man zum Beispiel CSS-only-Lösungen für mobile Navigationen oder Akkordeons erstellen.

Links zum Beitrag

Falls Sie diesen kurzen Exkurs in die Welt der modernen Selektoren interessant fanden, gibt es in Kapitel 8 meines Buches noch eine Menge mehr davon:
Infos zu »Flexible Boxes«

(dpe)

Kategorien
Design HTML/CSS

CSS3: Das etwas andere Box-Modell mit {box-sizing:border-box}

Das klassische Box-Modell war noch nie besonders intuitiv. In CSS3 wurde mit {box-sizing:border-box} eine Alternative vorgestellt, die besonders bei flexiblen Layouts fast nur Vorteile hat.

real-world-box

Das klassische Box-Modell {box-sizing: content-box}

Wenn Sie im analogen Alltag die Breite einer Kiste angeben, dann ist damit immer die Entfernung von einem Außenrand zum anderen gemeint, inklusive Innenabstand (padding) und Rand der Kiste (border).

Beim klassischen Box-Modell ist das anders. Dort definiert width nur die Breite des Inhaltsbereichs und Angaben für padding oder border werden hinzugefügt. Visuell sieht dieses klassische Box-Modell so aus (nur zur Erinnerung):

boxmodell_content-box-w640

Man muss manchmal ein bisschen rechnen oder tricksen bis alles passt. Bei Layouts mit festen Pixelbreiten ist das zwar manchmal etwas nervig, aber durchaus machbar.

Doppelte HTML-Elemente als Notlösung

Wirklich problematisch wird das klassische Box-Modell erst, wenn innerhalb einer Box die Angaben für width, padding, border oder margin verschiedene Einheiten verwendet werden, denn dann lässt sich die Gesamtbreite dieses Elements nicht mehr zuverlässig bestimmen:

  • Eine mit <aside class="sidebar"> erstellte Layoutspalte soll eine Breite von 20% und ein padding links und rechts von jeweils 10px bekommen.
  • Frage: Wie viel Platz muss man für die Sidebar im Layout reservieren?
  • Antwort: Keine Ahnung. Das kann man nicht zuverlässig berechnen.

Damit flexible Layouts aber nicht zur reinen Lotterie verkommen, hat man sich beholfen, indem man das HTML-Element verdoppelt und die Box-Modell-Eigenschaften auf die beiden Elemente verteilt:

  • Innerhalb von aside wird ein zusätzliches div eingefügt.
  • aside bekommt width:20% zugewiesen.
  • Das innere div bekommt eventuelle Angaben für padding, border oder auch margin.

Dadurch hat die Sidebar unabhängig vom padding & Co immer eine Breite von 20% und wird im wahrsten Sinne des Wortes berechenbar.

Diese Dopplung von HTML-Elementen ist heute so selbstverständlich, dass wir fast vergessen haben, dass es ursprünglich mal eine Notlösung war.

Boxen wie im richtigen Leben mit CSS3: {box-sizing: border-box}

Fast unbemerkt von der breiten Öffentlichkeit haben die Browser so nach und nach ein zweites Box-Modell eingebaut, das etwas anders funktioniert. In diesem Modell sind padding und border in der Angabe von width bereits enthalten. Es heißt border-box, weil die Breite der Box von border bis border gemessen wird. Grafisch dargestellt sieht das so aus:

boxmodell_border-box_kraken-w640

Im Webdesigner-Alltag ist diese unscheinbare Änderung beim Layouten sehr praktisch. Bei der weiter oben beschriebenen Sidebar spart man damit zum Beispiel das doppelte, innere HTML-Element:

  • Zunächst wird .sidebar { box-sizing:border-box} definiert.
  • Dann wird dem Element z. B. width:20% und ein beliebiges padding oder border zugewiesen.

Fertig.

Mit der border-box ist es völlig egal, wie viel padding oder border ein Element bekommt, denn diese Werte werden von der Breite abgezogen und nicht hinzugefügt. Was in den meisten Fällen einfach nur praktisch ist. Die Sidebar wird auch ohne Dopplung der HTML-Elemente berechenbar.

Ein mit margin definierter Außenabstand kommt übrigens immer noch hinzu, aber dass ist bei den Boxen im richtigen Leben auch so.

Die border-box im Alltag

Wenn man erst einmal so richtig begriffen hat, wie praktisch diese border-box sein kann, kommt natürlich unweigerlich die Frage nach der Browserunterstützung auf. Und hier ist die Antwort:

caniuse-com-border-box-kraken-w640

Hey hey, sogar IE8 versteht das. Unbelievable. Mozilla benötigt zwar noch einen Prefix, aber wer den IE7 erst einmal draußen vor lassen kann, könnte sein Stylesheet mit folgendem Style beginnen:

* { 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
}

Und genau das empfiehlt Paul Irish in seinem Blog-Artikel vom 1. Februar 2012.

Fazit

Die border-box ist eine mehr als willkommene Alternative zum klassischen Box-Modell, aber bevor Sie komplett auf die border-box umsteigen, sollten Sie die weiter unten gelisteten Artikel studieren. Als Basis für flexible Layouts wird die border-box wahrscheinlich schon ziemlich bald selbstverständlich sein.

Lesenswerte Links zum Artikel

Hier einige lesenswerte Artikel, die gleichzeitig auch ein bisschen den Werdegang von vorsichtigen Versuchen bis zur Empfehlung widerspiegeln:

Und hier noch zwei Referenzen:
* W3C, CSS3-ui box-sizing
* Mozilla Developer Network, box-sizing

Bildquelle Holzbox: 16 Miles of String via photopin cc

(dpe)

Kategorien
Design HTML/CSS

„CSS gerootet“: Flexible Schriftgrößen mit REM

Diskussionen über die beste Art und Weise, die Schriftgröße bzw. den Schriftgrad zu definieren sind wahrscheinlich so alt wie das Web. Neben den traditionellen Kandidaten wie px, em und % gibt es mit rem einen neuen Bewerber, der das Beste der anderen Einheiten in sich vereint.

Von der Wurzel her betrachtet

Früher mal Standard: Schriftgrad per em oder %

Bis etwa 2008 galt es als weitgehend als Best Practice, den Schriftgrad im CSS so flexibel wie möglich zu definieren. Dazu wurden die Einheiten em oder % eingesetzt, relativ zur Standardeinstellung im Browser, die normalerweise bei 16px liegt.

Diese flexible Mischung servierte den Nutzern damals das beste Lese-Erlebnis, denn viele Browser hatten noch keinen Seitenzoom und der IE6 konnte mit px definierten Text überhaupt nicht zoomen, jedenfalls nicht ohne einen Eingriff in die Systemeinstellungen.

Sowohl bei em als auch % gab es in der Praxis aber Probleme mit der Vererbung der Schriftgrößen. Eine Prozentangabe ist immer relativ zu irgendetwas, meist zum Eltern-Element, und bei em ist das nicht anders:

  • Bei einer Box-Modell-Eigenschaft wie margin-bottom orientiert sich em an der Schriftgröße des Elements selbst. Ändert sich die Schriftgröße, ändert sich der Abstand, was zum Beispiel im Fließtext häufig ein gewünschter Effekt ist.
  • Bei der Schriftgröße hingegen gilt als Basis für ein em die Schriftgröße des Eltern-Elements. Eine Angabe von zum Beispiel 0.875em wird also bei jeder Verschachtelung ein Stückchen kleiner.

Fast wie bei Alice im Wunderland. Mal zu groß, mal zu klein, aber so richtig passen tut’s dann doch nie.

Die vorübergehende Emanzipation des px

Im Februar 2009 hielt Jens Grochtdreis in seinem Blogartikel „Die leidige Sache mit der Schriftskalierung“ ein kurzes Plädoyer für die Pixel. Moderne Browser hatten damals einen Seitenzoom und der IE6 wurde als Gegenargument immer weniger wichtig.

Ein Jahr später veröffentlichte Gerrit van Aaken einen Beitrag mit dem Titel „Warum ich Pixel für CSS-Schriftgrade verwende„. In der Diskussion unter Gerrits Bekenntnis zu px ging es hoch her, aber besonders bemerkenswert ist Kommentar #22 , in dem eine Einheit namens rem erwähnt wird, die den meisten Webdesignern bis dahin weitgehend unbekannt war.

Das „root em“: rem als neuer Stern am Schriftgrad-Himmel

Seit etwa 2011 wird das rem langsam aber sicher bekannter, denn es vereint die Vorteile von pxund em. Es ist genauso flexibel wie sein älterer Bruder em, umgeht aber dessen Nachteile bei der Vererbung, weil sich das „root em“ immer auf das Stammelement <html> bezieht (nicht auf <body>).

Um den Wert für rem zu erhalten, teilt man einfach die gewünschte Pixelgröße durch den Ausgangswert 16. Im CSS könnte eine solche Schriftgrad-Definition wie folgt aussehen:

html { font-size: 100%; } /* Browserdefault, 16px  */   
h1 { font-size: 1.75rem; } /* 28/16 = 1.75 */  
h2 { font-size: 1.375rem; } /* 22/16 = 1.375 */   
p { font-size: 0.875rem; } /* 14/16 = 0.875 */     

Auf diese Weise lässt sich ganz einfach eine Kaskade von Schriftgraden aufbauen. Um den Schriftgrad irgendwann einmal größer oder kleiner zu machen, muss man nur die Basis ändern. Das Verhältnis von Fließtext zu Überschrift bleibt dabei immer gleich.

Das Fallback für alte Browser mit px

Das klingt fast zu gut um wahr zu sein, aber tatsächlich hat die Geschichte nur einen einzigen Haken: Alte Browser, wie immer. Auf http://caniuse.com/rem kann man sich einen guten Überblick verschaffen, und der sieht gar nicht so schlecht aus:

Can I use Rem units?

Die eigentlichen Schwachpunkte liefern der IE vor Version 9 sowie Opera Mini. Für diese beiden und alle anderen alten Browserkollegen kann man in seinen Stylesheets ein Pixel-Fallback einbauen, dass für das obige Beispiel so aussehen könnte:

html { font-size: 100%; }   
h1 { 
font-size: 28px; 
font-size: 1.75rem; 
}   
h2 { 
font-size: 22px; 
font-size: 1.375rem; 
}    
p { 
font-size: 14px; 
font-size: 0.875rem; 
}    

Moderne Browser lesen und überschreiben im Rahmen der Kaskade den px-Wert mit dem rem-Wert, ältere hingegen nehmen die px-Anweisung und ignorieren die zweite Zeile. Perfekt.

Links zum Beitrag:

(dpe)

Kategorien
Boilerplates & andere Tools Essentials Freebies, Tools und Templates Programmierung

Dreamteam: Texte schreiben mit Sublime Text 2 und Markdown

Sublime Text 2 hat sich im letzten Jahr zum Lieblingseditor vieler Webentwickler gemausert. Dieser Beitrag zeigt, dass Sublime nicht nur für Code, sondern auch zum Schreiben von Webtexten geeignet ist. Idealer Partner ist dabei das in 2004 von John Gruber entwickelte Markdown.

Sublime – Markdown: Zwischen Text und HTML

Markdown vereinfacht Autoren das Schreiben von Texten für das Web und steht zwischen reinem Text und HTML. Im Gegensatz zu reinem Text kann man mit Markdown Überschriften, Zitate, Links und so weiter auszeichnen. Das geht mit HTML natürlich auch, aber Markdown ist einfacher zu schreiben und vor allem besser lesbar. Hier ein paar Beispiele:

  • Überschriften beginnen mit einer Raute: # wird zu h1, ## zu h2 und so weiter.
  • Hervorhebungen sind von *Sternchen* umgeben
  • Zitate haben wie in Text-Mails ein > am Anfang der Zeile

Markdown-Erfinder John Gruber hat eine Syntax-Übersicht veröffentlicht und es gibt auch eine deutsche Übersetzung. Zum Üben der Markdown-Syntax ist übrigens das Online-Tool Dingus echt gut: Markdown schreiben, per Klick in HTML konvertieren und direkt darunter das Ergebnis anschauen.

In Schreibwerkzeugen wie dem iA Writer findet Markdown inzwischen ebenso Verwendung wie im Web. Online-Communities wie Google+, Github, Reddit oder Stack Overflow benutzen zur Formatierung der Beiträge Abwandlungen von Markdown.

Und auch für Sublime Text gibt es ein paar sehr nützliche Markdown-Plugins, die den Editor zu einem richtig guten Prosa-Schreibwerkzeug werden lassen.

MarkdownEditing: Markdown in Sublime Text 2

Man kann in Sublime natürlich wie in jedem anderem Text-Editor auch völlig ohne zusätzliche Werkzeuge ganz normales Markdown schreiben, aber bequemer wird die Sache mit ein paar nützlichen Plugins, allen voran MarkdownEditing.

Am einfachsten ist die Installation über den Package Manager von Sublime. Falls das nicht funktioniert, einfach das ZIP-Paket von Github downloaden, entpacken und in den Ordner /packages/ kopieren. Wo genau der auf Ihrer Festplatte liegt, finden Sie über Preferences - Browse Packages... heraus.

Nach der Installation ist das Plugin automatisch für alle Dateien mit der Endung .md zuständig und sobald Sie eine Markdown-Datei öffnen, sieht Sublime völlig anders aus als vorher:

  • der Hintergrund wird hell und der Cursor hellblau (iA Writer lässt grüßen)
  • Markdown-Auszeichnungen werden zum Teil formatiert
  • es gibt ein Highlighting für die Markdown-Syntax
  • der Text steht in der Mitte des Editorfensters
  • Zeilen werden bei 70 Zeichen automatisch umgebrochen.
Das Sublime-Plugin MarkdownEditing
Das Sublime-Plugin MarkdownEditing mit den Standardeinstellungen

Die genauen Einstellungen des Plugins finden Sie unter Preferences - Package Settings - MarkdownEditing. Besonders im Distraction Free Mode aus dem Menü View lässt es sich so gut arbeiten.

Aber MarkdownEditing sieht nicht nur gut aus, sondern macht das Arbeiten mit Markdown-Dateien mit Syntax-Highlighting sehr viel bequemer und öffnende Klammern werden automatisch geschlossen. Unter OS X wird auch die Erstellung von Links zum Kinderspiel: URL in die Zwischenablage kopieren, Gewünschten Linktext markieren, URL per CMD-ALT-V aus der Zwischenablage einfügen.

Fertig ist der Markdown-Link. Eine Liste der aktuellen Features von MarkdownEditing finden Sie auf der Projektseite bei Github.

Markdown als HTML in der Zwischenablage und im Browser

Die perfekte Ergänzung zu MarkdownEditing sind die beiden folgenden Plugins:

  • Markdown to Clipboard fügt dem Kontextmenü im Editorfenster den Befehl Copy Markdown as HTML hinzu. Dieses HTML kann man dann in den WordPress-Editor oder in einem anderen Sublime-Fenster einfügen und bei Bedarf verfeinern. Das Plugin kann auch über den Package Manager installiert werden, auch wenn das in dem verlinkten Blogbeitrag nicht erwähnt wird.
  • OmniMarkupPreviewer schickt die geöffnete Markdown-Datei als HTML an den Browser. Im Kontextmenü wird dazu der Befehl Preview Current File in Browser hinzugefügt. Das Tastenkürzel ist auf dem MAC CMD+Alt+O (wie Oh, keine Null). Unter Windows mit CTRL statt CMD.

OmnimarkupPreview - Markdown als HTML-Vorschau im Browser
HTML-Vorschau im Browser – OmnimarkupPreview in Aktion

Weitere nützliche Plugins zum Schreiben von Texten in Sublime sind zum Beispiel SmartMarkdown, mit dem man Textpassagen einfach aus- und wieder einblenden kann, oder WordCount, das genau das tut was der Name andeutet.

Fazit: Sublime Text wird durch ein paar Markdown-Plugins zu einem richtig komfortablen Schreibwerkzeug für Webworker. Und das ist insbesondere auf der Windows-Plattform keine Selbstverständlichkeit.

(dpe)

Kategorien
CMS Programmierung

Das ist neu in Contao 3

Heute ist Contao 3.0 offiziell erschienen und bringt viele neue Features mit. In diesem Artikel möchte ich alte und neue Highlights kurz vorstellen, auch wenn eine solche Feature-Beschreibung nur einen unzureichenden Einblick in den Charme des Systems gibt. Im Werkzeugkasten eines Webworkers ist Contao als CMS übrigens in vielerlei Hinsicht eine fast perfekte Ergänzung zu WordPress.

Contao 3.0 - Backend - Startseite
Contao 3.0 – Backend – Startseite

Klassische Features: Der Kern von Contao

Contao ist ein seitenbasiertes CMS und Kern einer Contao-Installation ist ein Seitenbaum, mit dem sich auch mehrere hundert Seiten leicht verwalten lassen. Erweiterungen wie Nachrichten und Kalender ergänzen diese Seitenstruktur.

Der Inhalt einer Seite wird auf Artikel und Inhaltselemente verteilt. Mit Hilfe der Inhaltselemente fällt es auch nicht webaffinen Redakteuren leicht, komplexe Layouts mit neben dem Text positionierten Bildern, gut aussehenden Bildergalerien oder per Mausklick ein- und ausklappbaren Abschnitten („Akkordeon“) zu erstellen.

Ein leistungsfähiger Formulargenerator gehört ebenso zum Core von Contao wie eine detaillierte Rechte- und Benutzerverwaltung und die Möglichkeit, eine mehrsprachige Website zu erstellen. Über die im Backend integrierte Erweiterungsverwaltung kann man die Funktionalität fast beliebig erweitern.

Und das ist neu in Contao 3.0

In der neuen Version 3.0 gibt es einige sehr gelungene neue Features, von denen ich hier einige kurz vorstellen möchte:

  • Datenbank-gestütztes Dateisystem: Ordner und Dateien in der Dateiverwaltung können nachträglich umbenannt oder verschoben werden und Verknüpfungen in Inhaltselementen und Modulen bleiben erhalten.
  • Inhaltselemente auch für Nachrichten und Kalender: Dadurch sind Bildergalerien, Akkordeons, Code-Beispiele und vieles mehr in News-Beiträgen und Terminen kein Problem mehr.
  • Versionsvergleich mit DIFF-Ansicht: Eine Versionierung, mit der man zu älteren Versionen von Inhaltselementen, Modulen und Stylesheets zurückkehren kann, hatte Contao schon, aber jetzt kann man sich die Unterschiede zwischen verschiedenen Versionen direkt im Backend anzeigen lassen.
  • Mobile Websites: Die mobile Version einer Website hat meist nicht nur ein anderes Layout, sondern benötigt auch andere Funktionen zum Beispiel zur Navigation. Contao 3 vereinfacht das, indem es ein separates Seitenlayout für mobile Webseiten ermöglicht.
  • Neues CSS-Framework: Das integrierte CSS-Framework ist jetzt responsive und basiert auf dem Holy-Grail-Prinzip, sodass der Inhalt im Quelltext vor den Seitenspalten steht. Besonders auf Mobilgeräten und für Suchmaschinen ist das von Vorteil.
  • jQuery für das Frontend: Mit MooTools und jQuery unterstützt Contao die beiden beliebtesten JavaScript-Frameworks.

Außerdem gibt es hierarchische URLs („Folder-URL“), eine einfachere Einbindung externer Stylesheets und zahlreiche kleine Usability-Verbesserungen, die das Arbeiten im Backend noch angenehmer machen. Und last but not least ist Contao 3 aufgrund einiger Optmierungen im Core noch schneller als die sowieso schon ziemlich flotte 2er-Version.

Weitere Informationen und Downloads zu Contao gibt es auf contao.org (oder auf der Projektseite bei Github).

Ende November 2012 erscheint übrigens auch die dritte Auflage von „Websites erstellen mit Contao“. Mehr Informationen dazu gibt es auf der Website zum Buch.