Key Points
-webkit- in CSS causes some websites to fail to function properly without it, forcing Mozilla to support non-standard -webkit prefixes to improve Firefox compatibility with web pages using -webkit- prefix, This is consistent with Microsoft Edge and Opera's approach. -moz- prefix, as new changes may affect their websites on Firefox 46 or 47 performance. Since the -webkit- prefix dominates CSS on the network, some websites don't work properly without it. While this is clearly a sign that the developer’s approach is not ideal in the past few years, it has led to a rather unfortunate but almost necessary measure by Mozilla. Until Firefox 46 or 47 (released in April or May 2016, respectively), Mozilla plans to implement support for a range of non-standard -webkit- prefixes to improve Firefox and use -webkit prefixes (usually mobile) Web page compatibility.
This is not a new idea, and Microsoft Edge also supports a range of -webkit- prefixes for compatibility. Opera began implementing the -webkit- prefix as early as 2012 and has since moved to the WebKit-based Blink engine.
W3C and browser manufacturers do not intend to use manufacturer prefix on production websites:
"W3C's official policy statement, you shouldn't use experimental attributes in production code, but people do because they want to make the website look cool and stay at the forefront of technology." - W3C About Optimization Pages with different browser content
However, developers everywhere want to use them as soon as possible to access the latest features. While prefixes have caused some confusion due to WebKit's dominance, I think they have successfully helped the network grow rapidly. Mozilla and Microsoft's approach may be harmless to most websites. Most online sites may already include the -moz- prefix, or you will find that Mozilla's updates need no action to improve compatibility of their website. However, as professional web developers, we need to be thorough and understand that some designs may have abnormal results. You may already know which of your works may be interrupted by updates.
Developers, it's obviously time to rethink how you use prefixes and test these sites.
Prefixes involved
Mozilla may need to include a series of -webkit- prefixes. As far as I understand, Mozilla is not going to match the -webkit- prefix list supported by Edge, because not all of this may require ensuring that Mozilla's Gecko layout engine is compatible with the wider network.
According to their statement on the wiki page on compatibility/mobile/nonstandard compatibility, the prefixes that Mozilla may adopt include:
-webkit-flexbox-webkit- Gradient of prefix-webkit-transforms-webkit-transitions-webkit-appearance-webkit-background-clip-webkit-device-pixel-ratio-webkit-animation-webkit-border*Some other features may also be affected, such as @-webkit-keyframes.
Cross-browser testing is crucial
If you are a web developer who omits the -moz- prefix to avoid the need to test newer CSS features on Firefox—let's assume you're in a hurry and your customers force you to do so—you'll need Retest the site in Firefox 46 or 47. These versions of Firefox will be released in April or May, so you have some time to plan ahead.
To test your website before these changes arrive on Firefox 46/47, you can access the current status of the changes in Firefox Nightly through the about:config preferences in layout.css.prefixes.webkit. If you have the latest Nightly version installed, it should be set to true by default. Not all -webkit- prefix changes have appeared in Firefox Nightly, but this is where you can test your site's current appearance. I recommend waiting until around March to use Firefox Nightly for a more thorough test.
More urgently, Microsoft Edge has interpreted and displayed the -webkit- prefix in this way. This means that any WebKit specific styles included in your website may have already been displayed in a browser you didn't expect. If you haven't done so, visit Microsoft Edge in Windows 10 and test these sites!
Manufacturer prefix is disappearing
Luckily, the vendor prefix appears to be disappearing as the browser team looks for a better solution. The Chrome/Blink team tweaked their approach:
"Looking forward, we will no longer use vendor prefix to enable the default feature, but instead leave the (unprefixed) feature behind the Enable Experimental Web Platform Features flag in
about:flagsuntil the feature is ready to default Until enabled.”——Chrome/Blink Team
The Firefox team is moving towards a similar approach:
"On its own terms, the current trend within Mozilla is to avoid vendor prefixes by turning off features before release or publishing features without prefixes if they are stable enough. At least as a general strategy; Exceptions may be required for specific cases.”—Boris from Mozilla
Microsoft Edge aims to completely remove support for prefixes:
"Microsoft is also getting rid of Edge's vendor prefixes. This means that in order for developers to take advantage of special HTML5 or CSS features, they don't have to use specific Edge prefixes. Instead, they just need to encode according to the web standards. ”——Mashable
No more elegant downgrades through prefixes
This move away from the manufacturer's prefix means one aspect - elegant downgrades through the manufacturer's prefix are obviously not feasible.
Using vendor prefixes to locate specific browsers (for example, specific content for Chrome only) is not the intention of vendor prefixes; it is always recommended that developers use all available vendor prefixes (from -webkit- to -o-). If you are using a feature that relies on prefixed attributes, and you elegantly lower the design on other browsers using prefixes, this won't work anymore.
Conclusion
Times are changing. WebKit's dominance has inadvertently led to network splits and incompatibility, and other browsers are trying to improve their compatibility to keep pace by implementing the -webkit- prefix. While this problem should disappear as vendor prefixes are phased out, developers need to check that their use of prefixes does not produce unexpected results in non-WebKit browsers.
Useful links
-webkit- prefix into the standard of online lifeFrequently Asked Questions about Manufacturer Prefixes in CSS
The vendor prefix is a way for browser manufacturers to add new CSS features before they become part of the official CSS specification. They are used to ensure that these new features do not interfere with existing features in other browsers. This allows developers to experiment with new features and provide feedback to the CSS specification process.
The necessity of vendor prefixes has always been a topic of debate among web developers. While they were once crucial to ensuring cross-browser compatibility, modern web has seen significant standardization of CSS capabilities among different browsers. Therefore, the demand for vendor prefixes is greatly reduced, but in some cases it is still used for experimental functions.
Some common vendor prefixes include -webkit- (Chrome, Safari, newer Opera version), -moz- (Firefox), -o- (old, pre-WebKit Opera version), and -ms- (Internet Explorer and Microsoft Edge).
To use a vendor prefix, just add it before the CSS property in the stylesheet. For example, to use the border-radius attribute with Firefox vendor prefix, you can write -moz-border-radius: 10px;.
The main disadvantage of using vendor prefixes is that they make your CSS code more complex and harder to maintain. Each browser has its own vendor prefix, so you may need to write multiple lines of code for a single CSS property. Additionally, vendor prefixes can cause code verification issues as they are not part of the official CSS specification.
One way to avoid vendor prefix issues is to use a CSS preprocessor like Sass or Less, which automatically adds vendor prefixes to your code. Another option is to use a postprocessor like Autoprefixer, which can add vendor prefixes based on the browser you want to support.
Yes, there are alternatives to using vendor prefixes. An alternative is to use a feature detection library like Modernizr, which allows you to test specific CSS features and provide a fallback solution for browsers that do not support them. Another alternative is to use CSS Grid or Flexbox, which are now widely supported and do not require vendor prefixes.
The future of the manufacturer's prefix in CSS is uncertain. While they are still in use in some cases, the trend is to move towards standardization and use of functional detection rather than vendor prefixes. However, they are likely to remain part of the CSS environment for the foreseeable future.
Vendor prefixes may affect website performance because they increase the size of the CSS code. However, the impact is usually small, especially if you use a CSS compressor to compress your code.
Because of the rapidly changing nature of web development, keeping abreast of the latest developments in vendor prefixes can be challenging. However, it can be helpful to follow CSS-related blogs, forums, and social media accounts. Additionally, the CSS Working Group’s website and Mozilla Developer Network are excellent resources to keep up to date with the latest information.
The above is the detailed content of It's Time to Rethink Vendor Prefixes in CSS. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
