How can I feature-detect CSS filters?
You can now use CSS' build-in @support
to conditionally apply styles. Note that the browser support for @support
is good but not perfect. This is a nice article explaining how it works with several examples: https://iamsteve.me/blog/entry/feature-detection-with-css
For instance, you can do something like this (see it live):
@supports (filter: grayscale(1)) or (-webkit-filter: grayscale(1)) {
h3 {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
}
@supports not (filter: grayscale(1)) and not not (-webkit-filter: grayscale(1)) {
h3 {
color: #808080;
}
}
Feature-detect CSS filter not working
Maybe to include -webkit-
prefix?
@supports (-webkit-filter: blur()){
body:before{
content: 'Can do filters.';
}
}
DEMO
Can I detect whether CSS filter effects are supported?
You can use the Modernizr Javascript library for CSS3 feature detection I believe.
According to the following links, (as of Modernizr 2.6) Modernizr can now be used for CSS filter detection:
http://www.browserleaks.com/modernizr#filter
http://modernizr.com/news/ (under the test improvements section).
and http://modernizr.com/news/modernizr-260/.
Get prefixes of css filters with Modernizr
Unfortunately, this is really a chromium bug.
The fine young gentlemen stucox provides a work around for this specific case, though
// This could be written more efficiently, but shows the technique at least
function getFilterPrefixed () {
var elem = document.createElement('div');
var testValue = 'grayscale(1)';
var prop;
var i;
// `Modernizr._prefixes` is a list of known (common) vendor prefixes
for (i = 0; i < Modernizr._prefixes.length; i++) {
prop = Modernizr._prefixes[i] + 'filter';
// Set-and-check: if the property holds a valid value, it's the one
elem.style[prop] = testValue;
if (elem.style[prop] == testValue) {
return prop;
}
}
}
How do I detect the user’s browser and apply a specific CSS file?
If you have to detect browsers just to apply CSS, then you might want to rethink your CSS before going to browser-specific stylesheets. All it takes is for one browser to mimic another's user agent string, or a new version to be released, and everything breaks. Use the current standards and validate your code (http://validator.w3.org/), and you'll have to worry about far fewer cross-browser issues. Even just using <!--[if IE]><![endif]-->
without a version number could break the layout in later versions.
That being said, if you want to style the page differently based on what CSS features are available, take a look at Modernizr. This way, you're only checking features, which won't be broken if a new version of the browser is released.
If all else fails and you really need to detect the visitor's browser, try jquery.browser
. It's built into jQuery, and is simple to use. http://api.jquery.com/jQuery.browser/.
Feature detecting support for svg filters
You could probably also check the enums available on the interfaces, e.g:
var supportsfilter = typeof SVGFEColorMatrixElement !== undefined &&
SVGFEColorMatrixElement.SVG_FECOLORMATRIX_TYPE_SATURATE==2;
That way you won't have to construct new elements, as in https://stackoverflow.com/a/9767059/109374. I've not tested to see whether this works as expected in Safari.
Update:
Patch submitted to modernizr: https://github.com/Modernizr/Modernizr/pull/531
Related Topics
Google Chrome Showing Black Border on Focus State for Button User Agent Styles
Why Is My CSS Not Updating in Web Browser
How to Use Calc() in Tailwind CSS
How to Align Jsf Components to Center
Responsive Web Design and High Resolution Displays (iPhone 4/5)
Google Maps API V3 Tools: Visual Distortions
CSS Animation with Time Interval
Create CSS to Enlarge Checkboxes
How to Ignore Certain Less Files in Web Essentials Less Compiling? (Bootstrap)
Angular2 Material Dialog CSS, Dialog Size
Full Body Background with Twitter Bootstrap
How to Make Shadow on Border-Bottom
How to Change Customized Carousel Indicator Background Color
Css3 Transform Causing Text to Flicker in Safari and Firefox MAC Yosemite