Archiv

Zentrieren mit Gridlayout

Natürlich ist das CSS3-Gridlayout-Modul für komplexe Layoutaufteilungen gedacht, aber manchmal braucht man ja auch banale Dinge – wie beispielsweise eine horizontale und vertikale Zentrierung. Und da das Gridlayout demnächst standardmäßig in Firefox (ab Version 52), Chrome (ab Version 57) und Safari (ab 10.1) unterstützt wird, scheint es mir der richtige Zeitpunkt, die verschiedenen Optionen auszuprobieren. Zur Wahl stehen für die Zentrierung die Angaben align-content, justify-content sowie align-items und justify-items. Was aber ist genau der Unterschied zwischen diesen Angaben? Und wie zentriert man jetzt am besten beim Einsatz vom CSS3-Gridlayout?

Weiterlesen

Flexbox – Verwirrendes bei der flex-Kurzschreibweise

Die Kurzschreibweise flex bestimmt die flexiblen Ausmaße von Flexboxen und ist eine verkürzte Schreibweise für drei Angaben. Soweit so klar. Was aber weniger bekannt ist: Wenn man bei flex die Angabe für flew-grow oder  flex-basis weglässt, werden andere Werte genommen als die Ausgangswerte der beiden Eigenschaften. Das ist ungewöhnlich. Aber noch mal ganz von vorne.

Weiterlesen

Unterrichten: Was man von Einsteigern lernen kann ….

Ich gebe immer wieder mal Einstiegskurse in HTML, CSS oder auch in PHP. Und es ist immer wieder spannend und – auch für mich – lehrreich. Dass ich dabei so viel lernen kann, musste ich auch erst einmal kapieren.

Ganz zu Anfang meiner Trainingstätigkeit habe ich sogar den Einstieg ins Internet vermittelt. Dabei habe ich mühsam versucht, den Teilnehmern den Unterschied zwischen einer Internet-Adresse und der Suche in einer Suchmaschine beizubringen. Die tippten einfach in die Adresszeile die Suchbegriffe oder in das Feld der Suchmaschine die Adresse.

Weiterlesen

isolation: isolate: Das Vermischen bei den Blendmodi genau steuern (CSS3)

will it blend?

Gute Nachricht: Firefox 36 unterstützt die Eigenschaft isolation bei den Blendmodi. Das habe ich zum Anlass genommen, meinen Artikel zu isolation: isolate vom Juni 2014 zu aktualisieren.

In den beiden bisherigen Teilen meiner Artikelserie habe ich schon die Eigenschaft background-blend-mode und mix-blend-mode vorgestellt. Jetzt fehlt noch die Eigenschaft isolation. Bei der Eigenschaft geht es um die Frage: Mit welchen Elternelementen finden Vermischungen statt, wenn man mix-blend-mode verwendet?

Weiterlesen

CSS-Pseudoelemente der nächsten Generation

W3C Pseudo-Elements Module Level 4

Das W3C hat den Arbeitsentwurf für die CSS-Pseudoelemente überarbeitet. Ich war gespannt, welche Pseudoelemente wir in Zukunft benutzen können und habe einmal reingeschaut. Neben klassischen, schon lange bekannten Pseudoelementen findet sich im Arbeitsentwurf Nützliches wie ::selection oder ::placeholder, die bereits (teilweise in leicht modifizierter Variante) in den aktuellen Browsern funktionieren.

Im meinen Beitrag geht es neben diesen neuen Pseudolementen außerdem um die klassischen Pseudoelemente, um doppelte und einfache Doppelpunkte und um die Darstellung der Pseudoelemente in Browserentwicklertools.

Weiterlesen

Besser als display: none – Inhalte auf Smartphones richtig ausblenden

Beim responsiven Webdesign geht man üblicherweise von einer HTML-Basis aus, die Anpassungen an die unterschiedlichen Viewportbreiten finden über Media Queries, d.h. über CSS statt. Das Problem dabei ist, dass auf einem klassischen Desktop-Monitor wesentlich mehr Platz zur Verfügung steht, als bei einem klassischen kleinen Smartphone-Screen.

Wenn Inhalte auf einem Smartphone einfach keinen Platz finden, greift man gerne zu display: none, um Inhalte gezielt auf einzelnen Endgerätegruppen auszublenden. Das hat jedoch so seine Nachteile. Wer sagt beispielsweise, dass Nutzer von kleinen Screens bestimmte Informationen nicht brauchen?

Weiterlesen

7 Tipps für die Arbeit mit CSS-Shapes

CSS-Shapes ermöglichen es, Inhalte nicht-eckig umfließen zu lassen. Eine Kurzeinführung gibt es hier im Blog, eine ausführlichere Behandlung bietet ein schöner Artikel von maddesigns oder mein Offline-Artikel für die Zeitschrift web & mobile-Developer, der in der Ausgabe 1/2015 erscheint.

Hier hingegen handelt es sich nicht um eine Einführung, stattdessen habe ich ein paar Tipps für die Arbeit mit CSS-Shapes gesammelt. Darunter sind auch Dinge, über die ich bei meinen eigenen Experimenten erst einmal gestolpert bin.

Weiterlesen