Archiv

Responsive Layouten mit Flexbox und mit Gridlayout – der Vergleich

Wer CSS3-Layouts sagt, meint meist Flexbox. Speziell zur Erstellung von Layouts ist aber eigentlich vom W3C das CSS Grid Layout Module vorgesehen. Was der Vorteil des neuen Gridlayout-Moduls ist, zeige ich meinem Beitrag zum Adventskalender der Webkrauts: Ihr erfahrt zuerst das Grundprinzip des Gridlayoutmoduls. Dann geht es um einen konkreten Vergleich von Flexbox und Gridlayout: Ihr seht, wie ihr mit beiden Layouttechniken ein HolyGraillayout umsetzen könnt und wie sich die beiden Techniken in ihrer Herangehensweise unterscheiden … zum Artikel Gridlayout vs Flexbox

 

Modernizr einsetzen – so gehts mit der Version 3

Modernizr

Modernizr ist unschlagbar, wenn du alternative Formatierungen für Browser durchführen möchtest, die ein bestimmtes neues HTML5/CSS3-Feature nicht verstehen. Die neue Version von Modernizr sieht auf den ersten Blick ganz anders aus als die gewohnte. Die Benutzung ist aber auch nicht komplizierter.

Wann braucht man aber überhaupt Modernizr? Wenn ein Browser ein CSS3-Feature nicht versteht, ignoriert er es einfach. In vielen Fällen ist das in Ordnung und du musst nicht mehr unternehmen. Wenn text-shadow nicht unterstützt wird, ist der Text halt ohne Schatten. Wenn jedoch der Textschatten entscheidend ist für die Lesbarkeit, muss man dafür sorgen, dass der Text auch noch lesbar ist, wenn ein Browser text-shadow nicht implementiert hat. Ein – extremes – Beispiel wäre, dass man einen weißen Text auf weißem Hintergrund deklariert, bei dem die Umrisse durch text-shadow gebildet werden. Weiterlesen

Microsoft Edge: CSS3-Unterstützung

Vielversprechend sind die Sachen, die Microsoft Edge CSS3-technisch zu bieten hat … und teilweise lange erwartet!

  • CSS3-Filter
  • bei 3D-Transformationen transform-style: preserve-3d (wichtig etwa für Würfel etc.)
  • das srcset-Attribut (entscheidend für responsive  Bilder)
  • SVG: foreignObject-Element
  • Media Queries Level IV: hover und pointer
  • Konditionale CSS-Regeln mit @supports

Mehr bei https://msdn.microsoft.com/

Zentrieren mit Flexbox – verschiedene Möglichkeiten

Zentrieren mit Flexbox

Mit dem neuen CSS3-Layoutmodul Flexbox lassen sich Elemente einfach zentrieren. Allerdings gibt es dafür unterschiedliche Ansätze: Entweder man verwendet zur Zentrierung die Eigenschaften align-items:center und justify-content: center oder aber man setzt dafür auf die altbekannte Eigenschaft margin.
Weiterlesen

Videotraining: Formulare erstellen und gestalten

Videotraining: Formulare mit HTML und CSSGerade ist mein neues  Videotraining zum Thema Formulare bei video2brain erschienen. Dabei geht es um die Basics der Formularerstellung per HTML, um Neuerungen aus HTML5 und schließlich um die Gestaltung von Formularen.
Weiterlesen

Flexbox und Tab-Reihenfolge

Eine schöne Sache an den neuen CSS3-Layoutmodul Flexbox (und ebenso auch bei GridLayout) ist, dass die Anzeigereihenfolge im Layout vollkommen unabhängig ist von der Reihenfolge der Elemente im Quellcode. Das ist besonders wichtig beim Responsive Webdesign – auf diese Art kann man jeweils nach verfügbarem Platz die Elemente immer optimal anordnen. Allerdings ist das problematisch für Tastaturnutzer.

Weiterlesen

CSS-Angaben vor dem Internet Explorer 8 mit Selektoren verstecken

Manchmal möchte man bestimmte Formatierungen vor älteren Internet Explorern verstecken. Im Beitrag zeige ich zwei Möglichkeiten, wie man Selektoren formuliert, dass sie vom IE8 ignoriert werden.

Eine Lösung besteht darin, den Selektor um Bestandteile zu ergänzen, die die älteren IEs (d.h. IE < 9) nicht verstehen – etwa durch :root.

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

Bildunterschrift an Bild anpassen mit min-content (inklusive IE)

Häufig möchte man, dass die Beschriftung zu einem Bild genauso breit wird wie das Bild selbst – und das soll möglichst natürlich auch dann funktionieren, wenn wir die Breite des Bildes nicht im Voraus wissen. Möglich wird das über den CSS3-Wert min-content. Und für den IE klappts über ein bisschen Trickserei mit Gridlayout.

Weiterlesen