7 CSS Tricks / Tipps, Schatzkiste

7 nützliche CSS-Tipps

Ob Webshop, umfangreiche Webseite oder kleiner Blog – eines haben sie alle gemeinsam: CSS ist für den Look des Auftrittes zuständig. Daher gehört das Entwickeln von CSS-Templates immer zur Web-Entwicklung dazu. Denn erst CSS bringt das statische Design in „Webform“.

Entwickler sollten CSS beherrschen wie eine zweite Muttersprache, damit die Entwicklung der CSS-Templates qualitativ hochwertig und effektiv umgesetzt werden kann. Um mit den ständigen Weiterentwicklungen der Auszeichnungssprache mitzuhalten, öffnen wir in diesem Blog-Beitrag unsere Trickkiste und stellen 7 CSS-Tipps vor.

vw, vh, vmin & vmax

Die „Neuen“ unter den Längenmaßen bieten gerade für responsive Templates viel Flexibilität. Die Längenmaße spiegeln die Maße des aufrufenden Bildschirms wieder. Gerade die Einheit vh bringt daher viel Erleichterung, da die Höhe über %-Angaben nur eingeschränkt auf den aufrufenden Nutzer angewendet werden kann. Dadurch kann z.B. eine Box exakt auf die Höhe und Breite des aufrufenden Displays angepasst werden. Aber auch flexible Schriftgrößen sind damit möglich. Die Browser-Unterstützung ist in allen aktuellen Browsern gegeben. Nur der Internet Explorer und der Edge-Browser unterstützen diese Einheiten nur partiell.

Nähere Informationen und Anwendungsbeispiele zum Thema vw und vh.

calc()

CSS kann mit der Funktion calc() rechnen – schon lange. Alle Browser unterstützen diese CSS-Funktion mittlerweile (Can I use calc()). Doch gerade in Verbindung mit den Längenmaßen vh und vw eröffnet diese Funktion dem Entwickler neue Möglichkeiten. Mit calc() können flexible Maße wie % oder vh mit statischen Maßen wie px verrechnet werden.

Ein kleines Beispiel:

Eine responsive Webseite nimmt immer 100% der Bildschirmbreite (100vw) ein. Es gibt eine große linke Inhaltsspalte und eine schmalere rechte Spalte. Dabei hat die rechte Spalte eine feste Breite von 280px, die linke große Spalte soll sich entsprechend anpassen. Mit calc() ist es kein Problem die entsprechende Breite für die linke Spalte zu berechnen:

.container-left {
    width: calc(100vw - 280px);
}

.container-right {
    width: 280px;
}

Addition (+), Substraktion (-), Division (/) und Multiplikation (*) sind möglich.

@supports

Neue CSS-Eigenschaften wie „Transitions“ oder „Flexbox“ können nie ohne Einschränkungen direkt angewendet werden. Es benötigt immer eine gewisse Zeit, bis alle Browser die neuen Eigenschaften auch unterstützen und darstellen können. Einige Browser sind damit schneller, Andere brauchen etwas mehr Zeit. Daher müssen neuere CSS-Eigenschaften oft mit Fallback eingesetzt werden. D.h. es muss definiert werden, was passieren soll, wenn ein Browser die neue eingesetzte CSS-Eigenschaft nicht unterstützt.

Dazu kann die Regel @supports verwendet werden. Alle Browser (außer der Internet Explorer) unterstützen diese Regel (Can I use @supports). So wird vor dem Einsatz einer „kritischen“ CSS-Eigenschaft erst abgefragt, ob diese überhaupt unterstützt wird. Ebenso kann auch @supports not eingesetzt werden. Auch umfangreiche Abfragen sind mit „and“ und „or“ möglich.

@supports (hyphens: auto) {
    body {
        hyphens: auto;
    }
}

@supports ((transition-property: color) or (animation-name: foo)) 
          and (transform: rotate(10deg)) {
    // ...
}

Durch diese CSS-Regel kann der Einsatz von umfangreichen JavaScript-Bibliotheken wie „Modernizr“ entfallen.

Kombinatoren & Attributselektoren

Wer die Kombinatoren und Attributselektoren von CSS kennt, spart in der Entwicklung von CSS-Templates viel Zeit. Die Syntax ist einfach aber erweitert die Möglichkeiten der Entwicklung ungemein. Eine Übersicht:

Nützliche Kombinatoren:

p > a {
    // steuert alle Kindelemente (a-Tags) erster Ebene des p-Tags an
}

p + a {
    // steuert das direkte Nachbarelement (a-Tag) des p-Tags an
}

p ~ a {
    // steuert alle folgenden Geschwisterelemente gleicher Ebene (a-Tags) des p-Tags an
}

Nützliche Attributselektoren:

input[type="email"] {
    // steuert nur E-Mail-Inputfelder an
}

img[title~="clickstorm"] {
    // steuert alle img-Tags an, die im title-Attribut die mit Leerzeichen getrennte Zeichenkette "clickstorm" enthalten
}

a[href^="https://"] {
    // steuert alle a-Tags an, die zu einer URL beginnend mit "https://" verweisen
}

a[href$=".pdf"] {
    // steuert alle a-Tags an, die zu einer URL endend mit ".pdf" verweisen
}

a[href*="clickstorm.de"] {
    // steuert alle a-Tags an, die die Zeichenkette "clickstorm.de" enthalten
}

Es lohnt sich einen Blick auf die vollständige Selektoren-Übersicht zu werfen.

:target

Die Pseudoklasse :target wird gesetzt, wenn ein bestimmter Bereich der Webseite mit einem Ankerlink (z.B. #details) angesprochen wurde. So kann das CSS je nach aufgerufenem Anker anders aufgebaut werden. Das macht z.B. Bilder-Gallerien oder mobile Navigationen ohne JavaScript möglich.

HTML:

<a href="#mobile-nav">Link öffnet mobiles Menü</a>

<div id="mobile-nav">
    <!-- Mobiles Menü -->
</div>

CSS:

#mobile-nav {
    display: none;
}

#mobile-nav:target {
    display: block;
}

Wird auf den Link geklickt, wird der URL der Anker #mobile-nav hinzugefügt. Das CSS sorgt dann dafür, dass das mobile Menü geöffnet wird, wenn der Anker aufgerufen wurde.

Die Pseudoklasse :target ist in allen Browsern unterstützt.

Syntax der Pseudoelemente

CSS stellt einige Pseudoelemente (nicht verwechseln mit Pseudoklassen) zur Verfügung. Dabei werden die Pseudoelemente ::before und ::after sehr häufig eingesetzt. Bei der Entwicklung fällt auf, dass es zwei Schreibweisen gibt: mit einem vorangestellten Doppelpunkt (:) oder mit zweien (::). Dabei ist die Regelung klar: der einfache Doppelpunkt ist eine veraltete Schreibweise von CSS Level 1 und 2. Diese wird zwar ebenfalls von allen Browser unterstützt, allerdings nur aus Gründen der Abwärtskompatibilität.

a::before {
    content: "> ";
}

Wer also moderne CSS3-Templates entwickelt, sollte die Schreibweise mit doppeltem Doppelpunkt nutzen.

Flexbox

Lang ersehnt wird nun das flexible Box-Layout Flexbox von allen Browsern mehr oder weniger gut unterstützt. Es kann somit mittlerweile gut in Kundenprojekten angewendet werden. Mittels Flexbox lassen sich mit wenigen Handgriffen Spalten in unterschiedlichsten Anordnungen darstellen. Flexbox bietet somit mit einem überschaubaren Vokabular große Flexibilität mit wenigen Zeilen Code.

Wir haben bereits im letzten Jahr einen ausführlichen Beitrag über den Einsatz von Flexbox verfasst. Hier erhalten Sie einen guten Überblick über den Einsatz, die Vorteile und Möglichkeiten.

Fazit

Wer in der CSS-Entwicklung auf dem Laufenden bleibt, kann Zeit und Code sparen. Das macht zum einen die Template-Entwicklung effektiver, hält den Quellcode übersichtlicher und spart durch kürzeren Quellcode im Endeffekt Ladezeit. Zudem bringen neue Entwicklungen auch immer neue Funktionen mit, die ausgefallenere Webdesigns ermöglichen.

Sie suchen noch einen Partner für moderne CSS-Entwicklung? Sprechen Sie uns an.

 

Kommentar hinzufügen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert