I'm trying to write something in JS that allows me to tell whether a user's browser supports CSS3 blur, and display (or not display) an element as necessary. It doesn't look like Modernizr supports it, and I really couldn't figure out another way to check this. How can I do this?
blur is actually a value of the CSS filter property, and not a CSS property within itself.
To check for support of the CSS3 filter property with modernizr, you can simply use the Modernizr.cssfilters value.
Related
It seems like when modifying the CSS properties of elements when using JS methods (CSSStyleSheet, with insertRule or deleteRule, or CSSStyleRule.style.setProperty()), the underlying CSS has been updated, but the page itself not not reflect the changes.
The changes are only realised upon some reflow trigger, say after I've changed the attribute of the element, even if it's an invalid one.
May be related to this question: What are the conditions under which a browser will re-assess and reapply CSS selectors and styles?
What is the recommended way to modify CSS using JS? Apart from changing class strings, or a hacky way to insert and delete attributes?
Note: Testing on Edge / Chromium
After reading your post, I'm not sure if you are aware of these simple ones:
element.style = stylestring (IE: "display:block; color:red;")
or
element.setAttribute('style', stylestring)
These will be treated as inline-styles. So changed properties will take priority over the external css and the effect will be immediate.
Now, is it the recommended way? That's a tough one, I'll let others answer this question, I'm not really a W3C guy...
I would like to test if a browser supports a CSS property. I know I can use modernizr to do this but I don't want to install an entire library to test for one property.
How does modernizr test for properties? Say I want to test for support for the background-size property.
I scanned through the properties of the document object but couldn't see anything that looked like it would help.
Any ideas or help would be great.
Modernizr works by creating an element, applying a css property and then checking the return value of the css property. For example, if you wanted to test for text shadow you would do this:
if (document.createElement("detect").style.textShadow === "") {
document.getElementsByTagName("html")[0].className += " textshadow";
}
I think think this will be specific to each feature since you have to look for certain side effects in the DOM. Here is a link with some ideas http://www.sitepoint.com/detect-css3-property-browser-support/
Modernizr is an open source project - you can literally view the code that powers it. here is background-size detect specifically.
This is a fairly trivial thing to check. You create a dom element, set background-size (both vanilla and all of the vendor prefixed versions) to 100%, and then check the value of backgroundSize on the dom element's style property to see if it kept that value.
That being said - modernizr is pretty lean. You just get the tests you want, and nothing more.
I'm working on a site that primarily uses the background-size:cover property for the background. However I'd like to support IE 7/8, I'm aware I could use IE conditional comments but checking for the property support would be more useful since it could support other old browsers as oppose to just IE.
I have the solution to the background issue, but I need to know when to add it with js depending on if there's support for the background-size property.
My question is, whats the best method to check for css background-size property in old browsers?
I have seen a few related questions but they all require using Modernizer, I'd prefer not using an extra library unless its the only option.
Thanks.
if( 'backgroundSize' in document.documentElement.style) would be the easiest way to go about it.
It seems like using this function would be more portable or reliable, because the alternative is to set an attribute:
element.style.setProperty(styleproperty, valuestring);
element.setAttribute('style',styleproperty+': '+valuestring+';');
The second method would also seem slightly more inefficient though that's hardly a concern.
But at least on Chrome, the style does not update on the page unless I use the setAttribute method.
The reason why this is a bit of an issue, is that I have potentially many different separate style properties I want to modify independently of the others. I have to do a whole lot of string parsing and processing if I can't make use of setProperty, removeProperty, etc. I have to pull out the style string, search it, modify it, and set it back in via setAttribute. Should work, but I don't like it.
Is there a reason for this? Is this a bug? My guess is that setAttribute triggers something for the browser to perform a re-render. What is a suitable way to force this update that is generally browser-friendly?
Setting the style attribute directly has consequences that may be undesirable: it will wipe out all existing styles set in the element's style attribute, and setAttribute is broken in older IE (and compatibility modes in later IE). Much safer is to use the element's style property directly to set only the style property you need:
element.style[styleproperty] = valuestring;
This will update the page immediately in all major browsers.
One caveat: CSS style properties (generally using dashes, such as in background-color) do not map precisely to properties of the DOM element's style object (generally camel case, such as in backgroundColor). There are also exceptions to this rule.
How can you detect if a browser supports the CSS attribute display:inline-block?
Well, here's what you can go if you want to do it purely by examining the bavhiour of the browser w/ javascript instead of user agent sniffing:
Set up a test scenario, and a control scenario. With, say, the following structure:
div
div w/ content "test"
div w/ content "test2"
Insert one copy into the document with the two internal divs set to inline-block, and insert another copy into the document with the two internal divs set to block. If the browser supports inline-block, then the containing divs will have different heights.
Alternate answer:
You can also use getComputedStyle to see how the browser is treating a given element's css. So, in theory, you could add an element with "display: inline-block," and then check the computedStyle to see if it survived. Only problem: IE doesn't support getComputedStyle. Instead, it has currentStyle. I don't know if currentStyle functions identically (presumably it functions similarly to the behaviour we want: disregarding "invalid" values).
According to the QuirksMode charts, the only mainstream browsers not supporting inline-block are IE6 and 7. (Well, they support it, but only for elements which have a native display type of inline.) I'd just assume it is supported and then apply a workaround for IE6/7 via conditional comments.
(Note: I'm ignoring Firefox 2's lack of support for inline-block and assuming the vast majority of users have upgraded to FF3, but brief googling didn't unearth any numbers to back that up. YMMV.)
If determining support from JavaScript is your only option however, you'll have to fall back to user-agent sniffing. The YAHOO.env.ua class from the YUI library is a handy chunk of code that you could copy and use. (It's BSD licensed, doesn't depend on other parts of the YUI library, and is only about 25-30 lines without comments)
By the way: There is a neat way to implement cross-browser inline-blocks in IE6+, FF2+, Opera and WebKit with CSS alone. (Not valid CSS, but still only CSS.)
Christopher Swasey is quite correct.
I have set up a jsFiddle demo of his technique at http://ajh.us/test-inline-block.
The code is essentially:
var div = document.createElement('div');
div.style.cssText = 'display:inline-block';
// need to do this or else document.defaultView doesn't know about it
$('body').append(div);
// that was jQuery. It’s possible to do without, naturally
var results = false;
if (div.currentStyle) {
results = (div.currentStyle['display'] === 'inline-block');
} else if (window.getComputedStyle) {
results = document.defaultView.getComputedStyle(div,null).getPropertyValue('display')=== 'inline-block';
}
//clean up
$(div).remove();
alert('display: inline-block support: '+results);
Please note this exact same technique also works for detecting display: run-in support.
There is no way to detect that with Javascript as it is a pure CSS attribute that does not relate to any object or function in Javascript. The best thing I can tell you is to check here for a pretty good compatibility list and use CSS to create a workaround.