Is there any converters (similar to Babel convert ES6 to older ES versions) that can convert CSS3 (e.g. grid, attribute selectors) to older versions of CSS so that development efficiency won't be sacrificed to trade for browser compatibility?
No, because that would require a tool to understand your design intent and then fix it. If it was so easy to create cross browser compatible css by just using a magic tool we would all be using it. Usually I see this done the other way around. Get it to work in all browsers and then hack in fixes for older browsers.
Related
Is there a way find out which version of CSS a browser is using? Most of my end users use their phones, but some don't, and those who don't are amenable to telling me their CSS version if we can figure out what it is. The latest CSS version has elements and styles that will fix some problems I've been having, if I can write code just for it.
All modern browsers support CSS 3. It's been released in 2011.
Despite that, they have differences in support of its features.
Have a look at W3 CSS Browser Support Reference
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
Are there any tools out there that can process a CSS file, inserting -webkit equivalents for styles that aren't 100% supported across the board?
I'm using calc() in my CSS which isn't supported across all browsers. Instead I have to use -webkit-calc() for safari etc.
I'd like a tool that will insert -webkit into the CSS for styles that aren't supported 100% across the board, or to be able to specify the target browsers/versions and have the tool work out whether it needs to be inserted or not. Presumably the tool would have to know what styles were supported in which version of which browsers.
You're looking for -prefix-free.
Are you looking for http://lesscss.org/?
The dynamic stylesheet language.
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
[EDIT]
After answering, i found this website http://prefixr.com/index.php where they use a script to reformat css declarations. Maybe you could study this one.
One of my development teams have written a couple CSS files that work flawlessly with IE. However, the UI is all messed up when rendered on other browsers.
Is there a tool that can take these CSS files and convert them into cross browser version? Unfortunately, these CSS files are too large and the expertise desirable to cook cross browser CSS and test it is lacking in the team at present.
The most recent versions of all prominent browsers need to be supported.
No, because that would require a tool to understand your design intent and then fix it. If it was so easy to create cross browser compatible css by just using a magic tool we would all be using it.
Usually I see this done the other way around. Get it to work in all browsers and then hack in fixes to IE. My guess is that a few simple simple things are grossly affecting the layout. I would fix it for a more standards compliant browser like Firefox and then hack in fixes to old versions of IE as necessary.
You might want to try Prefixr. It did help me with some CrossBrowser issues, but I programmed for Chrome. Don't know how great the compatibility is the other way around.
Similar to disabling JavaScript in browsers, is there a way to disable support for various CSS3 properties in Firefox or Chrome to quickly confirm a page is rendering OK if support for certain properties isn't there? I know it's only a presentation layer, but I'm just hoping there's a more efficient way to test against this without using old browsers, especially if Modernizr is being utilised.
A project called deCSS3 manages to disable a large majority of CSS3 properties through the use of a bookmarklet that overrides and neutralises their usage with !important rules.
A recent addition to the project is "Modernizr class toggling" for an added level of testing when Modernizr is utilised.
Even if there were a way to do so, would it help? Each browser has its own quirks, so there is no guarantee that e.g.:
Firefox - CSS3 = Older Browser
CSS3 isn't a set of additions to CSS2, it replaces CSS2. The backgrounds and borders module in CSS3 includes border and background as well as border-radius and box-shadow. If you 'turn off' CSS3 you turn off all CSS, and even if you could disable the new stuff Tom's answer is correct - that wouldn't leave you testing anything that actually exists in the real world.
If you need a way to "turn off CSS3" then I don't think you're thinking about/implementing progressive enhancement/graceful degradation properly. You should be starting with non-CSS3 stuff, then enhancing your site with it. When you build the non-CSS3 foundation and test it in your target browsers, then adding CSS3 shouldn't change anything (browsers ignore styles they don't recognize). If you sandbox your CSS3 in its own stylesheet, then you can tell old versions of IE to completely ignore it (or, if you're using stuff that's only partially supported in IE9, can tell all versions of IE to ignore it) to save a download.
That said, CSS is handled by the core rendering engine, so in order to view a page without CSS3, you have to view it in a browser that doesn't support CSS3. It sucks, it means you have to have several browsers, and even virtual machines (or physical machines) to test very well, but such is the state of web development, unfortunately. Theoretically, you should be testing in several browsers, anyway, and already know that IE6-8 have their own quirks that don't even relate to CSS3, and should already be set up to test them (so, therefore, if you need to test old versions of other browsers, you can install them in your IE test environment).
There's a useful add-on for Firefox called "User Agent Switcher" which allows you to bump your browser rendering down to an older version of IE (the iPhone rendering is also pretty useful). That should help you double check.