WebDev

Wiki

CSS > Sonstiges

externe Links sind
mit ↗ markiert
Regionen
  • /*#region RegionName*/
    {CSS content}
    /*#endregion */
  • Damit kann man den CSS code in einklappbare Abschnitte unterteilen.
  • stevenfollis.com
all:
  • all: initial;
  • unset Das ausgewählte Element erbt alle vererbbaren Werte, die vom übergeordneten Element weitergegeben werden. Wenn kein vererbbarer Wert verfügbar ist, wird für jede Eigenschaft der Anfangswert aus der CSS-Spezifikation verwendet.
  • initial Setzt alle Eigenschaften des ausgewählten Elements auf ihre Anfangswerte zurück, wie sie in der CSS-Spezifikation definiert sind.
  • inherit Das ausgewählte Element erbt den gesamten Stil seines übergeordneten Elements, einschließlich Stilen, die normalerweise nicht vererbbar sind.
  • css-tricks/all
cursor (Mauszeiger)
  • cursor: pointer; | Form eines Fingers
  • cursor: help; | ? am Mauszeiger
  • cursor: wait; | Ladekreis als Mauszeiger
  • selfhtml/css/cursor
user-select
  • user-select: none; | Text kann nicht ausgewählt werden
  • user-select: text; | Text kann ausgewählt werden
  • user-select: all; | kann sichergestellt werden, dass zB alle Zahlen einer IBAN mitkopiert werden
  • mdn/css/user-select
pointer-events
  • pointer-events: none; | Jegliche click-, scroll– und hover-Events werden für das entsprechende Element abgeschaltet. Dazu gehören auch JavaScript gesteuerte click– oder tap-Events.
  • pointer-events: auto; | stellt das Standardverhalten wieder her
  • Man könnt verhindern, dass Bilder via Drag and Drop oder Rechtsklick > speichern unter vom Benutzer kopiert werden können. Über den Quellcode können die Bilder natürlich trotzdem heruntergeladen werden.
  • kulturbanause.de/pointer-events
Variablen
  • :root {--Name: Wert;} | Variablen sollten im root Verzeichnis angelegt werden
  • :root {--akzentfarbe: #4eb34a;} | Werte die häufig genutzt werden...
  • h3 { color: var(--akzentfarbe);} | ...können so schneller geschrieben werden da man sich diese nicht merken muss wie auch zB: rgb(78, 179, 74).
  • Variablen haben den Vorteil, das man so den Wert (in diesem Beispiel die h3 Farbe) für ein ganzes Projekt ändern kann.
  • Viele weitere Anwendungsbeispiele in den Links.
  • selfhtml/css/custom properties (CSS-Variablen)
  • mediaevent/css/variable
list-style
  • ul { list-style-type: none; } | Punkte oder Zahlen werden entfernt
    Achtung! wenn man die Zeichen entfernt, erkennt Safari die Liste nicht als Barrierefrei. Man kann dies verhindern indem man der ul oder ol role="list" im HTML oder mit ::before ein Zeichen hinzufügt.
    mdn/css/list-style
  • Bei ul-Listen: disc = Rund; circle = Kreis; square = Rechteckig
  • Bei ol-Listen: decimal = 1.,2.,3.; lower-roman = i.,ii.,iii.; upper-roman = I.,II.,III.; lower-alpha = a.,b.,c.; upper-alpha = A.,B.,C.
  • Mit Aufzählungszeichen (Unicode) lassen sich verschiedene Symbole einbinden.
    ✓ ✱
  • piliapp.com/bullet-point
  • list-style-position:
    inside; Aufzählungszeichen innerhalb des Listenelements, nur erste Zeile wird eingerückt
    outside;: Aufzählungszeichen außerhalb des Listenelements
    initial;: setzt Wert auf den Standardwert zurück
    inherit;: Wert wird vom Elternelement übernommen
  • ul { list-style-image: url(URL); } | eigene Grafik als Aufzählungszeichen
  • selfhtml/css/list-style
Maßeinheiten
  • physische Längenmaße:
    mm, cm,
    in (Inch/Zoll = 2,54cm)
    pc (Pica = 1/6 Zoll)
    pt (Pica Punkt = 1/72 Zoll oder 12 pt = 1 Pica)
    diese Einheiten werden Verwendet für Design das Gedruckt wird, zb: PDF oder Konzert Karten
  • absolute Längenmaße:
    px - (Pixel - Basiswert)
  • relative Längenmaße:
    %
    rem (=16px (Standardeinstellung), kann man mit html{font-size} ändern)
    vw (Viewport Width)
    vh (Viewport Height)
accent-color
  • Die CSS-Eigenschaft accent-color legt die Akzentfarbe für einige Formular-Elemente fest.
  • accent-color: #ff0000;
  • Checkboxen, Radio-Buttons, Range-Slider, Fortschrittsbalken
  • kulturbanause.de/accent-color
CSS optimieren
  • Für kurze Ladezeiten und für einen schnellen Seitenaufbau müssen wir CSS optimieren, reduzieren und komprimieren.
  • mediaevent/css/effizienz
CSS einbinden
  • <link rel="stylesheet" href="style.css" />
    Eine externe CSS-Datei wird durch ein link-Tag im HEAD der HTML-Datei eingebunden
  • <style>
    ...code...
    </style>
    style-Tag im HEAD des HTML-Dokuments, insbesondere bei Sonderlösungen für einzelne Seiten
  • <style>
    @import url("style.css");
    </style>
    Import einer externen CSS-Datei innerhalb des style-Tags oder in eine andere CSS-Datei
  • <h4 style="background-color: silver">Inline-CSS</h4>
    Inline CSS: style-Attribut im HTML-Tag
  • mediaevent/css/css-einbinden
blauer Tap Hintergrund
  • -webkit-tap-highlight-color: transparent;
  • Auf mobilen Geräten erscheint beim Tippen auf ein Element ein blauer Hintergrund, dieser sieht nicht schön aus und kann damit entfernt werden. Funktioniert NICHT im Mobil Firefox und auf Desktop bei Firefox / Safari.
  • mdn/css/-webkit-tap-highlight-color
CSS counter
  • counter und counter-increment erzeugen zusammen mit ::before oder ::after Pseudo-Elementen eine automatische Nummerierung von Kapiteln, Bildern und Tabellenzeilen.
  • mediaevent/css/counter
revert / unset
  • revert übernimmt den Wert, den der Browser als Standard setzt, wenn dem Element keine CSS-Eigenschaften zugewiesen wurden.
    unset setzt alle Werte zurück auf den Standard, im Grunde genommen eine Kombination aus initial und inherit.
  • mediaevent/css/revert
  • mediaevent/css/reset
BEM Block Element Modifier