Ein Grund, warum sich Flexitems, die in einer Reihe dargestellt werden, anders verhalten als Elemente, die beispielsweise gefloatet werden, liegt auch an der initialen Angabe von min-width. min-width bestimmt die Mindestbreite, soweit klar. Aber die Wirkung ist bei normalen Blockelementen anders als bei Flexitems. Dazu und wie man mehrere Flexitems auf dieselbe Breite bekommt ….
subgrid – das Wichtigste zum neuen Spieler bei CSS-Grid
subgrid ist als zusätzlicher Wert bei grid-template-columns oder grid-template-rows möglich. Dieser Wert war ursprünglich in CSS Grid Layout Module Level 1 vorgesehen, wurde dann aber in CSS Grid Layout Module Level 2 verschoben. Es hilft bei der Darstellung von verschachtelten Rastern und ist deswegen bei der Arbeit mit CSS Grid seeehr nützlich. Weiterlesen
Offtopic: Warum ich bei den Parents4Future bin
Ich unterstütze die Parents4Future. „Wir sind ein freier Zusammenschluss von erwachsenen Menschen und stehen als Parents For Future in Solidarität zur Fridays-For-Future-Bewegung. … Die Gruppe ist offen für ALLE erwachsenen Unterstützer*innen – ob sie nun selbst Kinder haben oder nicht.“
Seit Kurzem bin ich bei den Demonstrationen jeweils am Freitag dabei. Die Klimakrise hat mir schon länger Sorgen gemacht und ich versuche, meinen C02-Fußabdruck zu reduzieren (lebe vegan, kaufe vermehrt regional/saisonal, fliege möglichst wenig, vermeide Müll und Verpackungen).
Letztens gab es dann aber den Punkt, wo mir klar wurde, dass das nicht reicht.
Videotraining: Webservices mit PHP
Gerade ist mein Videotraining “Webservices mit PHP” bei LinkedIn-Learning erschienen. Im Training geht es um die wichtigsten Grundlagentechniken – von XML, JSON bis hin zu HTTP – und um zwei Varianten von Webservices, nämlich SOAP und REST. Bei beiden wird gezeigt, wie man einen Client und einen Server programmiert.
grid-gap und justify-content/align-content
Bei meinem Grid-Workshop auf den HTML & CSS Days in München kam die Frage auf, wie sich die Abstände zwischen den Rasterzellen – grid-gap – verhalten, wenn zusätzlich die Ausrichtung beispielsweise mit justify-content und align-content festgelegt wird. Hier sind die Details.
fit-content und fit-content()
Ich schreibe gerade an einem Artikel zu den Möglichkeiten, die Ausmaße in CSS zu bestimmen für die Zeitung web&mobile developer und dabei bin ich über fit-content gestolpert, das einiges Verwirrendes beinhaltet. Weiterlesen
Einsteigen in PHP 7 und MySQL mit meinem neuen Buch
Noch im Dezember 2018 – nur zwei Wochen nach der Veröffentlichung von PHP 7.3 – ist die fünfte, überarbeitete Version meines PHP-Einstiegbuchs im dpunkt.verlag erschienen.
Für die fünfte Auflage habe ich alles grundlegend überarbeitet.
Weiterlesen
CSS Grid: Automatisches responsives Raster mit Lücken
Mit CSS-Grid lassen sich dank der magischen Formel repeat(auto-fill, minmax()) sehr gut Raster erstellen, die sich automatisch an alle Viewportgrößen anpassen, die Spaltenzahl wird dabei nach Bedarf ermittelt. Dabei werden die Elemente automatisch auf das Raster verteilt in der Reihenfolge, in der sie im Quellcode stehen. Keine Rasterzelle wird dabei ausgelassen. Was macht man, wenn aber genau das gewünscht ist? Also:
- ein flexibles responsives Raster
- mit Lücken
- aber ohne Media Queries
fest – flüssig – responsive – adaptive
Meine Erfahrung nach sind Layoutarten wie fest, flüssig, responsive oder adaptive gerade für Einsteiger schwer zuzuordnen. Deswegen habe ich jetzt einmal Minimalbeispiele gebastelt, die nur diese Begriffe verdeutlichen sollen. Um die Unterschiede nachvollziehen zu können, muss man das Browserfenster schmaler ziehen. Und ich habe eine Vereinfachung durchgeführt: ich zeige die unterschiedlichen Layouttypen nicht an vollständigen Layouts, sondern stelle jeweils zwei Bereiche gegenüber, die das unterschiedliche Verhalten deutlich machen. Weiterlesen
min-content, max-content und grid-template-rows bei CSS Grid
min-content und max-content sind sehr praktisch beim CSS-Grid-Layout zur Definition von Rasterspalten. Was aber bewirken sie genau bei der Definition von Rasterzeilen? Weiterlesen