All geek questions in one place

Should I remove vendor prefixes?

I have a website that I support prior to IE8, nothing more.

When I first started the site, I decided to use CSS provider prefixes for CSS elements such as border-radius, box-shadow, etc. I did it from a complete noob perspective.

However, is it better to use them and just let browsers catch up, and not fix for the sake of uniformity?

+6
source share
4 answers

No, you do not have to remove all of them, however you can also remove those that are no longer required.

How do I know which prefixes are no longer required?

Can I use ... is a great resource for checking browser support for various CSS, HTML, and JavaScript functions. For example, if you do a box-sizing search, it will tell you that all modern browsers partially support this, and Firefox requires the -moz- prefix. You can also view all CSS support tables on just one page here .

How can I make it clear that prefixes are no longer required?

There are several online resources that display browser usage information. An example of this is StatCounter . StatCounter offers browser version statistics that can be filtered on time. If we look at the last 3 months , we can expect that we should still strive to support Firefox 20+, Chrome 25+, IE 8+ and Safari 5.1+.

+6
source

Personally, I would just keep your vendor prefixes for now - it still remains a professional practice - those browsers that they don’t need will simply ignore them.

+2
source

If you really want to get rid of prefixes, one solution you can try is prefix-free . This is a javascript plugin that iterates over your stylesheets and, according to the current browser, removes unused ones.
Although I have not tested it, I think that it will reduce performance .

You can also remove prefixes for properties that do not have a sign value for functionality and / or user experience, such as border-radius , box-shadow , etc. You will need to check each element, how it behaves without these properties. For instance. you have a button with border-radius: 4px . In a browser that does not support border radius, it will just have rough corners. You should only consider whether to sacrifice.

+1
source

Our approach is to abandon those that are not needed.

radius border
box-shadow

window size (coming soon? firefox is still using it. Posted by @James Donnelly)

opacity (not a prefix, but no need for ms-filter thingie)
built-in block (same here, no need for built-in + scaling)

+1
source

Source: https://habr.com/ru/post/956143/

More articles:


All Articles