Katie Melua - Love And Money (2023)
Mobile First Testseite
Ein Hamburger Menu, eine fixe Navigation im Header beim Scrollen (position: sticky;) alles Responsive und nach dem "Mobile First" Prinzip.
Mobile First
Wenn ich den Bahnhof richtig verstanden habe, bieten sich hier viele Vorteile ggü. dem "Graceful Degradation" Prinzip. Zum einen erreichen wir bei mobilen Geräten eine bessere Geschwindigkeit und wir erhalten eine optimale Darstellung für alle Geräte.
Start with the small screen first
Jetzt heißt es eben nur Umdenken, denn die Umsetzung von Mobile First + Progressive Enhancement ist doch etwas ähhh... Aufwändiger ;)
CSS xxx-of-type
Um z.b. nur dem letzten "p" Element in einem Container eine CSS-Eigenschaft zuzuordnen, kann man folgenden Code verwenden.
article p:last-of-type {
padding-bottom: 1rem;
}
Oder nur dem ersten.
article p:first-of-type {
padding-top: 2rem;
}