This repository was archived by the owner on Apr 12, 2024. It is now read-only.
Remove $sniffer.vendorPrefix (was: Rethink the CSS prefixing strategy) #13690
Comments
mgol
referenced
this issue
in gkalpak/angular.js
Jan 6, 2016
mgol
referenced
this issue
in gkalpak/angular.js
Jan 6, 2016
Although the detected `vendorPrefix` for MS Edge is "ms", it doesn't seem to recognize some vendor-prefixed CSS rules (e.g. `-ms-animation-*`). Other browsers (currently) recognize either vendor-prefixed rules only or both. This commit fixes this issue by adding and retrieving styles using both prefixed and un-prefixed names.
|
I agree. Let's get this in after 1.5.0 |
|
ngAnimate no longer uses this API and since it's bad & undocumented anyway we'll be removing it in 1.6.0. |
mgol
changed the title
mgol
added a commit
to mgol/angular.js
that referenced
this issue
Oct 17, 2016
Previously, Angular tried to detect the CSS prefix the browser supports and
then use the saved one. This strategy is not ideal as currently some browsers
are supporting more than one vendor prefix. The best example is Microsoft Edge
that added -webkit- prefixes to be more Web-compatible; Firefox is doing
a similar thing on mobile. Some of the -webkit--prefixed things are now even
getting into specs to sanction that they're now required for Web compatibility.
In some cases Edge even supports only the -webkit--prefixed property; one
example is -webkit-appearance.
$sniffer.vendorPrefix is no longer used in Angular core outside of $sniffer
itself; taking that and the above problems into account, it's better to just
remove it. The only remaining use case was an internal use in detection of
support for transitions/animations but we can directly check the webkit prefix
there manually; no other prefix matters for them anyway.
$sniffer is undocumented API so this removal is not a breaking change. However,
if you've previously been using it in your code, just paste the following
to get the same function:
var vendorPrefix = (function() {
var prefix, prop, match;
var vendorRegex = /^(Moz|webkit|ms)(?=[A-Z])/;
for (prop in document.createElement('div').style) {
if ((match = vendorRegex.exec(prop))) {
prefix = match[0];
break;
}
}
return prefix;
})();
The vendorPrefix variable will contain what $sniffer.vendorPrefix used to.
Note that we advise to not check for vendor prefixes this way; if you have to
do it, it's better to check it separately for each CSS property used for the
reasons described at the beginning. If you use jQuery, you don't have to do
anything; it automatically adds vendor prefixes to CSS prefixes for you in
the .css() method.
Fixes angular#13690
2 tasks
|
PR: #15287 |
mgol
added a commit
to mgol/angular.js
that referenced
this issue
Oct 17, 2016
Previously, Angular tried to detect the CSS prefix the browser supports and
then use the saved one. This strategy is not ideal as currently some browsers
are supporting more than one vendor prefix. The best example is Microsoft Edge
that added -webkit- prefixes to be more Web-compatible; Firefox is doing
a similar thing on mobile. Some of the -webkit--prefixed things are now even
getting into specs to sanction that they're now required for Web compatibility.
In some cases Edge even supports only the -webkit--prefixed property; one
example is -webkit-appearance.
$sniffer.vendorPrefix is no longer used in Angular core outside of $sniffer
itself; taking that and the above problems into account, it's better to just
remove it. The only remaining use case was an internal use in detection of
support for transitions/animations but we can directly check the webkit prefix
there manually; no other prefix matters for them anyway.
$sniffer is undocumented API so this removal is not a breaking change. However,
if you've previously been using it in your code, just paste the following
to get the same function:
var vendorPrefix = (function() {
var prefix, prop, match;
var vendorRegex = /^(Moz|webkit|ms)(?=[A-Z])/;
for (prop in document.createElement('div').style) {
if ((match = vendorRegex.exec(prop))) {
prefix = match[0];
break;
}
}
return prefix;
})();
The vendorPrefix variable will contain what $sniffer.vendorPrefix used to.
Note that we advise to not check for vendor prefixes this way; if you have to
do it, it's better to check it separately for each CSS property used for the
reasons described at the beginning. If you use jQuery, you don't have to do
anything; it automatically adds vendor prefixes to CSS prefixes for you in
the .css() method.
Fixes angular#13690
mgol
added a commit
to mgol/angular.js
that referenced
this issue
Oct 17, 2016
Previously, Angular tried to detect the CSS prefix the browser supports and
then use the saved one. This strategy is not ideal as currently some browsers
are supporting more than one vendor prefix. The best example is Microsoft Edge
that added -webkit- prefixes to be more Web-compatible; Firefox is doing
a similar thing on mobile. Some of the -webkit--prefixed things are now even
getting into specs to sanction that they're now required for Web compatibility.
In some cases Edge even supports only the -webkit--prefixed property; one
example is -webkit-appearance.
$sniffer.vendorPrefix is no longer used in Angular core outside of $sniffer
itself; taking that and the above problems into account, it's better to just
remove it. The only remaining use case was an internal use in detection of
support for transitions/animations but we can directly check the webkit prefix
there manually; no other prefix matters for them anyway.
$sniffer is undocumented API so this removal is not a breaking change. However,
if you've previously been using it in your code, just paste the following
to get the same function:
var vendorPrefix = (function() {
var prefix, prop, match;
var vendorRegex = /^(Moz|webkit|ms)(?=[A-Z])/;
for (prop in document.createElement('div').style) {
if ((match = vendorRegex.exec(prop))) {
prefix = match[0];
break;
}
}
return prefix;
})();
The vendorPrefix variable will contain what $sniffer.vendorPrefix used to.
Note that we advise to not check for vendor prefixes this way; if you have to
do it, it's better to check it separately for each CSS property used for the
reasons described at the beginning. If you use jQuery, you don't have to do
anything; it automatically adds vendor prefixes to CSS prefixes for you in
the .css() method.
Fixes angular#13690
mgol
added a commit
to mgol/angular.js
that referenced
this issue
Oct 17, 2016
Previously, Angular tried to detect the CSS prefix the browser supports and
then use the saved one. This strategy is not ideal as currently some browsers
are supporting more than one vendor prefix. The best example is Microsoft Edge
that added -webkit- prefixes to be more Web-compatible; Firefox is doing
a similar thing on mobile. Some of the -webkit--prefixed things are now even
getting into specs to sanction that they're now required for Web compatibility.
In some cases Edge even supports only the -webkit--prefixed property; one
example is -webkit-appearance.
$sniffer.vendorPrefix is no longer used in Angular core outside of $sniffer
itself; taking that and the above problems into account, it's better to just
remove it. The only remaining use case was an internal use in detection of
support for transitions/animations but we can directly check the webkit prefix
there manually; no other prefix matters for them anyway.
$sniffer is undocumented API so this removal is not a breaking change. However,
if you've previously been using it in your code, just paste the following
to get the same function:
var vendorPrefix = (function() {
var prefix, prop, match;
var vendorRegex = /^(Moz|webkit|ms)(?=[A-Z])/;
for (prop in document.createElement('div').style) {
if ((match = vendorRegex.exec(prop))) {
prefix = match[0];
break;
}
}
return prefix;
})();
The vendorPrefix variable will contain what $sniffer.vendorPrefix used to.
Note that we advise to not check for vendor prefixes this way; if you have to
do it, it's better to check it separately for each CSS property used for the
reasons described at the beginning. If you use jQuery, you don't have to do
anything; it automatically adds vendor prefixes to CSS prefixes for you in
the .css() method.
Fixes angular#13690
mgol
added a commit
to mgol/angular.js
that referenced
this issue
Oct 19, 2016
Previously, Angular tried to detect the CSS prefix the browser supports and
then use the saved one. This strategy is not ideal as currently some browsers
are supporting more than one vendor prefix. The best example is Microsoft Edge
that added -webkit- prefixes to be more Web-compatible; Firefox is doing
a similar thing on mobile. Some of the -webkit--prefixed things are now even
getting into specs to sanction that they're now required for Web compatibility.
In some cases Edge even supports only the -webkit--prefixed property; one
example is -webkit-appearance.
$sniffer.vendorPrefix is no longer used in Angular core outside of $sniffer
itself; taking that and the above problems into account, it's better to just
remove it. The only remaining use case was an internal use in detection of
support for transitions/animations but we can directly check the webkit prefix
there manually; no other prefix matters for them anyway.
$sniffer is undocumented API so this removal is not a breaking change. However,
if you've previously been using it in your code, just paste the following
to get the same function:
var vendorPrefix = (function() {
var prefix, prop, match;
var vendorRegex = /^(Moz|webkit|ms)(?=[A-Z])/;
for (prop in document.createElement('div').style) {
if ((match = vendorRegex.exec(prop))) {
prefix = match[0];
break;
}
}
return prefix;
})();
The vendorPrefix variable will contain what $sniffer.vendorPrefix used to.
Note that we advise to not check for vendor prefixes this way; if you have to
do it, it's better to check it separately for each CSS property used for the
reasons described at the beginning. If you use jQuery, you don't have to do
anything; it automatically adds vendor prefixes to CSS prefixes for you in
the .css() method.
Fixes angular#13690
Closes angular#15287
ellimist
pushed a commit
to ellimist/angular.js
that referenced
this issue
Mar 15, 2017
Previously, Angular tried to detect the CSS prefix the browser supports and
then use the saved one. This strategy is not ideal as currently some browsers
are supporting more than one vendor prefix. The best example is Microsoft Edge
that added -webkit- prefixes to be more Web-compatible; Firefox is doing
a similar thing on mobile. Some of the -webkit--prefixed things are now even
getting into specs to sanction that they're now required for Web compatibility.
In some cases Edge even supports only the -webkit--prefixed property; one
example is -webkit-appearance.
$sniffer.vendorPrefix is no longer used in Angular core outside of $sniffer
itself; taking that and the above problems into account, it's better to just
remove it. The only remaining use case was an internal use in detection of
support for transitions/animations but we can directly check the webkit prefix
there manually; no other prefix matters for them anyway.
$sniffer is undocumented API so this removal is not a breaking change. However,
if you've previously been using it in your code, just paste the following
to get the same function:
var vendorPrefix = (function() {
var prefix, prop, match;
var vendorRegex = /^(Moz|webkit|ms)(?=[A-Z])/;
for (prop in document.createElement('div').style) {
if ((match = vendorRegex.exec(prop))) {
prefix = match[0];
break;
}
}
return prefix;
})();
The vendorPrefix variable will contain what $sniffer.vendorPrefix used to.
Note that we advise to not check for vendor prefixes this way; if you have to
do it, it's better to check it separately for each CSS property used for the
reasons described at the beginning. If you use jQuery, you don't have to do
anything; it automatically adds vendor prefixes to CSS prefixes for you in
the .css() method.
Fixes angular#13690
Closes angular#15287
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Currently, Angular tries to detect the CSS prefix the browser supports and then uses the saved one. This strategy is not ideal as currently some browsers are supporting more than one vendor prefix. The best example is Microsoft Edge that added
-webkit-prefixes to be more Web-compatible; Firefox is doing a similar thing (but AFAIK only on mobile so far). Some of the-webkit--prefixed things are now even getting into specs to sanction that they're now required for Web compatibility.In some cases Edge even supports only the
-webkit--prefixed property; one example is-webkit-appearance.That's why I think we shouldn't try to detect the vendor prefix & save it; we should just do the detection for each CSS property we're interested in using. That's similar to what jQuery does and it works fine but here, in Angular, it's even easier to cache it as we only need a few CSS properties.
Such a strategy change will make Angular more future-proof.
The text was updated successfully, but these errors were encountered: