<\/a><\/figure>\nIf you do this, it means the onus is on you<\/strong> to keep things up to date<\/a>. Prefixes aren’t as volatile they once were, but a look every few months is certainly warranted.<\/p>\n You still hand-author the CSS, but you only use the un-prefixed properties\/values\/at-rules. -prefix-free<\/a> is a bit of JavaScript that runs, looks through all your CSS, and appends to the page new styles with the proper prefixes needed to make those styles work, if necessary. <\/p>\n This is holy war territory. It makes CSS files smaller! Yeah but it runs the risk of flashes of un-CSS3’d elements! It requires JavaScript for styles, crossing the streams! Yeah but it’s only 2k! It’s progressive enhancement at its finest since it will stop prefixing when browsers stop needing it!<\/p>\n You decide.<\/p>\n It’s also worth noting that jQuery’s I’m not a fan of applying CSS through JavaScript usually, but good to know as there are always exceptions to rules.<\/p>\n If you prefer not hand authoring the prefixes but ultimately your workflow deploys hand-authored CSS, you could run your CSS through Prefixr<\/a> before deploying. It essentially parses your CSS, finds things that need prefixing, and does it for you. <\/p>\n It’s very smart in that you don’t have to have CSS that is specifically void of prefixes (like -prefix-free requires). For example if you just happen to be missing one of the required three prefixes, it will see that and only add the missing one.<\/p>\n It also has ways to be added to workflows<\/a> via the command line or popular text areas.<\/p>\n One of the big reasons to use CSS preprocessors at all is because of the help with vendor prefixing. <\/p>\n If you use Sass, Compass<\/a> or Bourbon<\/a> have robust sets of CSS3 mixins for you.<\/p>\n If you use LESS, I have a set of them<\/a> or you could look at this roundup<\/a> comparing some others.<\/p>\n This is a really great way to do it. It’s all laid out in this article<\/a>. Essentially you just forget about prefixing and this build step will add the prefixes for you according to the lastest and greatest information from CanIUse<\/a>.<\/p>\n One mistake I sometimes see is that people just use all the major prefixes on every CSS3 property. It appears they have a generic mixin that they just put everything through that slaps on the prefixes. If you’ve seen something like Another mistake is letting CSS get stale. As I mentioned earlier, it’s worth a look at CSS older than a couple of months to make sure it’s up to snuff. If you see anything outdated on this site, please let me know and I’ll update it right away.<\/p>\n","protected":false},"excerpt":{"rendered":" There are plenty of different ways to deal with vendor prefixes in CSS as part of your workflow. It depends on if you hand-author CSS or preprocess, and even then there are choices.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4,20],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":145960,"url":"https:\/\/css-tricks.com\/autoprefixer\/","url_meta":{"origin":19596,"position":0},"title":"Autoprefixer: A Postprocessor for Dealing with Vendor Prefixes in the Best Possible Way","date":"August 7, 2013","format":false,"excerpt":"The following is a guest post by Andrey Sitnik, the creator of the Autoprefixer tool, a \"postprocessor\" for handling vendor prefixes in CSS. Why use this instead of your preprocessor or another tool? Many reasons. Andrey will explain. Autoprefixer parses CSS files and adds vendor prefixes to CSS rules using\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":339518,"url":"https:\/\/css-tricks.com\/is-vendor-prefixing-dead\/","url_meta":{"origin":19596,"position":1},"title":"Is Vendor Prefixing Dead?","date":"May 5, 2021","format":false,"excerpt":"Let\u2018s take a quick stroll down memory-lane to revisit how vendor prefixing CSS properties came to be. I hope I don\u2019t trigger PTSD for anyone! It\u2018s not clear who started prefixing, or when it began exactly. What is clear, is that by 2006, prefixed features were in Internet Explorer and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/prefixing-history.png?fit=988%2C506&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":158646,"url":"https:\/\/css-tricks.com\/myth\/","url_meta":{"origin":19596,"position":2},"title":"Myth","date":"December 18, 2013","format":false,"excerpt":"I thought I'd weigh in here... Calling it a \"postprocessor\" is weird. It gets parsed into CSS before the browser sees it, so it's a preprocessor. If something parses the CSS out from the browser, it can be a postprocessor, ala -prefix-free. I really love the idea of authoring as\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7361,"url":"https:\/\/css-tricks.com\/ordering-css3-properties\/","url_meta":{"origin":19596,"position":3},"title":"Ordering CSS3\u00a0Properties","date":"September 7, 2010","format":false,"excerpt":"When writing CSS3 properties, the modern wisdom is to list the \"real\" property last and the vendor prefixes first: .not-a-square { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } Why is this method of ordering properties so commonly taught? Here is what it would look like \"the wrong way\": .not-a-square {\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":16267,"url":"https:\/\/css-tricks.com\/tldr-on-vendor-prefix-drama\/","url_meta":{"origin":19596,"position":4},"title":"TL;DR on Vendor Prefix Drama","date":"February 10, 2012","format":false,"excerpt":"Quick overview of the hot drama regarding vendor prefixes.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":16220,"url":"https:\/\/css-tricks.com\/a-proposal-to-drop-browser-vendor-prefixes\/","url_meta":{"origin":19596,"position":5},"title":"A proposal to drop browser vendor prefixes","date":"February 3, 2012","format":false,"excerpt":"Interesting idea by Felipe G on using a new at-rule, @-vendor-unlock, to tell the browser to use it's experimental implementation of any particular property, rather than using a vendor prefix on that property. Unfortunately at this point, even if you could get all the browsers on board, you'd need to\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19596"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=19596"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19596\/revisions"}],"predecessor-version":[{"id":148917,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19596\/revisions\/148917"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=19596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=19596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=19596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Hand Author – Don’t Prefix – Let -prefix-free do it client side<\/h3>\n
<\/a><\/figure>\n.css()<\/code> method will do<\/a> some prefixing for you. <\/p>\n$(\"body\").css({\r\n \r\n \/\/ Will NOT prefix\r\n \"background\": \"linear-gradient(#ccc, #666)\",\r\n\r\n \/\/ Doesn't need to, so won't\r\n \"box-shadow\": \"inset 0 0 5px black\",\r\n\r\n \/\/ WILL prefix\r\n \"transform\" : \"rotate(5deg)\"\r\n\r\n});<\/code><\/pre>\nHand Author – Fix up with Prefixr<\/h3>\n
<\/a><\/figure>\nPreprocess – Use mixins<\/h3>\n
<\/a><\/figure>\nHand Author – Don’t Prefix – Post Process with Autoprefixer<\/h3>\n
“Don’ts”<\/h3>\n
-o-border-radius<\/code>, that’s what I mean. That has never existed and never needs to go into your CSS.<\/p>\n