4 CSS-Kniffe, die eure Website aufwerten – und euch das Leben leichter machen
Via CSS wird das Aussehen einer Website definiert. (Quelle: Zeynur Babayev / Shutterstock)
Aller Anfang ist schwer. CSS lernen ist da keine Ausnahme. Selektoren, Spezifität, die Regeln der Cascade, Responsivität oder Module wie Grid und Flexbox – das Feld ist riesig, den Umgang mit der Programmiersprache zu lernen ein Vorhaben, das man wirklich wollen muss. Frameworks wie Bootstrap, Materialize oder Tailwind machen zwar vieles einfacher, trotzdem lohnt es sich, neben grundlegenden Basics einige Kniffe zu kennen.
Elemente mittig ausrichten
Braucht man immer wieder, kann sich aber kaum ein Mensch merken – wie richte ich ein Element, zum Beispiel ein <p>, mittig aus? Dabei ist es eigentlich ganz einfach:
p {
display: flex;
justify-content: center;
align-items: center;
}
sind drei magische Zeilen CSS, über die ihr genau das erreicht.
Smoothes Scrollen
Um Besucher über einen Button auf ein anderes Segment eurer Website zu führen, könnt ihr auf das href-Attribut zurückgreifen. Damit die User-Experience etwas smoother wird, könnt ihr einfach ein
scroll-behaviour: smooth;
hinzufügen. Achtung: Aus Gründen der Barrierefreiheit solltet ihr hierbei darauf achten, dass ihr mittels des 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)
Bilder einpassen
Um ein Bild genau an der Stelle einzupassen, wo ihr es haben wollt, könnt ihr klassischerweise
img {
max-width:100%;
height:auto;
}
nutzen.
Die elegantere Alternative wäre, sich der CSS-Eigenschaften object-fit und object-position zu bedienen. Ähnlich wie ihr über die background-position– respektive background-size-Property auf Größe und Position von Hintergrundbildern einwirken könnt, wirken sie auf den content von <img> oder <video> ein.
object-fit
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;
}
Ändert ihr das jetzt aber beispielsweise zu
img {
width: 400px;
height: 250px;
}
ab, resultiert das in einer Verzerrung des Bildes – es nimmt einfach per Default allen verfügbaren Platz in seiner neuen Content-Box ein – ungeachtet seiner Darstellung.
Um die Seitenverhältnisse zu wahren und trotzdem den verfügbaren Raum auszufüllen, könnt ihr 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.
object-position
Mit object-position könnt ihr Bildausschnitte in den Fokus rücken. Um diese CSS-Eigenschaft nutzen zu können, müsst ihr 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;
}Der Default-Wert für
object-fit ist nämlich fill – auch wenn ihr den Property-Wert nicht explizit deklariert. Auch object-position verfügt über ein Default-Verhalten. Werden keine Werte angegeben, zentriert die Eigenschaft eure Elemente sowohl vertikal als auch horizontal.
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, könnt ihr den ersten Value von object-position anpassen, für Positionsänderungen nach oben oder unten sorgt der zweite.
Fazit
So könnt ihr mit wenigen Zeilen CSS schon eine ganze Menge erreichen, um eure Website optisch aufzuwerten. Für Kunstwerke à la Diana Adrianne Smith, die regelmäßig mit aufwendigen, komplett in CSS erstellten Gemälden aufwartet, reicht es zwar noch lange nicht, aber irgendwo muss man ja anfangen. Für mehr Inspiration sei euch der Codeschnipsel-Dienst codepen.io ans Herz gelegt.
stimmt schon leichter macht es das leben auf jeden fall wenn man nicht alle browser supportet…
caniuse is dein frOInd
Man lernt halt nie aus. Caniuse kannte ich noch nicht und macht das ganze definitiv einfacher zu überschauen.
Danke dafür :)