7 CSS-Tricks für eure Website

7 CSS-Tricks für eure WebsiteCascading Style Sheets, oder kurz und einfach CSS, ist eine sogenannte Stylesheet-Sprache. Sie sorgt im Webdesign dafür, dass Websites besonders ansprechend aussehen. Mit CSS wird eine Website also erst zum Leben erweckt, Text wird formatiert, ein Button bekommt Effekte und Formulare hübsche Eingabefelder und Animationen.

Mit CSS ist vieles möglich und die meisten unterschätzen dabei, wie umfangreich die Möglichkeiten am Ende wirklich sind. Es gibt eine Menge CSS-Befehle, die weitgehend unbekannt sind.

Um solche CSS-Tricks soll es heute gehen. Codeschnipsel, die viele gar nicht kennen, die beim Design der eigenen Website aber eine Menge bewirken können.

7 CSS-Tricks für eure Website

  1. Weiches Scrollen zu Anker-Links

    Sogenannte Anker-Links, also Links auf einer Seite, die auf eine bestimmte ID bzw. Stelle im selben Dokument verlinkt werden, waren schon immer ein fester Bestandteil von Websites. Zum Beispiel in einem Inhaltsverzeichnis, bei dem jeder Link auf die ID der jeweiligen Überschrift verlinkt wird. Oder bei besonders langen Websites, wo ein Button im unteren Eck dafür sorgt, dass Nutzer immer wieder direkt nach oben springen können.

    Das Problem bei solchen Links ist, dass der Sprung in der Regel sehr hart ausfällt, weshalb er in der Vergangenheit oft mit Javascript animiert wurde. Mit »scroll-behavior« lässt sich das nun auch via CSS realisieren. Gemeint ist damit ein weiches Scrollen, an die jeweilige Stelle im Dokument.

    Mit dem Befehl »scroll-behavior:smooth« werden all diese Sprünge, die direkt zum Anker führen, also butterweich animiert. Nur mit CSS und komplett ohne zusätzliches Javascript. Unterstützt wird der Befehl allerdings nur in Chrome und Firefox, in Safari verbleibt der Sprung also ohne Animation.

  2. Amazon Links automatisch markieren

    »:after« und »:before« sind in CSS sogenannte Pseudoklassen, die genau das machen wonach sie klingen. Im Grunde existieren sie nicht als solches, sondern ergänzen etwas anderes, indem sie Inhalte vor oder eben nach einem Element einfügen. Das kann ein Icon hinter einem Link sein, ebenso wie ein stilistisches Element.

    Was viele nicht wissen ist, wie umfangreich Pseudoklassen genutzt werden können. Wer sie geschickt einsetzt, kann ganze Abschnitte, ohne weitere Klassen oder ID’s gestalten. Außerdem gibt es eine ganze Palette an Möglichkeiten, wie etwa »:first-of-type« und »:not(:first-of-type)«.

    Wer CSS wirklich beherrschen möchte und auf unnötige ID’s in seinem Code lieber verzichtet, sollte sich die gesamte Palette an Pseudoklassen mal genauer ansehen. Mit ihnen lässt sich vieles realisieren, was ohne nur über Umwege möglich wäre.

    Zum Beispiel könnte man so alle Links zu Amazon.de automatisch mit einem Sternchen versehen, um sie als Affiliatelink zu markieren. Dafür gibt es gleich noch einen weiteren spannenden CSS-Befehl, um nur die URL’s anzusprechen, die Amazon.de enthalten.

    a[href*="amazon.de"]:after { content:"*"; }

  3. 7 CSS-Tricks für eure Website-webkit-touch-callout

    Mobile First ist wichtig geworden, doch viele vergessen, dass der Touch auf dem Smartphone eben kein Klick mit der Maus ist. Soll heißen: Der Touch auf einen Button sorgt hin und wieder dafür, dass der Text auf diesem markiert wird. Dumme Sache.

    Mit »-webkit-touch-callout:none« lässt sich das Verhalten verhindern, sodass unter iOS und Safari kein Callout mehr aufgerufen wird, also keine Box mit Auswahlmöglichkeiten erscheint. Das passiert immer mal wieder aus Versehen, wenn ein Button zu lange gedrückt wird.

    Da dies in der Regel, zumindest auf Buttons und ähnlichen Elementen, aber nicht erwünscht ist, kann es mit »-webkit-touch-callout« verhindert werden. Sollte es auch, denn es nervt.

  4. Darstellung von Text beschleunigen oder verbessern

    Einer meiner Lieblingsbefehle in CSS, der allgemein viel zu selten zum Einsatz kommt, ist »text-rendering«. Kurz gesagt erlaubt »text-rendering« euch festzulegen, ob bei der Anzeige von Schrift die Performance oder die Genauigkeit bevorzugt werden soll. Folgende Angaben sind möglich.

    text-rendering: auto;
    text-rendering: optimizeSpeed;
    text-rendering: optimizeLegibility;
    text-rendering: geometricPrecision;

    Die Optionen sind dabei selbsterklärend. Bei »auto« wählt der Browser die beste Methode. »optimizeSpeed« bevorzugt ganz klar die Performance. »optimizeLegibility« bevorzugt die Legibility, also die Lesbarkeit und »geometricPrecision« achtet genau auf die optimale Umsetzung von Kerning und Co.

    Sichtbar wird das »text-rendering« vor allem bei großen Fonts. Allgemein ist das Ergebnis aber bei jeder Font unterschiedlich, beeinflusst aber vor allem das Kerning, also den Abstand der einzelnen Buchstaben, damit diese möglichst gleichmäßig und natürlich aussehen.

  5. Mehrere Spalten im Text realisieren

    Kaum genutzt, doch super einfach und praktisch einsetzbar, sind die CSS Columns, also Spalten. Da braucht es kein Flexbox oder Grid, um ein Design mit mehreren Spalten zu realisieren, da CSS dies für einfache Elemente bereits beherrscht. Der Befehl ist ebenfalls simpel und wird von allen Browsern unterstützt.

    Am besten ist, ihr erstellt euch eine eigene Klasse und weist dieser dann Spalten zu. Oder gleich eine ganze ganze Liste an Klassen, um sie im Code einfach nutzen zu können. Zum Beispiel so wie ich es hier handhabe.

    p.col-2 {column-count:2}
    p.col-3 {column-count:3}
    p.col-4 {column-count:4}

    Damit lässt sich in HTML dann simpel und schnell der Befehl »<p class="col-2">« einsetzen, um den Text entsprechend zu gliedern. Das ist einfach und lockert lange Texte spürbar auf. Wer möchte, kann seine Texte damit deutlich aufregender gestalten.

  6. Ränder und Padding zur Breite zählen

    Anfänger haben bei der Gestaltung ihrer Website häufig das Problem, dass sie einem Element einen Rand zuweisen, dieser Rand dann aber über die Gesamtbreite hinausgeht. Das liegt daran, dass der Rand in CSS nicht automatisch mit der Breite zusammenhängt. Ebenso wie das Padding. Mit »box-sizing« wird genau das erzwungen.

    box-sizing: content-box;
    box-sizing: border-box;

    Bei »content-box«, was übrigens Standard ist, werden Padding und Border nicht zur Breite und Höhe hinzugerechnet. Ein Rand ragt also über die 100% Breite hinaus. Um das zu vermeiden, gibt es »border-box«. Damit ist bei der vollen Breite eines Elements, auch das Padding und der Rand bereits mit eingerechnet, es ragt also nichts über die Gesamtbreite hinaus.

    Ein kleiner Befehl, der Anfänger aber oft verzweifeln lässt. Sie gestalten häufig ein Element und verstehen dann nicht, warum der Rand immer wieder überlappt. Oft habe ich schon gesehen, wie dann die Breite selbst verringert wird, damit es irgendwie passt. Das führt beim Skalieren, vor allem Mobil, dann aber zu unschönen Fehlern in der Darstellung.

  7. Elemente ein anderes Aussehen vorgaukeln

    Mit »appearance« lassen sich Elemente mit einem Aussehen belegen, welches gar nicht für sie gedacht ist. So kann ein einfacher Link zu einem Button verwandelt werden, weil dem Browser gesagt wird, dass dies kein Link, sondern ein Button ist. Ebenso könnte man einem Input-Feld sagen, dass es gar keins ist, um die Gestaltung nur bei besonderen oder speziellen Feldern einzusetzen.

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    Mit »none« wird das Element nicht so dargestellt, wie es im System üblich wäre. Ansonsten sind die Werte frei setzbar. Von »button« bis »checkbox« oder »searchfield« ist also alles möglich.

Einfach mal selber probieren

CSS ist inzwischen ziemlich mächtig geworden. Wo es früher noch klare Grenzen gab, sind mit CSS inzwischen auch butterweiche Animation möglich, genau wie ein weiches Scrollen zu Anker-Links, was einst nur mit Javascript realisiert werden konnte. Das ist ziemlich aufregend, weil CSS einfacher ist und deutlich weniger Ressourcen frisst.

Ob ein Befehl in allen Browsern unterstützt wird, könnt ihr bei Caniuse.com prüfen. Die Website hatte ich euch schon öfter Empfohlen. Sie ist eine super Anlaufstelle, um einzelne Befehle auf ihre Kompatibilität hin zu prüfen.

Ansonsten empfehle ich, die Befehle von oben einfach mal selbst auszuprobieren. Baut sie doch mal in eine Testseite ein und spielt ein wenig mit den Möglichkeiten herum. Ob ihr es nutzen wollt oder nicht, es hilft dabei die Dinge besser zu verstehen.

Habe ich noch etwas vergessen?

Schreibt mir euren CSS-Lieblingsbefehl in die Kommentare.

13 Gedanken zu „7 CSS-Tricks für eure Website“

  1. Hallo David
    Ich nutze seit ein paar Jahren das DIVI Theme. Darin kann ich viele der Dinge tun, die du oben angesprochen hat. Aber das Theme ist mir zu aufgeblasen. CSS kann ich nur sehr rudimentär. Aber das scheint mir ein gute Alternative sein.
    Kennst du ein sehr simples und sehr schnelles aber auch gepflegtes kostenloses Theme
    und jetzt kommt es.
    Mit einer umfangreichen “Schulungs CSS Datei” also mit Kommentaren drin, was man alles damit machen kann. Einfach nach dem Motto learning bei doing.
    Welches CSS-Buch würdest du empfehlen – für schnelle Erfolge, für Anfänger, einfachst, simpel etc.

    Das Ziel: einen super schnellen ONE-Pager (+5 extra Seiten) ohne aber auf wordpress verzichten zu müssen. Alle styles per css selber machen.

    Dein Spaltenbeispiel fand ich schon toll. Das sind solche Sachen, wieso man sich die DIVIs und Co. Themes kauft.

    Ich habe gerade meine ersten Gehversuche mit dem Gutenberg-Editor gemacht. Der kann auch wieder noch mehr, bald braucht man keine Divi-Builder oder ähnliches mehr.

    Toller Beitrag.

    • Bücher finde ich in dem Bereich immer schwer. Meist viel zu teuer und beim Release schon veraltet, außerdem alles im Netz verfügbar. Würde ich also, auch wenn ich selbst Bücher schreibe, nicht unbedingt empfehlen.

      Ein Theme mit Schulungs CSS wirst du nicht finden. Grundsätzlich sind die meisten WordPress Themes aufgebläht, einfach weil sich möglichst viele Features, Animationen und Funktionen leider gut verkaufen, auch wenn sie grauenhaft programmiert wurden oder die Performance zerstören.

      Mein Tipp sind hier immer Minimal Themes. Die haben kaum Ballast und laufen perfekt und auf ihnen kann man gut aufbauen und lernen. Oder halt ein sogenanntes Starter-Theme, bei dem du dir selbst nach und nach alles ermöglichst.

      Lernen kannst du aber nur, wenn du direkt ausprobierst. Erstell dir einen lokalen Test Blog und spiel dort herum… dann sammelst du Erfahrungen und Verständnis.

      Grundsätzlich muss ich aber am Ende die Frage in den Raum werfen: Wenn du eine Landing Page mit fünf Unterseiten willst, warum muss oder sollte es dann WordPress sein? Das ist wieder wie Porsche fahren, obwohl du direkt neben der Arbeit wohnst.

    • Kleiner Nachtrag. Meine eigenen Minimal WordPress Themes (https://dkeu.de/wordpress-themes/) habe ich jetzt kostenlos veröffentlicht. Die sind so rudimentär, dass du das Meiste einfach sofort verstehst, gut ausprobieren und testen kann. Schau sie dir mal an. Vielleicht baue ich jetzt doch nochmal ein Lern-Theme… finde die Idee irgendwie gut.

  2. Hey David,

    ich habe bei deinem Artikel zum Verkauf deiner Webseite eine Frage gestellt, aber der ist schon etwas älter und wahrscheinlich bekommst du es dann nicht mehr mit.

    Du hast gemeint, in ein paar Webmaster-Foren hast du gute Angebote für deine Webseite erhalten. Kannst Du da ein paar nennen?
    Weil ich habe nach solchen Foren gesucht, aber am schwarzen Brett dort bewegt sich so gut wie nichts. Daher dachte ich, dass du vielleicht in anderen unterwegs warst?

    • Da möchte ich ungern etwas nennen, da ich mich schwer tue Empfehlungen auszusprechen, ohne auf den Plattformen mehr Zeit verbracht zu haben. Wie gesagt… wenn deine Website Potenzial hat, werden sich überall Leute melden. Viele Websites sind allerdings theoretisch etwas wert, in der Praxis wird man aber keinen Käufer finden. So groß ist das Interesse einfach nicht, wenn die Werte nicht wirklich gut und belegbar sind.

  3. Hallo David

    Das mit den Büchern habe ich mir fast schon gedacht, war aber dennoch ein Versuch wert. Schade, dass es kein Schulungs-CSS gibt, das wäre bestimmt eine tolle Sache.

    Minimal Themes schaue ich mir noch mal an. Du meinst vermutlich die dessign.net themes, die teileweise ursprünglich von fastwp stammen.

    Das mit dem Porsche stimmt schon, aber wie das so ist, wenn eine Nische richtig gut läuft und man plötzlich feststellt, das einem das Thema doch mehr Spaß macht, dann ist wp eben immer noch schön.

    Klar, ein Onepager wie risikolebensversicherungen.com wäre schon eine coole Sache, aber das zu lernen ist leider nicht in 3 Tagen gemacht.

    wp ist wohl auch eine Sache von Bequemlichkeit. Zumindest solange alles funktioniert.

    Na ja, vielleicht finde ich noch eine sinnvollere Lösung. Ich habe das Gefühl, dass seit 2 Jahren viele Webmaster immer wieder überlegen, ob es ein besseres System gibt und bleiben doch oft bei wp.

    Alexander

    • Genau! Auf den Themes von Dessign kannst du wunderbar aufbauen. Die sind nämlich minimal, laufen recht gut und lassen sich entsprechend einfach erweitern. Bin ein großer Fan davon. Das große Problem von WordPress Themes ist und bleibt nämlich, dass sie unsauber mit allerlei Features vollgestopft werden, um mit möglichst viel Funktionen werben zu können.

      Jeder wie er mag. Ich bin bei einem Flat File CMS gelandet und vermisse WordPress keine Sekunde. Das war einfach soooooo fett. Wenn du es losgeworden bist, ist das ein Gefühl, als ob du ein Jahr Diät überstanden hast 😛 und dein Server fühlt sich glaube ich auch so 🙂 Aber es ist halt einfach und solange es für dich funktioniert, nutze es weiterhin. Die Plugins sind für viele ja DAS Argument.

  4. Vielleicht magst du bei “Weiches Scrollen zu Anker-Links” noch die info ergänzen, dass der Befehl zum Ziel gehört, nicht zum Link.
    Ich habe es erst am Link notiert und da passierte nichts.
    Oder man packt den Befehl zum Tag “body”, dann erwischt man eh alle

  5. Hallo David,
    danke für deine Auflistung. Da waren doch noch ein paar Schätze dabei, die ich noch nicht kannte. Insbesondere das ‘-webkit-touch-callout’ war mir noch unbekannt.
    Schönen Gruß

Schreibe einen Kommentar