Monthly Snap August – NETWAYS News | Tipps & Tricks | Upcoming… | Corporate Blogging


 
„Das @netways Blog kann man auch generell einfach mal empfehlen: https://www.netways.de/  – immer wieder spannende Sachen bei den Posts dabei“, twittert Felix Kronlage Anfang August. Das freut mich und meine Kolleginnen und Kollegen natürlich sehr! Denn, wie ihr als fleißige Blog-Leser/innen sicher wisst, das NETWAYS Blog ist, ganz im Geiste von Open Source, ein offenes Gemeinschaftsprojekt, geschrieben von uns, dem NETWAYS Team.
Wir haben unseren Redaktionsplan so organisiert, dass das Schreiben wie ein Staffelstab Tag für Tag durch unser Headquarter und von Team zu Team gereicht wird: Montags Shop & Sales, dienstags Events & Marketing, mittwochs Managed Services, donnerstags Development, freitags Consulting.  Für samstags planen wir eventuelle Specials und am Monatsende gibt es, so wie heute, einen Rückblick, den Monthly Snap. Der Snap bietet die Gelegenheit, noch einmal zu rekapitulieren. Während ich bei meinem täglichen Blick in das Blog meinen Fokus ja eher auf den einzelnen Beitrag des Tages richte, fällt mir jetzt am Monatsende mal wieder die Bandbreite an Themen und die Vielzahl der Stimmen auf, die unseren Blog und damit NETWAYS ausmachen!
Im besten Falle findet ihr, genau wie Felix, das ein oder andere für euch spannende Thema und klickt euch durch die Links. Viel Spaß dabei!
CEO Bernd hat diesen Monat seine Vergleichsserie wieder aufgenommen und veröffentlicht Icinga, Nagios, Naemon, OMD, Check_MK, Op5, Centreon oder Shinken – Teil III. Außerdem verweist er auf das Bitkom Forum Open Source 2018.

Webinare – Aus der Asche

In NETWAYS Webinare – Aus der Asche erfahrt ihr von Christian mehr über ein kleines Hitze- und Performance-Problem und die Termine aller Webinare in der zweiten Jahreshälfte, während Silke vom Shop & Sales-Team euch darüber informiert: Die neuen STARFACE Pro V6 und STARFACE Compact V3 Anlagen sind da!
Und natürlich gibt es auch wieder eine bunte Kiste voller Tipps und Tricks von unseren Entwicklern, Administratoren und Consultants, die vielleicht auch euch das Leben erleichtern: Jennifer – Feu – verrät „How css-tricks improved my work life“. Thomas weiß, es gibt JSON in bequem. Noah stolpert durch Zufall darüber und ist ab sofort happy mit  Postman – API development and testing made simple. Philipp setzt seine i-doit-Reihe fort mit i-doit API create, update, delete.

La La Lan & Molecule

Max zeigt euch in seiner La La Lan-IT Love Story wie man Linux Netzwerkschnittstellen mit check_nwc_health überwachen kann. Florians Thema: MySQL-Datenbanken verwalten mit Sequel Pro. Tim teilt sein Wissen über Adfree Internet with pi-hole.
Blerim stieß, als er an der Ansible Role für Icinga 2 arbeitete, auf ein hilfreiches Tool. Lest selbst: Testing Ansible Roles with Molecule. Ihr wollt mehr über Icinga 2 wissen, genauer, wie ihr mit Puppet eine dezentrale Icinga 2-Umgebung aufbaut und konfiguriert? Wir haben da einen neuen Workshop! Was euch erwartet, erfahrt ihr von mir in Ice, Ice – Icinga 2 / Puppet – Baby!

GitLab as a Service, Mutual SSL und OpenStack

Gitlab | self-hosted vs. Gitlab as a ServiceMarius wagt den Vergleich! Die vergangenen Monate hat er außerdem genutzt, um eine neue Cloud aufzubauen und weiß nun allerhand über Bursting und Throtteling in OpenStack zu berichten.
Jean beschäftigt sich in The Walrus Has Landed mit Structured Logging in Go und Georg dank einer Kunden-Anfrage mit der Realisierung einer clientbasierten Zertifikats-Authentifizierung (Mutual SSL) mit selbstsignierten Zertifikaten auf Linux + Apache. Sein Motto: Gesagt, getan.

DevOpsDays, OSBConf, OSMC und OSCAMP

Eventmäßig ist der August selbst ein eher ruhiger Monat. Klar: Viele sind in Urlaub, in zahlreiche Länder verstreut. Dafür stehen im Herbst die Zeichen umso mehr auf Get-Together. DevOpsDays | Sep 12. – 13. // OSBConf | Sep 26 // OSMC | Nov 5. – 8. // OSCamp | Nov 8. Mehr erfahrt ihr hier von Keya und mir: Devs are from Venus, Ops are from Mars? – DevOpsDays Berlin Program Online!, Why you shouldn’t miss OSBConf 2018 – #1 und #2, OSMC program online: Check out who’s in! Und OSCAMP #2 on Puppet: Get on stage!

 Und sonst so?

Wir haben Gunnar verabschiedet, ohne den wir Icinga heute so nicht hätten, und unseren ersten neuen Azubi willkommen geheißen, Henrik Triem im Development, und eine Woche Unterstützung von Nadine gehabt, die als Berufsschullehrerin mal Firmenluft schnuppern wollte.
Unser Schulungsraum Kesselhaus hat jetzt Jalousien und kann verdunkelt werden. Wir werden am 17. Dezember ein IcingaCamp in Tel-Aviv veranstalten und Icinga ist jetzt offizieller Partner im HashiCorp Technology Partner Program.
Viele Themen, viele Stimmen, viel Neues, viel Spannendes!
So much happend, more to come! Stay tuned!

Julia Hornung
Julia Hornung
Marketing Manager

Julia ist seit Juni 2018 Mitglied der NETWAYS Family. Vor ihrer Zeit in unserem Marketing Team hat sie als Journalistin und in der freien Theaterszene gearbeitet. Ihre Leidenschaft gilt gutem Storytelling, klarer Sprache und ausgefeilten Texten. Privat widmet sie sich dem Klettern und ihrer Ausbildung zur Yogalehrerin.

How css-tricks improved my work life

My relationship with CSS is some kind of a love-hate one and I think that is a sentiment a lot of web-devs share with me.
My biggest issue with it is, that it is really counterintuitive and most of the time it feels a bit like solving puzzles to make things align the way you want it to.

and oftentimes it feels a lot like


Properties that mean the same thing being worded inconsistently – I’m looking at you…

vertical-align: middle;
text-align: center;

And there is also some questionable naming with ‘grey’ (#808080) being darker than ‘darkgrey’ (#a9a9a9)…
In general there are too many quirks you need to just know. Unless you work with it every day, you need to google every second line in order to write your stylesheets.
There you can find all sorts of guidelines, help, blogposts with a nice mix of bad-practices and outdated information.
What helped me a lot is the website css-tricks.
(mehr …)

Was kann eigentlich CSS-Grid?

Die Entwicklung für CSS Layout ist nicht aufzuhalten. Nachdem das Flexible Box Layout (aka “Flexbox”) inzwischen salonfähig ist, steht bereits die nächste CSS-Spezifikation vor der Tür. Diese soll nicht nur einfache Layout-Eigenschaften einfacher und direkter möglich machen (Stichwort “vertikal zentrieren”), sondern auch bisher nicht mögliche Layouts direkt in CSS ermöglichen, ohne das Markup anpassen zu müssen.
(mehr …)

Florian Strohmaier
Florian Strohmaier
UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

Styling Webforms

Styling webpages? Easy.
I’m guessing a lot of you had to work with CSS at some point in their lives.
Most parts of the web are fairly easy to style,
especially if you know some of the little hacks that you have to use to make a page look pretty.
So you go ahead and style everything the way you want it:
Nice grey background, elements in different shades of blue a bunch of elements in pink for contrast.
You put a nice image as a header for your page and add a sidebar, things that appear and disappear when you hover over them, even some nice animations.
All looking good.
Styling forms? Not so much.
Then you get to the user settings.
You try to apply styles to the checkboxes. Nothing happens.
You try to apply styles to the dropdowns of select elements. Nothing happens.
Need a date selector? Good luck on doing anything to that one!
But why is it so hard to style webforms?
In the end it all comes down to the fact that styling form elements is left up to the browsers.

A select will look different in Chrome than in Safari, Firefox, IE or any other User Agent.
But then again, in a Chrome browser a select will look the same in every web page you look at.


I’m not talking about whether you should or shouldn’t overwrite those defaults.
There are a lot of arguments for and against it, but all I’m going to focus on in this post is the how.


How do you restyle checkboxes?
Especially hacky is how the restyled checkboxes work:
The actual checkbox input is to be hidden:


input[type="checkbox"] {
position: absolute; // take it out of document flow
opacity: 0; // hide it
}

The new box for the checkbox is then built into the label of the checkbox with the ::before selector.
The tick is then styled with the ::after selector like this:


input[type="checkbox"] + label:before {
// Box for Checkbox
}


input[type="checkbox"] + label {
// Actual label
}


input[type="checkbox"]:checked + label:after {
// Tick
}

That way you can have a completely customised checkbox.
How does it look like all put together?
I had a little project where I spent a week researching how to make a webform pretty with only CSS.
The result was a melange of tips and tricks I found all over the web. (That little checkbox trick that i just explained was one of them)
Check it out below!

See the Pen Formstyles for Blogpost by Feu (@the_Feu) on CodePen.

Flexbox in der Praxis: ein paar einfach Beispiele

Inzwischen wird das Flexible Box Layout (kurz FlexBox) ja soweit von Browsern unterstützt, dass es in vielen Fällen auch ruhigen Gewissens für die Produktion verwendet werden kann.
Größtenteils vereint FlexBox viele Layout-Funktionen unter einem Featureset. In erster Linie macht es bestimmte Layout-Funktionen leichter und direkter zugänglich, ohne das Markup verändern zu müssen. Dadurch lassen sich nun relativ elegant und mit wenigen CSS-Angaben viele Layout-Probleme lösen, die man eigentlich schon lange für selbstverständlich hielt.
(mehr …)

Florian Strohmaier
Florian Strohmaier
UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

Vektorgrafiken mit CSS animieren

Nachdem SVGs (Scalable Vector Graphics) inzwischen von den meisten aktuellen Browsern recht zuverlässig unterstützt werden, findet man sie immer häufiger im Web. Die Vorteile liegen klar auf der Hand: SVGs sind auflösungsunabhängig und benötigen in der Regel weniger Speicherplatz als entsprechende Bitmap-Pendants.
Ein weiterer Vorteil: SVGs basieren nämlich (wie HTML) auf einem XML-Standard. Das heißt konkret, dass alle Elemente eines SVG-Vektorbildes (in der Regel Formen wie Kreise, Rechtecke oder Pfade) in der Datei in Form von Text beschrieben werden. Und jetzt kommt der Clou: Dadurch können ebendiese Elemente durch CSS gestyled werden und dementsprechend auch animiert werden (Das Zauberwort lautet CSS-Animationen).
Im folgenden wird in einer kleinen Case Study veranschaulicht, was beim Animieren von SVG-Vektografiken mit CSS beachtet werden muss.
Dazu erstellen wir zunächst eine SVG-Datei. Passenderweise verwenden wir in diesem Beispiel das Icinga Logo. Für den SVG-Export verwenden wir Adobe Illustrator, ebenso wäre das aber auch mit Sketch oder einem ähnlichem Vektor-sicheren Programm wie Sketch, InkScape, etc. möglich.

Vektorgrafik vorbereiten

Wir öffnen das Icinga Logo in Illustrator. Im Vorfeld muss die richtige Gruppierung der Ebenen (siehe Screenshot) berücksichtigt werden, damit man die einzelnen Elemente später gezielt ansprechen kann. Generell ist es wesentlich zeitsparender, wenn man im Vorfeld grob weiß, wie die Animation letztendlich aussehen soll.
In diesem Fall legen wir den zentralen Kreis und die einzelnen „Satelliten“ samt Ihrer Verbindungslinien auf jeweils eine Ebene. Danach gruppieren wir die Satelliten-Objekte.
Bildschirmfoto 2016-06-08 um 14.53.19

Export als SVG

Nun exportieren wir das Logo als entsprechende SVG Datei. Dies bewerkstelligen wir über Datei > Speichern unter …. Als Dateityp wählen wir SVG und aktivieren die Option Zeichenflächen verwenden. Dadurch würde bei mehreren Zeichenflächen für jede Zeichenflächen eine einzelne Datei angelegt.
Bildschirmfoto 2016-06-08 um 17.46.04

Aufbereitung des SVG-Codes

Um die einzelnen Element per CSS-Selektoren ansprechen zu können muss der SVG-Code vorbereitet werden. Dazu öffnen wir die SVG-Datei in einem Texteditor der Wahl und sehen uns den Code erst mal etwas genauer an.
Die Struktur ist recht offensichtlich: Die einzelnen Ebenen, die im Vektorgrafik-Programm angelegt wurden finden sich hier als -Elemente wieder. Die Ebenengruppen umschließen die einzelnen Ebenen mit einem -Tag. Man könnte den SVG-Code bereits so verwenden, um das ganze etwas verständlicher aufzubauen geben wir den einzelnen Elementen jeweils ein id-Attribut, damit wir diese besser ansprechen können. Der Zentrale Kreis erhält die ID primary die Satelliten benennen wir mit sat-0 … 4. Die Gruppe bekommt die id satellites.
Zum Schluss bereinigen wir den SVG-Code noch und entfernen die fill-Attribute. Diese fügen wir später im CSS wieder ein.
Hier wäre der fertige SVG-Code:

<svg>
<g id="icinga-logo">
<g id="satellites">
 <path
   id="sat-0"
   d="M70.9,0C64,0,58.4,5.6,58.4,12.5c0,4.2,2.1,7.9,5.3,10.2L43.3,64.8l3.8,1.8l20.4-42.1c1.1,0.3,2.3,0.5,3.5,0.5c6.9,0,12.5-5.6,12.5-12.5S77.8,0,70.9,0z"
 />
 <path
   id="sat-1" d="M112.6,37.5c-4.6,0-8.3,3.7-8.3,8.4c0,0.1,0,0.2,0,0.3L44.6,63.7l1.2,4l59.7-17.6c1.5,2.4,4.1,4.1,7.2,4.1c4.6,0,8.3-3.7,8.3-8.4C120.9,41.2,117.2,37.5,112.6,37.5z"
 />
 <path
   id="sat-2"
   d="M68.8,95.9c-0.5,0-1,0.1-1.5,0.2L46.9,64.6l-3.5,2.3l20.4,31.4c-0.8,1.1-1.3,2.4-1.3,3.8c0,3.4,2.8,6.3,6.2,6.3c3.5,0,6.3-2.8,6.3-6.3C75,98.6,72.2,95.9,68.8,95.9z"
 />
 <path
   id="sat-3"
   d="M21.3,103.6l25.6-36.7l-3.4-2.4l-25.6,36.7c-1.6-0.8-3.4-1.2-5.3-1.2C5.6,100,0,105.6,0,112.6c0,6.9,5.6,12.5,12.5,12.5c6.9,0,12.5-5.6,12.5-12.5C25,109.1,23.6,105.9,21.3,103.6z"
 />
 <path
   id="sat-4"
   d="M45.7,63.5l2.7-3.2L20.1,36.9c0.5-1.1,0.8-2.3,0.8-3.5c0-4.6-3.7-8.4-8.3-8.3c-4.6,0-8.3,3.7-8.3,8.3c0,4.6,3.7,8.4,8.3,8.3c1.8,0,3.5-0.6,4.9-1.6L45.7,63.5z"
 />
</g>
 <path
   id="primary"
   d="M31.8,46c9.5-7.7,23.4-6.3,31.1,3.2c7.7,9.4,6.3,23.4-3.2,31.1c-9.5,7.7-23.4,6.3-31.1-3.2C20.9,67.7,22.3,53.7,31.8,46z"
 />
</g>
</svg>

 
Jetzt wollen wir die SVG-Datei in unser HTML einbinden. Grundsätzlich gibt es zwei Möglichkeiten, SVGs mit entsprechendem CSS anzulegen.

1. Inline SVG direkt im HTML einbinden

Im HTML wird der SVG Code innerhalb eines -Tags direkt in die HTML-Datei eingebunden. Dadurch können die einzelnen Elemente direkt mit Inline-Styles oder über ein externes CSS-File wie gewohnt angesprochen werden. Diese Variante ermöglicht außerdem, die  <svg>-Elemente per Javascript zu manipulieren.

2. SVG in eine separate Datei auslagern und per <img>-Tag oder als CSS-Background einbinden

Möchte man das animierte SVG an mehreren Stellen einbinden, ist es sinnvoll den SVG-Code samt Styleangaben in eine separate Datei auszulagern. Diese .svg Datei kann dann wie gewohnt per <img>-Tag oder CSS-Background eingebunden werden. Leider ist es in dieser Variante nicht möglich die Elemente per Javascript anzusteuern und entsprechend zu manipulieren.
Der Einfachheit halber wird in diesem Beispiel Variante 1 gewählt

Animation des zentralen Kreiselements

Nun kann es los gehen. Zunächst definieren wir eine Animation in unserem CSS mit @keyframes. Hier sollte beachtet werden, dass in diesem Beitrag der Übersichtlichkeit wegen keine Vendor-Prefixes berücksichtigt werden.

@keyframes primaryPulse {
  from { transform: scale(1) }
  to   { transform: scale(1.1) }
}

Diese Animation weisen wir dem mittleren Kreiselement mit der id primary zu und vergeben eine Dauer von 3 Sekunden in der die Animation abgespielt werden soll. Wichtig ist in diesem Fall den transform-origin anzugeben.

#primary {
  animation-name: primaryPulse;
  animation-duration: 3s;
  transform-origin: center center;
}

Die Animation wird dadurch einmal abgespielt. Um die Animation dauerhaft abzuspielen erweitern wir die CSS-Angaben mit animation-iteration-count. Dadurch würde die Animation abspielen und am Ende wieder abrupt zum Anfang zu springen. Das ergäbe einen unschönen Sprungeffekt. Um einen pulsierenden Effekt zu erzielen vergeben wir zusätzlich noch die animation-direction Eigenschaft. Somit wird die Animation abwechselnd vorwärts und rückwärts abgespielt.

#primary {
  animation-name: primaryPulse;
  animation-duration: 3s;
  transform-origin: center center;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

 

Bewegung für die Satelliten

Nun wollen wir den Satelliten etwas Leben einhauchen und auch diese animieren. Diese sollen einen leichten Rotationseffekt erhalten, der wie beim zentralen Kreis alternierend abgespielt werden soll. Dadurch definieren wir zunächst wieder die Animation über @keyframes.

@keyframes rotate {
  from { transform: rotate(-3deg) }
  to   { transform: rotate(3deg) }
}

Wir weisen den einzelnen Satelliten-Elementen die Animation zu. Über animation-delay erzielen wir, dass die Satelliten-Animation leicht versetzt startet. Dadurch wird vermieden, dass die Animation zu synchron abläuft und zu mechanisch wirkt. Wichtig hierbei ist auch die entsprechende Angabe der transform-origin Eigenschaft, damit die Satelliten um die Mitte des Logos rotieren.

#sat-0 {
  transform-origin: bottom left;
  animation-name: rotate;
}
#sat-1 {
  transform-origin: bottom left;
  animation-name: rotate;
  animation-delay: 1.5s;
  animation-duration: 6s;
}
#sat-2 {
  transform-origin: top left;
  animation-name: rotate;
  animation-delay: 3s;
  animation-duration: 6s;
}
#sat-3 {
  transform-origin: top right;
  animation-name: rotate;
  animation-duration: 6s;
}
#sat-4 {
  transform-origin: bottom right;
  animation-name: rotate;
  animation-delay: 3s;
  animation-duration: 6s;
}

Um den Code schlank zu halten, verwenden wir die CSS Selektoren und wählen alle <path>-Elemente der #satellite Gruppe aus. Hier setzen wir alle Eigenschaften, die für alle Satelliten-Elemente nötig sind.

#satellites > path {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Zu guter letzt erstellen wir noch eine Animation für die gesamte Satellitengruppe um die Logoanimation noch etwas organischer zu machen …

@keyframes globalPulse {
  from { transform: scale(1) }
  to   { transform: scale(1.2) }
}

… und weisen diese der #satellites-Gruppe zu

#satellites {
  animation-name: globalPulse;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: center center;
}

 

Und so sieht die Animation aus

See the Pen RRWmay by Florian Strohmaier (@flourish86) on CodePen.

Florian Strohmaier
Florian Strohmaier
UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

NextGen Training

Zukünftig werden all unsere Trainings auf der Basis von Showoff stattfinden. Showoff wird von Puppetlabs entwickelt, daher hat es sich bereits seit Längerem bei den Puppet Schulungen bewährt. Als RubyGem kann Showoff schnell installiert werden:

# gem install showoff

Im Grunde genommen werden die Schulungsinhalte im Markdown-Format verfasst und in einem JSON-File zusammen gefasst. Dieses wird dann mit Showoff gestartet. Per CSS und Templates kann das Layout dann noch in Form gebracht werden, wobei hier zwischen verschiedenen Slide Styles unterschieden wird. Presenter bzw. Personal Notes  stellen Informationen nur für den Trainer dar, zusätzliche Handout Notes hingegen erleichtern den Teilnehmern das Verständnis.
Aufgaben und zugehörige Lösungen können aus den Schulungsfolien mit supplemental-Tags ausgelagert und entsprechend gedruckt werden. Bei gängigen Programmiersprachen oder Konfigurationsformaten kommt ein sog. Language Highlighting zum Einsatz, das für eine korrekte farbliche Darstellung der Syntax sorgt.

Showoff Presenter Mode


Die Präsentationsfolien sind für die Teilnehmer per Webbrowser über Port 9090 erreichbar, wobei für den Trainer ein separater Presenter-Modus zur Verfügung steht. Über diesen kann der Trainer die Folien weiter schalten und ergänzende Informationen einsehen.
Für die Teilnehmer besteht die Möglichkeit sich in die Sitzung des Trainers einzuklinken, sodass der Wechsel der Folien automatisch für sie erfolgt. Daneben gibt es noch weitere Aufrufe, beispielsweise können den Teilnehmern über http://<host>:9090/download  auch einzelne Dateien für die Übungen zur Verfügung gestellt werden.
Wer jetzt mehr über Showoff erfahren möchte und es auch mal im praktischen Einsatz sehen will, dem kann ich natürlich unsere Trainings wärmstens empfehlen. Dort werden die Vorteile von Showoff sehr schnell klar.

Markus Waldmüller
Markus Waldmüller
Lead Senior Consultant

Markus war bereits mehrere Jahre als Sysadmin in Neumarkt i.d.OPf. und Regensburg tätig. Nach Technikerschule und Selbständigkeit ist er nun Anfang 2013 bei NETWAYS als Lead Senior Consultant gelandet. Wenn er nicht gerade die Welt bereist, ist der sportbegeisterte Neumarkter mit an Sicherheit grenzender Wahrscheinlichkeit auf dem Mountainbike oder am Baggersee zu finden.

Weekly Snap: CSS & Chrome, Quickstatd & Graphite, Monitoring & CERN

weekly snap5 – 9 August was a brief week of developer and sys admin tips plus a look at monitoring in an organisation with 3000+ servers and a Large Hadron Collider.
Eva began by counting 78 days to the OSMC with Christophe Haen’s presentation on Monitoring at CERN.
Jannis played with Chrome developer tools for CSS and Sebastian ended the week with his discovery of Quickstatd and Graphite for near real-time performance graphs.

Chrome Devtools: CSS Helfer

Wer kennt das nicht: Man baut ein wenig an einer HTML Seite/Webanwendung (wohlmöglich einer, die man nicht selbst entwickelt hat) herum und möchte das Styling eines Elementes anpassen. Doch egal was man macht und wie laut man brüllt: Der Browser übernimmt die Änderungen einfach nicht. Grund sind meist irgendwelche zusätzliche CSS Regeln die die eigenen Überscheiben, oder sonstiger CSS Voodoo der (scheinbar) keinen Sinn ergibt.
Oft rutscht man dabei in ein iteratives Try & Error Prinzip:

  1. CSS Anpassen
  2. Seite neu aufrufen
  3. Fluchen
  4. CSS Anpassen

Spätestens ab Punkt 4. sollte man merken, dass hier etwas Ineffizient ist. Tools wie die eingebaute Entwicklerkonsole im Chrome können hier den totalen Nervenzusammenbruch (ungefähr bei der zehnten Iteration) verhindern. Natürlich gibt es ähnliche Features auch für die anderen Browser. Die Chrome Entwicklertools sind meiner Meinung nach nur am umfangreichsten und effizientesten, darum gehe ich hier nicht auf andere Tools ein.
Ruft man die Tools auf (Ctrl-Shift-i,  Cmd-Shift-I (Mac) oder Tools->Developer tools) und geht in den Elements Dialog, begrüßt einen folgendes Fenster (hier habe ich eine Seite des W3C CSS Tutorials aufgerufen) :

Chrome developer tools

Developer tools


Während die linke Seite den aktuell gerenderten DOM Baum anzeigt (also mit dynamisch hinzugefügten/geänderten Elementen) gibt die rechte Spalte Auskunft über das aktuelle ausgewählte Element (CSS Regeln, Maße, Eventlistener, etc).
Das 'Computed style' Feld zeigt alle Regeln, die angewendet werden

Das ‘Computed style’ Feld zeigt alle Regeln, die angewendet werden


Interessant für die CSS-Fehlersuche sind eigentlich nur die ersten drei Sektionen :

  • Computed Style gibt an, welche Regeln für dieses Element letztenendes wirklich angewendet werden, also in das Rendering einfliessen
  • Style gibt an, welche Regeln im ‘style=’ Attribut des Objektes hinterlegt sind
  • Matched CSS Rules zeigt alle CSS-Regeln und deren Quelldateien an, die für den aktuellen Knoten gelten. Dabei ist die Reihenfolge gleich der CSS Hierarchie, d.h.
    weiter oben liegende Regeln unterschreiben die generischen Regeln aus der Ebene darunter (Ausnahme: Regeln mit !important)

Sollte etwas nicht gehen muss der Blick zuerst auf die Computed Style Sektion gehen: Ist meine Regel hier vorhanden?
Wenn ja sollte die Regel überprüft werden: Passt das CSS auf das angegebene Element? Gibt es spezielle Bedingungen für die Regel? Passt der Kontext (z.B. bei Problemen mit float, hier müssen auch andere Knoten berücksichtigt werden).
Wenn die Regel nicht im Computed Style steht, kann man in dem Matched CSS Rules Feld hoffentlich sehen warum das so ist:

Kein tingting.mp3 für mich - nicht unterstützte Regeln zeigt Chrome netterweise an

Kein tingting.mp3 für mich – nicht unterstützte Regeln zeigt Chrome netterweise an

  • Erscheint die Regel nicht ist das CSS schlicht und ergreifend nicht korrekt (ist das CSS geladen? Passt die CSS Query auf den Knoten?)
  • Erscheint die Regel, jedoch durchgestrichen, lohnt sich ein Blick auf das gelbe Ausrufezeichen: Dann ist die Regel entweder invalide (hat z.b. einen Tippfehler) oder wird nicht unterstützt.
  • Ist die Regel vorhanden, aber der Wert im Computed Style ein anderer, sollte man schauen ob die Regel irgendwo überschrieben wird: Gibt es Regeln die über der eigenen liegen? Ist die Regel mit !important definiert?

Zum Experimentieren ausserdem sehr nett: Click man auf eine Regel kann man neue Attribute hinzufügen oder bestehende Attribute verändern. Chrome greift einem mit den Eigenschaften und Werten ein wenig unter die Arme. Kleinere CSS Experimente oder Wertänderungen kann man so direkt im Browser ausprobieren.
Man darf aber nicht vergessen dass einem die Tools nur helfen können Fehler zu finden – ein Blick in die Doku sollte bei Problemen immer als erstes Erfolgen. Wer nicht weiß, was sein CSS bewirkt wird auch mit den besten Tools nicht weit kommen (spätestens wenn ein anderer Browser das Dokument anders rendert).

Weekly Snap: Git Flow & GeoIP, Rsync & SCP

weekly snap1 – 5 April kicked off the month with tips for flowing Git branches, SSH transmission speed, clean website code and request redirection.
Eva began by counting 16 days to the OSDC with Benedikt Stockebrand’s presentation “Like Rats on a Sinking Ship” on the end of IPv4.
Stefan then shared his trick to boost SSH transmission speed with SCP and Rsync parameters while Bernd gave us his to redirect requests from specific countries.
To end the week, Eric explained the right flow for Git branching, and Tobias reminded us that clean website code matters to Google page ranks.