I am wondering what browsers support the CSS property object-fit: cover. I usually use a mixture of Mozilla browser compatibility table and caniuse, however, they provide slightly different information. For example, on Mozilla, Chrome for Android version 31 is supported, however, caniuse states that version 84 is supported at a minimum. What is correct/ the reason for the above difference?
How would I test the object-fit: cover property for Chrome for Android version 55? Using something like lambda does not support picking a different browser on mobile (as they do with desktop) and will provide the latest version of the browser.
Long term, which one should I rely on in the future?
No, They match.
The black bar on CanIUse represents the current version of the browser (green means supported). Mozilla is listing the first version that supported the feature. So they do say the same thing. It's just that Mozilla is expecting you to figure out what recent versions are in the wild based on your users.
If CanIUse isn't showing "previous" versions it simply means that they don't have enough testing data to say. So in that case Mozilla seems to have more detail. That said, Chrome has had pretty much feature parity across platforms for quite a while so you're usually safe following the desktop column.
If you want to use a feature only when it's supported by a browser, use #supports like so:
#supports (object-fit: cover){
/* css styles for matching browsers */
}
These work just like media queries that overrides previous definitions and lower specificity.
I am using Foundation 5 that working fine with all browser except IE8. I have also try with polyfill but still css issues exist on IE8.
Any other solution for this.
For some businesses it is not a viable option to drop support for IE8. I had to get a Foundation 5 site working in IE8 and here are the steps I took to get it working.
Breakdown:
Use jQuery v1.x and not v2.x
Include IE8 grid support CSS
Include shims in HEAD after your CSS
cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js
s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js
html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js
cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js
github.com/es-shims/es5-shim - shim.js
Include Foundation js fix before initiating foundation
Include REM shim at very bottom of page
For a more in depth look at how to do this check out the link below:
https://kyco.io/blog/getting-foundation-5-to-work-in-ie8
According to http://foundation.zurb.com/learn/faq.html and http://foundation.zurb.com/docs/compatibility.html:
Why doesn't Foundation support IE7 or IE8? Or: why we don't support a dying species.
This is probably the biggest question we get. Consider this: most of
today's popular browsers automatically upgrade themselves including
Chrome, Firefox and Explorer (starting with 9). IE 8 is the last IE
supported on Windows XP, which Microsoft will officially stop
supporting next year. That played a part in our decision.
Besides that, since Foundation 4, our framework is built mobile-first,
meaning it relies on media queries to layer in more complex layouts
and components. Browsers or devices that don't support media queries
will be restricted to a simple, single-column layout. In some ways,
Foundation 4 better supports IE6-7 insomuch as it provides a mobile
but not entirely broken experience. If IE8 support is important for
your users / customers, you can use Foundation 3.2, which supports
IE8. It's not mobile first but it's good stuff.
What is the basic difference between -moz-linear-gradient and -webkit-gradient. I know the changes are in parameters and -moz is meant for mozilla. But why we have different CSS property for Mozilla. What does webkit represents here ?
Most often, though, the extensions are used to release and test
browser features that have been developed in the preparation of W3C
drafts that have not yet reached Candidate Recommendation status—the
extensions allow these new properties to be widely tested before they
become available as standard CSS properties.
http://reference.sitepoint.com/css/vendorspecific
Some of these properties have been included in draft CSS specification
for inclusion in the final recommendation, but are still experimental.
The final standard property may be different from the current prefix
implementation.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions
Webkit CSS properties
http://css-infos.net/properties/webkit
WebKit is an open source web browser engine. WebKit is also the name of the Mac OS X system framework version of the engine that's used by Safari, Dashboard, Mail, and many other OS X applications. WebKit's HTML and JavaScript code began as a branch of the KHTML and KJS libraries from KDE.
CSS3 Gradients
Introduction
WebKit paved the way for gradients in CSS by adding support for -webkit-gradient back in early 2008, and they’ve become widely used since their introduction.
Over the past several months, the CSS Working Group has had extended discussions about making the gradient syntax easier to use, and recently Tab Atkins included a proposal in the latest draft of the Image Values and Replaced Content module. WebKit and Mozilla have now implemented this proposal so that web authors can experiment with it, and provide feedback to the Working Group. Note that the proposal is still an editor’s draft, which means that it’s still possible, and even likely to change due to user feedback.
The main goal of the new syntax is simplicity; it’s now really easy to code up common gradients, as you’ll see in the examples below. A secondary goal was to specify something where implementations were compatible across browsers.
If you’re not already running one, go and grab a recent nightly build so that you can see the examples in this post.
Here are some simple examples (note that all these examples are resizable, so you can see how resizing the box affects the gradients):
I know IE8 and below don't support rounded buttons with plain css but does ie9?
I had a more recent table showing CSS3 properties handled by IE9 but border-radius was already part of them in september: http://www.impressivewebs.com/css3-support-ie9/
Microsoft's stated aim in releasing IE9 is to support all HTML5, CSS3 and other features which for which finalised specifications have been released.
This means that there are a number of features which Firefox, Chrome, Safari and others support already which IE9 will not support.
The good news for you is that border-radius (the CSS3 feature which gives you rounded corners) is fully specified, and as a result, it is implemented in IE9.
I recommend using the site CanIUse.com to check for browser support for individual features. It has a comprehensive list of which browsers support which features.
You may also want to look up Quirksmode.org, which offers a similar service. However although I am a big fan of Quirksmode, it is getting somewhat out of date now. (but it is still a great resource for checking feature support in older versions of IE in particular)
More recently, I have been seeing questions with the tag "webkit". Such questions usually tend to be web-based questions relating to CSS, jQuery, layouts, cross-browers compatibility issues, etc...
So what is this "webkit" and how does it relate to CSS? I have also noticed a lot of -webkit-... properties in the source code for various websites. Are these two related?
Update
So from the answers so far... WebKit is a HTML/CSS web browser rendering engine for Safari/Chrome. Are there such engines for IE/Opera/Firefox and what are the differences, pros and cons of using one over the other? Can I use WebKit features in Firefox for example?
The ultimate question... Is WebKit supported by IE?
Update 2
All of the major browsers use different rendering engines. I guess this is a big reason why there are so many cross-browser compatibility issues!
So, is there some kind of project or movement to a standard rendering engine that ALL browsers will use? Will HTML5 bring an end to the cross-browser compatibility issues?
Update: So apparently, WebKit is a HTML/CSS web browser rendering engine for Safari/Chrome. Are there such engines for IE/Opera/Firefox and what are the differences, pros and cons of using one over the other? Can I use WebKit features in Firefox for example?
Every browser is backed by a rendering engine to draw the HTML/CSS web page.
IE → Trident (discontinued)
Edge → EdgeHTML (clean-up fork of Trident) (Edge switched to Blink in 2019)
Firefox → Gecko
Opera → Presto (no longer uses Presto since Feb 2013, consider Opera = Chrome, therefore Blink nowadays)
Safari → WebKit
Chrome → Blink (a fork of Webkit).
See Comparison of web browser engines for a list of comparisons in different areas.
The ultimate question... is WebKit supported by IE?
Not natively.
Addition to what #KennyTM said:
IE
Engine: Trident
CSS-prefix: -ms
Edge
Engine: EdgeHTML → Blink3
CSS-prefix: -ms
Firefox
Engine: Gecko
CSS-prefix: -moz
Opera
Engine: Presto → Blink1
CSS-prefix: -o (Presto) and -webkit (Blink)
Safari
Engine: WebKit
CSS-prefix: -webkit
Chrome
Engine: WebKit → Blink2
CSS-prefix: -webkit
1) On February 12 2013 Opera (version 15+) announces they moving away from their own engine Presto to WebKit named Blink.
2) On April 3 2013 Google (Chrome version 28+) announces they are going to use the WebKit-based Blink engine.
3) On December 6 2018 Microsoft (Microsoft Edge 79+ stable) announces they are going to use the WebKit-based Blink engine.
Webkit is a web browser rendering engine used by Safari and Chrome (among others, but these are the popular ones).
The -webkit prefix on CSS selectors are properties that only this engine is intended to process, very similar to -moz properties. Many of us are hoping this goes away, for example -webkit-border-radius will be replaced by the standard border-radius and you won't need multiple rules for the same thing for multiple browsers. This is really the result of "pre-specification" features that are intended to not interfere with the standard version when it comes about.
For your update:...no it's not related to IE really, IE at least before 9 uses a different rendering engine called Trident.
This has been answered and accepted, but if someone is still wondering why are things a bit messed up today, you'll have to read this:
http://webaim.org/blog/user-agent-string-history/
It gives a good idea of how gecko, webkit and other major rendering engines evolved and what led to the current state of messed up user-agent strings.
Quoting the last paragraph for TL;DR purposes:
And then Google built Chrome, and Chrome used Webkit, and it was like Safari, and wanted pages built for Safari, and so pretended to be Safari. And thus Chrome used WebKit, and pretended to be Safari, and WebKit pretended to be KHTML, and KHTML pretended to be Gecko, and all browsers pretended to be Mozilla, and Chrome called itself Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13, and the user agent string was a complete mess, and near useless, and everyone pretended to be everyone else, and confusion abounded.
-webkit- is simply a group that Chrome, Safari, Opera and iOS browsers fit into. They all have a common ancestor, so often their capabilities/limitations (when it comes to running CSS and Javascript) are confined to the group.
A developer will place -webkit- followed by some code, meaning that the code will only run on Chrome, Safari, Opera and iOS browsers. Here is a complete list:
-webkit- (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser)
-moz- (Firefox)
-o- (Old, pre-WebKit, versions of Opera)
-ms- (Internet Explorer and Microsoft Edge)
The ultimate question... Is WebKit supported by IE?
Kind of. Check out Chrome Frame, it's a plugin for Internet Explorer that makes it use the Webkit engine. The only quirk is that you have to persuade your visitors to install the plugin.
Update
Chrome Frame is no longer maintained or supported…
WebKit is a layout engine designed to
allow web browsers to render web
pages. The WebKit engine provides a
set of classes to display web content
in windows, and implements browser
features such as following links when
clicked by the user, managing a
back-forward list, and managing a
history of pages recently visited.
WebKit was originally created as a
fork of KHTML as the layout engine for
Apple's Safari; it is portable to many
other computing platforms. It is also
used in Google's Chrome Browser.
WebKit's WebCore and JavaScriptCore
components are available under the GNU
Lesser General Public License, and the
rest of WebKit is available under a
BSD-style license.
Source Wikipedia
For further information about layout engines you can look here
Webkit is an HTML rendering engine used by Chrome and Safari.
It supports a number of custom CSS properties that are prefixed by -webkit-.
Webkit is the html/css rendering engine used in Apple's Safari browser, and in Google's Chrome.
css values prefixes with -webkit- are webkit-specific, they're usually CSS3 or other non-standardised features.
to answer update 2
w3c is the body that tries to standardize these things, they write the rules, then programmers write their rendering engine to interpret those rules. So basically w3c says DIVs should work "This way" the engine-writer then uses that rule to write their code, any bugs or mis-interpretations of the rules cause the compatibility issues.
Webkit is the rendering engine used in the popular browsers Safari and Chrome, as well as others.
A common problem I have ran into as a website designer is that alot of people use IE6+. No big deal usually, except in CSS I have to add multiple rendering syntax' to parse each request, per browser. It would be very nice if there was a universal rendering setup for CSS that IE can read as easily as Chrome/FF/Opera and webkit. The problem with IE is that if I do NOT use ALL the proper CSS styles and rendering, than my websites look and work great using every browser except IE. This can make for an unhappy, die-hard IE customer.
Example is this: Let us say I need a 1px, grey border with a border-radius of 10%. For Chrome and others, I use the webkit property. Now, for IE, I have to add seperate CSS styles using the simple old CSS values of "border: 1px solid #E5E5E5" and "border-radius: 10%". A positive outcome is not always guaranteed over all IE browser versions, but for the most part this method works fine for me and many others.
Even though this is an older post, there is also another method to rendering for older versions of Internet Explorer. -webkit while being a CSS Vendor Prefix, you can also download a few JS applications and place them in the bottom of the HTML's HEAD.
Try using Modernizr, HTML5 Shiv and Respond.js. These are amazing IE compatible polyfill scripts that use polyfills, and other resources which will help better render HTML5 elements in IE9 and Below.
To use these polyfills, simply add HTML boolean logic to place them, IF the browser is less than the desire IE version. Example code is:
<head>
<!-- HEAD Elements -->
<script src="path/to/modernizr.js" type="text/javascript"></script>
<!--[if lt IE 6]>
<script src="path/to/HTMLSiv.js" type="text/javascript">
</script>
<script src="path/to/respond.js" type="text/javascript">
</script>
<![endif]-->
</head>
Webkit is the rendering engine used in the popular browsers Safari and Chrome, as well as others
Every browser is backed by a rendering engine to draw the HTML/CSS web page.
IE → Trident (discontinued)
Edge → EdgeHTML (clean-up fork of Trident)
Firefox → Gecko
Opera → Presto (no longer uses Presto since Feb 2013, consider Opera = Chrome nowadays)
Safari → WebKit
Chrome → Blink (a fork of WebKit).
A good documentation about WebEngines especially webKit and its developers you can read at:
WebKit