When I write a property in a .css file, web essentials ask me to automatically add vendor specific prefixes where needed; but it add prefixes for very old browsers :
Here, the prefix is for Firefox 1,
though I asked the autoprefixer to target the "last 2 versions" :
But when I write the same code in .less file, the compiled css contains the prefixes asked (in this case, none is added; but if I specify > 0%, all prefixes are). Is the plugin able to automatically add the prefixes only with less (or sass, I guess) ?
Related
How can i know when to use the prefix -webkit-, -moz-, -ms-, -o- in css properties? I see a lot of "inconsistency" in some attributes, in some properties the programmer only puts -moz-, in the other he puts the all 4. Is there a reason for that?
To know what prefixes to use is based on what browsers you want to support. A good place to find out what browser versions require a prefix is caniuse.com.
The variation is due to what browsers other developers have decided to support. If you see more prefixes then the developers (site owner) of the site have decided on a higher/deeper level of support for older browsers. Fewer prefixes will support fewer browsers. As to why? There could be a lot of reasons some are target audience and feature requirements (Web APIs).
You can go the manual route but a lot of developers will use tools like Autoprefixer or a CSS preprocessor like SASS or LESS. These tools give you different ways of defining what prefixes to use.
With something like AutoPrefixer there's an option to list what browsers you want to support and it figures out what prefixes etc. are required to support those browsers based on the non-prefixed version.
With a CSS preprocessor like SASS or LESS you can create a mixin (basically a function) that will add the prefixes you've defined.
I apply a simple rule of thumb: never put a vendor prefix (let user update their browser instead, and avoid non-official/non-yet-finalized CSS rules).
See http://shouldiprefix.com/ if you still want to know which prefixes are "required" (or "worth worrying about").
Last, CSS preprocessors can handle these, but it's often a useless pain to add to your development and release stack (except if you're using other stuff that vendor prefixes, or if you have to deal with old browsers like in companies intranets).
awesome question.
A lot of Programmers use CanIUse to determine if a particular CSS property is supported in all of the browsers they would like to support. If it's not fully-supported in all of the browsers they wish to support, the programmer should use the vendor prefix (i.e. -webkit-).
Example Scenario
Say the programmer wanted to use the Transform property (CanIUse#Transform). See how Android Browser 4.4 & 4.4.4 have yellow warnings in the top right? Hover over them and notice it says 'Supported with -webkit'? This is exactly. when you would add the -webkit- vendor prefix.
I disagree that you have to add them all (although, it really doesn't hurt anything). If you just do a bit of research before you use newer CSS properties, you will have cleaner CSS/SASS/LESS/etc while supporting all of the browser your heart desires. :P
I do think there are awesome tools out there to do this automatically. Xenos mentioned a few.
Best of luck in your CSS endeavors.
These different properties are termed as "vendor prefixes":
-moz- = used for Mozilla Firefox
-ms- = used for Microsoft Internet Explorer
-o- = used for Opera
-webkit- = used for Google Chrome and Apple Safari browsers.
It's always a good approach to use all the vendor prefixes for the css you're applying, in order to address to the browser compatibility of the webpage you're developing.
However, css preprocessors like LESS can handle this thing, if you happen to use them. I personally use LESS to handle all this vendor prefixing stuff and it's really simple. If I weren't using preprocessors, I would still have considered writing vendor prefix css along with the default property name.
It's always a good thing to keep addressing about the compatibility issues well in advance than to run into some and fixing them later.
Try using vendor prefixer tools like:
https://github.com/less/less-plugin-autoprefix
If you want ensure that will work on each browser you need add all of them, some websites dont support old browsers so there is no need to care about browsers which you decide to not support :)
Here is the solution I found, if you are using Visual studio code go to extension and search for css-auto-prefix
I am looking for a CSS minifier (or minifier option) which would remove all the vendor prefixes, expecting all CSS3 to be working without prefix.
Here are the reasons:
I intend to use prefix-free which allow to add those vendors on the fly, client-side
I do not expect handling browsers where javascript would be disabled
The main goal is to have the smallest CSS
Another goal is to not handle vendors in my CSS files, and I do not want Sass mixins or Stylus to add them automatically
I want a minifier so that I can use any library like Foundation or Bootstrap without modifying them
So, are there any minifier out there supporting such an option, or a standalone minifier which I could use to, given some input files (or stream), get output CSS files (or stream) without the prefixed properties, only the standard CSS property?
So, as I couldn't find anything, I did my own CSS vendor de-prefixer. Here is the source, still a prototype, but working and usable:
https://github.com/huafu/css-devendorize
I am running through CSS3 tutorials and I have come across these new requirements. Obviously each browser has different implementations, so you must tell your style sheets to use them. How do you know when a certain browser requires a certain prefix? Is there a single resource that tells you? Is there some sort of magical ultimate include in CSS that will take take of it for you?
On http://caniuse.com it's reported if a CSS property needs the prefix.
Example: http://caniuse.com/#feat=border-radius you can see that old versions of Safari and Android need the -webkit- prefix.
Remember also to place the prefixed properties before the unprefixed one.
This tutorial shows a css blur example with
img {
+filter: blur(30px);
}
then goes on to mention "Note: + stands for vendor prefix". Why is a plus sign used here instead of a vendor prefix such as "-webkit-"?
It's shorthand copied from this authoritative tutorial site. On HTML5Rocks however they didn't neglect putting the correct hover on there, stating "Please apply relevant vendor prefix".
As such, +filter should indeed correctly be written as:
filter:blur(30px);
-o-filter:blur(30px); /* rather obsolete since Opera switched to Webkit */
-ms-filter:blur(30px);
-moz-filter:blur(30px);
-webkit-filter:blur(30px);
The origin is the Compass extension to SASS which allows this syntax as a real shorthand for vendor specific rules.
As you can see on this site however only Webkit currently supports filters. As such you can also ignore the -o- prefix for features that won't be added to Presto anymore anyway.
As you may be know, because CSS3 is not compatible with all of browsers when we use CSS3 we should add a prefix to CSS3 properties (like -moz, -webkit, -o and ...)
It is difficult to write these prefixes manually. So, is there any plugin, program or another thing to detect CSS3 properties in my CSS file and append necessary vendor prefixes to those properties ?
There are several options that come to mind, depending on your use-case:
SASS with Bourbon
SASS with Compass
Less with LESS elements
Emmet
CSS3 Abbreviations (In your text editor)
PrefixFree (client side js)
My personal preference is to use Compass, but the Emmet abbreviations work well if you do not want the overhead of using a CSS pre-processor.
Here is more
Sublimetext plugin https://github.com/sindresorhus/sublime-autoprefixer?source=c
A nice vendor prefix mixin for doing that in SASS here for those that are using SASS