❕❔4 CSS-Tricks, die jeden Shop aufwerten

Auch bei CSS ist aller Anfang schwer, wie bei jeder anderen Programmiersprache.

Es gibt Selektoren, Spezifität, Cascaden, die allseits bekannte Responsivität, Grid oder auch Flexbox.

Wie man sieht, sehr viel Input, wenn es darum geht eine Programmiersprache zu erlernen. Man muss halt wirklich wollen. 
Wir stellen hier noch weitere Tipps und "good-to-knows" vor.

Braucht man immer wieder, kann sich aber fast niemand merken – wie richte ich ein Element mittig aus? Ob Bild oder Text, egal.

img {
display: flex;
justify-content: center;
align-items: center;
}

Um Besucher über einen Button auf ein Segment eurer Website zu führen, kann man auf das href-Attribut zurückgreifen. Damit die "User-Experience" etwas smoother wird.

scroll-behaviour: smooth;

Aber bitte nicht dieses Feature vergessen. Aus Gründen der Barrierefreiheit sollte man hierbei darauf achten, dass man mittels CSS-Media-Query-Features prefers-reduced-motion einen Fallback für Nutzer anbietet, die empfindlich auf animierte Inhalte reagieren können. 

@media (prefers-reduced-motion: reduce)

Um ein Bild genau an der Stelle einzupassen, wo man es haben möchte, einfach folgende Zeilen verwenden.

img {
max-width:100%;
height:auto;
}

Die elegantere Alternative wäre, sich der CSS-Eigenschaften object-fit und object-position zu bedienen. Ähnlich wie man über die background-position– respektive background-size-Property auf Größe und Position von Hintergrundbildern einwirken kann, wirken sie auf den content von  oder  ein.

Diese Eigenschaft definiert, wie ein Element, zum Beispiel ein Bild, sich innerhalb der Größenverhältnisse seiner Content-Box verhält. Es erlaubt euch zum Beispiel, festzulegen, dass es seine Seitenverhältnisse beibehalten oder in eine bestimmte Richtung allen verfügbaren Platz einnehmen soll.

Ein Beispiel: Die Content-Box eines Bildes wird festgelegt durch seine width– und height-Properties. Zum Beispiel:

img {
width: 200px;
height: 300px;
}

img {
width: 400px;
height: 250px;
}

Um die Seitenverhältnisse zu wahren und trotzdem den verfügbaren Raum auszufüllen, kann man auf object-fit: cover; zurückgreifen.
Die Eigenschaft bewirkt, dass Elemente nicht länger gestaucht oder gestreckt werden, sondern stattdessen entsprechend der verfügbaren Content-Box gecroppt.
Klingt nicht so spannend? Ist es aber. Gerade im Zusammenspiel mit verschiedenen Viewport-Größen kann die Property eine echte Hilfe sein.

Mit object-position kann man Bildausschnitte in den Fokus rücken. Um diese CSS-Eigenschaft nutzen zu können, muss man außer der Größenverhältnisse des zu manipulierenden Bildes auch die object-fit-Property gleich none setzen:

img {
background: purple;
height: 200px;
object-fit: none;
}

img {
background: purple;
height: 200px;
object-fit: none;
object-position: 50% 50%;
}
}

Um das Objekt innerhalb seiner Content-Box nach links oder rechts zu verschieben, kann man den ersten Value von object-position anpassen, für Positionsänderungen nach oben oder unten sorgt der zweite.