CSS: Feature Detection ohne Javascript mit CSS Feature Queries

Lange Zeit führte zur Feature-Detection von Browsern quasi kein Weg an JavaScript-Libraries, wie zum Beispiel dem bekannten Modernizr vorbei. Doch mit der @supports-Regel, die ein Teil der "CSS3 Conditional Rules" darstellt, zu der beispielsweise auch die bekannten @media-Queries zählen, ist es möglich über reines CSS den Feature-Umfang eines Browsers abzufragen. In einigen Fällen kann man hiermit die Performance-Einbuße einer zusätzlichen Library vermeiden. Die meiner Meinung nach recht selten benutzte Query, wird in Chrome, Firefox und Opera bereits seit 2013 unterstützt.

Syntax und Anwendung

Auch die Syntax ist vergleichbar mit der der @media-Queries. Eine Query, die die Unterstützung des mix-blend-mode: overlay abfragt, sieht zum Beispiel so aus:

@supports (mix-blend-mode: overlay) {
    .beispiel {
        mix-blend-mode: overlay;
    }
}

Die Syntax ist also:

@supports (property: value) {
    .element {
         property: value
    }
}

Wichtig ist hierbei, dass man immer einen Value angeben muss, auch wenn man nicht direkt nach ihm testet. Testet man also beispielsweise nach der Funktion "zoom", muss man auch einen Faktor angeben:

@supports (zoom: 0.5) {
  .element {
  }
}

In dem Fall ist es egal, ob der Wert dem tatsächlich gewünschten entspricht. Das trifft natürlich nur auf Properties zu, die entweder ganz oder gar nicht unterstützt werden. Bei partiellem Support muss man natürlich auch die entsprechende Eigenschaft abfragen.

Interessant ist, dass man den Test auch negieren kann, also mit not() nach Browsern filtern kann, die das Feature eben nicht unterstützen. Das sieht dann so aus:

@supports not(mix-blend-mode: overlay) {
    .beispiel {
        opacity: .5;
    }
}

Durch eine Kombination beider Abfragen kann man so genau definieren, wie sich unterstützende und nicht-unterstützende Browser zu verhalten haben:

@supports (mix-blend-mode: overlay) {
    .beispiel {
        mix-blend-mode: overlay;
    }
}
@supports not(mix-blend-mode: overlay) {
    .beispiel {
        opacity: .5;
    }
}

Verknüpfungen durch and und or

Wie bei Media-Queries können Properties auch durch and in einer Regel verknüpft werden. Gleiches gilt auch für den or Operator. Hiermit kann man beispielsweise sehr einfach Vendor-Präfixe berücksichtigen:

@supports (property: value) or (-webkit-property: value) {
  .element {
    -webkit-property: value;
    property: value;
  }
}

Browser Fallback

Da @supports bereits seit 2013 implementiert wurde, supporten auch ältere Browserversionen bereits diese Regel. Einzige Ausnahme ist natürlich der Internet Explorer in allen Versionen. Möchten man diesen unterstützen und nicht auf JavaScript zurückgreifen, kann man als Fallback zuerst die Property regulär stylen und diese Styles dann in der @supports-Regel wieder aufheben.

.beispiel {
    opacity: .5;
}
@supports (mix-blend-mode: overlay) {
    .beispiel {
        mix-blend-mode: overlay;
        opacity: 1;
    }
}
@supports not(mix-blend-mode: overlay) {
    .beispiel {
        opacity: .5;
    }
}

Weitere Informationen zum Browser-Support findet ihr hier: Can I Use: CSS Feature Queries