Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Was Spannendes, was zum Spielen, aber leider keine Schokolade!

Eher unbekannte CSS-Funktionen

Was Spannendes, was zum Spielen, aber leider keine Schokolade!

Auch für erfahrene CSS-Jongleure gibt es vereinzelt noch Kniffe zu entdecken, die das Leben erleichtern können. Drei eher unbekannte Funktionen rund um CSS findet ihr im heutigen Adventskalendertürchen.

Pointer-Events

Immer wieder kommt es vor, dass ein HTML-Element von einem anderen verdeckt wird, obwohl das darunter liegende Element klickbar sein soll. Vorstellbar ist beispielsweise, dass ihr für euer Design ein transparentes PNG halb über die Navigation legen müsst. So liegt dessen sichtbarer Bereich zwar außerhalb der Navigation, aufgrund seiner rechteckigen Form verdeckt die transparente Fläche aber einige Navigationselemente ganz oder teilweise. Bewegt ihr nun den Mauszeiger über die zwar sichtbaren, aber hinter der Transparenz liegenden Schaltflächen, wird weder der hover-Status angezeigt, noch könnt ihr damit per Klick interagieren.

Hier schafft die CSS-Eigenschaft pointer-events Abhilfe. Gebt ihr den Wert none an, reagiert das Element nicht mehr auf Klicks und andere Mausereignisse. Dadurch wird ganz nebenbei auch der darunterliegende Text mit der Maus markierbar. Der Wert auto stellt den Normalzustand wieder her, was beispielsweise für Kind-Elemente sinnvoll sein kann, die einen Link enthalten. Neben dem üblichen Wert inherit, der bekannterweise die Auswahl des Eltern-Elements übernimmt, gibt es noch einige weitere gültige Werte, die allerdings nur für die Verwendung mit SVG von Bedeutung sind.

  1. <style>
  2. header {
  3.   position: relative;
  4. }
  5.  
  6. #navigation {
  7.   width: 100%;
  8.   height: 20px;
  9. }
  10.  
  11. #grafisches-element {
  12.   pointer-events: none;
  13.   position: absolute;
  14.   left: -5px;
  15.   top: -5px;
  16.   width: 30px;
  17.   height: 30px;
  18. }
  19. </style>
  20.  
  21. <header>
  22.   <div id="navigation"></div>
  23.   <div id="grafisches-element"></div>
  24. </header

Mit dieser CSS-Eigenschaft könnt ihr so an der einen oder anderen Stelle eine knifflige JavaScript-Lösung vermeiden, zumal pointer-events erstaunlicherweise in allen modernen Browsern verfügbar ist. Apropos JavaScript: Habt ihr ein Element mit pointer-events ausgestattet, verhält sich JavaScript praktischerweise entsprechend und ignoriert die typischen JavaScript-Events ebenfalls.

Allerdings solltet ihr wie immer auch darauf achten, dass ihr euch nicht durch die Verwendung eine neue Barriere öffnet. Schließlich ist Text in einem so ausgezeichneten Element nicht mehr markierbar.

Beispiel: http://jsfiddle.net/saschapi/y9cy9yt2/

CSS @supports

Ähnlich wie mit JavaScript könnt ihr auch via CSS testen, ob der aufrufende Browser bestimmte Funktionen unterstützt oder nicht. Das kann zum Beispiel nützlich sein, wenn ihr bestimmte CSS-Eigenschaften nur dann verwenden wollt, wenn diese auch unterstützt werden. So könnt ihr an der einen oder anderen Stelle auch das umständliche und unübersichtliche Hantieren mit Browser-Prefixen vermeiden.

CSS @supports funktioniert ähnlich wie Media Queries. Zunächst wird eine bestimmte Bedingung geprüft und falls diese zutrifft, werden bestimmte CSS-Eigenschaften verwendet.

  1. @supports (box-sizing: content-box) {
  2.   div { box-sizing: content-box; }
  3. }

Alternativ könnt ihr aber natürlich auch prüfen, ob die Eigenschaft nicht unterstützt wird, indem ihr das Schlüsselwort NOT hinzufügt.

  1. @supports not (box-sizing: content-box) {
  2.   div { width: 90%; }
  3. }

Und zu guter Letzt ist auch die Arbeit mit logischen Operatoren vorgesehen. Sowohl UND als auch ODER sind für @support verfügbar.

  1. @supports ((display: -webkit-flex) or (display: -moz-flex)
  2. or (display: flex)) and (-webkit-appearance: caret) {
  3.   flex-direction: row;
  4. }

Leider ist diese Funktionalität nicht in allen Browsern verfügbar. Während ihr für den Internet Explorer natürlich wie immer auf Conditional Comments ausweichen könnt, wird diese Form der Prüfung bei Safari, und damit gleichzeitig dem meistgenutzten Browser auf iOS-Geräten, leider nicht funktionieren.

CSS-Counter

Ihr kennt alle die Möglichkeit, mit geordneten Listen (ol) Elemente zu nummerieren. CSS bietet aber auch die Option, andere Elementen nummerieren zu lassen. Diese relativ unbekannte Fähigkeit von CSS nennt sich Counter und ist ebenfalls in allen modernen Browsern verfügbar. Counter können euch vor allem an Stellen helfen, an denen die Nummerierungen komplett anders gestaltet sein sollen als die zu zählenden Elemente, oder falls ihr aus anderen Gründen keine geordneten Listen verwenden wollt.

Um einen Counter zu verwenden, initialisiert ihr diesen zunächst auf 0, indem ihr für das Eltern-Element mit counter-reset: beliebigerName einen eigenen Namen setzt. Im Weiteren kann dieser Counter dann für die Kind-Elemente mit counter-increment: beliebigerName hochgezählt werden. Über die Eigenschaft content gebt ihr den Counter dann beispielsweise vor dem jeweiligen Element aus (content: counter(eigenerCounter);).

Auf diese einfache Art und Weise könnt ihr schnell und ohne clientseitige Skriptsprache Elemente mit Nummerierungen versehen.

Beispiel: http://jsfiddle.net/saschapi/hd1bm5kt/

Bonus: Background-Position

Selbstverständlich ist euch auch die Eigenschaft background-position hinlänglich bekannt. Weniger bekannt ist aber, dass ihr dabei mehrere Angaben kombinieren könnt. Üblicherweise nutzt ihr zur Positionierung eines Hintergrundbildes Werte wie left, right, center, top oder bottom. Ebenfalls möglich sind prozentuale Angaben oder absolute Größen wie Pixel. Schwierig wird es mit diesen Angaben den Hintergrund beispielsweise 50px vom rechten, unteren Rand des Elements zu platzieren. Zu diesem Zweck könnt ihr einfach Schlüsselwörter und Zahlen kombinieren.

  1. /* Beispiel mit Position 50px von rechts und 10px von unten */
  2. Background-position: right 50px bottom 10px;
  3.  
  4. /* Gleiches Beispiel im Kurzform */
  5. background: url("button.png") no-repeat right 50px bottom 10px;

Kommentare

Patrick H. Lauke
am 17.12.2014 - 13:34

Um der allgemeinen Verwirrung schnell zuvorzukommen (die Frage kommt bei mir jedenfalls oefter vor): CSS pointer-events haben nichts mit JavaScript Pointer Events zu tun :)

Permanenter Link

Sven
am 19.12.2014 - 08:45

Vom Thema Pointer-Events mit CSS habe ich vorher noch nicht gehört. Sehr interessant. Bin mal gespannt, wann die ersten Seiten einen "Bilderklauschutz" auf dieser Basis einbauen, wie die Sperre des Kontextmenüs per JS :)

Permanenter Link

Die Kommentare sind geschlossen.