.not-a-square {\r\n -webkit-border-radius: 10px;\r\n -moz-border-radius: 10px;\r\n border-radius: 10px;\r\n}<\/code><\/pre>\nWhy is this method of ordering properties so commonly taught<\/a>? Here is what it would look like “the wrong way”:<\/p>\n.not-a-square {\r\n border-radius: 10px;\r\n -moz-border-radius: 10px;\r\n -webkit-border-radius: 10px;\r\n}<\/code><\/pre>\nEven doing it “the wrong way”, won’t the border radius be the same no matter what, forever? A quick investigation might lead you to conclude that it will, and this ordering of properties is rather nonsense.<\/p>\n
\n- The Long Long Ago:<\/strong> None of the properties are supported, order doesn’t matter.<\/li>\n
- The Past:<\/strong> Only vendor prefixes are supported, order doesn’t matter.<\/li>\n
- The Now:<\/strong> Both vendor prefixes and actual property are supported. If prefix is last, it will override actual property, but both are the same anyway.<\/li>\n
- The Future:<\/strong> Only actual property is supported, order doesn’t matter.<\/li>\n<\/ol>\n
Here’s a simple chart<\/a> with this concept at work.<\/p>\nWoah there, Cowboy<\/h3>\n
The fact is, the ordering of CSS3 properties is important, and the above is fundamentally flawed. “The Now” is exactly the problem. We are at a crucial juncture in browser history where some browsers are supporting both the vendor prefixed version and the actual CSS3 property. Right now it’s specifically WebKit that is doing this, and the way they have implemented it is that if you list the vendor prefix after the actual property, the vendor prefix will override and be the property that renders.<\/p>\n
Why does that matter? In the simple border-radius<\/a> example we saw above, either way, the corners on that element will have a border-radius of 10px. There is no difference in how the vendor prefix and “real” property handle rounded corners when you set only one value<\/em>. The problem is that there is<\/em> a difference between the implementations of the properties when passing more than one value.<\/strong><\/p>\n.not-a-square {\r\n \/* These do totally different things *\/\r\n border-radius: 30px 10px; \r\n -webkit-border-radius: 30px 10px;\r\n}<\/code><\/pre>\nThe spec or “real” version will render the top left and bottom right corners at 30px and the top right and bottom left corners at 10px. The vendor prefix will render all four corners with elliptical corners 30px wide and 10px tall. <\/p>\n
So if you’ve been blindly including the real border-radius<\/code> at the end of your property lists using identical values, and then switch from Safari 4 to Safari 5, you’d see a dramatic change in how the above code was styling your boxes.<\/p>\n\n![\"\"](https://calendarstemplates.com/\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/09\/cornerswrong.png?resize=377%2C189\" "\\"cornerswrong\\"")
<\/p>\nSee here<\/a><\/p>\n<\/div>\nYou could fix this up by fiddling with the values to make sure they do the same thing… but if you are going to fiddle with anything, you might as well fiddle with the real property as that will be supported version in the future. Listing the real property last is definitely the way to go. Because it will be based entirely on the spec, it will match other browsers implementations and will be the only supported version as time goes on and vendor prefixes are removed. <\/p>\n
Border radius isn’t the only example here. Note the dramatically different syntaxes<\/a> for background-image<\/code> gradients. Now there is no “real” spec version of these values yet, but when there is, the implementation will be different than what we are using now. That should be listed last in the ordering of the properties to future proof that as well.<\/p>\nThanks to @mattwiebe<\/a> and @snookca<\/a> for helping me understand this better.<\/p>\n","protected":false},"excerpt":{"rendered":"When writing CSS3 properties, the modern wisdom is to list the “real” property last and the vendor prefixes first:<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[420,1258],"class_list":["post-7361","post","type-post","status-publish","format-standard","hentry","category-articles","tag-css3","tag-ordering-properties"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":8265,"url":"https:\/\/css-tricks.com\/moving-highlight\/","url_meta":{"origin":7361,"position":0},"title":"Moving Highlight","author":"Chris Coyier","date":"January 9, 2011","format":false,"excerpt":"I recently noticed a subtle and nice effect in the Google Chrome UI. As you mouse over inactive tabs, they light up a bit, but also have a gradient highlight that follows your mouse as you move around on them. The guys from DOCTYPE told me it was their inspiration\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/01\/movinghighlightchrometab.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/01\/movinghighlightchrometab.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/01\/movinghighlightchrometab.png?resize=525%2C300 1.5x"},"classes":[]},{"id":4632,"url":"https:\/\/css-tricks.com\/quickie-css3-tricks-with-fallbacks\/","url_meta":{"origin":7361,"position":1},"title":"Quickie CSS3 Tricks with Fallbacks","author":"Chris Coyier","date":"November 6, 2009","format":false,"excerpt":"CSS3 can do some seriously neat stuff. Just check out some of the crazy 3D stuff you can do in WebKit. But as we all know, we need to be careful with what we choose to do with it. The most cutting edge techniques are fun to play with, but\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/growing-links.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/growing-links.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/growing-links.png?resize=525%2C300 1.5x"},"classes":[]},{"id":14001,"url":"https:\/\/css-tricks.com\/tabs-with-round-out-borders\/","url_meta":{"origin":7361,"position":2},"title":"Tabs with Round Out Borders","author":"Chris Coyier","date":"September 4, 2011","format":false,"excerpt":"A technique for a rounded tabs where the top corners are rounded, but also the bottom corners are rounded where they attach to the content area. \"Round out\" or \"flared\" borders, if you will.","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Pseudos.081.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Pseudos.081.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Pseudos.081.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Pseudos.081.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":8417,"url":"https:\/\/css-tricks.com\/different-transitions-for-hover-on-hover-off\/","url_meta":{"origin":7361,"position":3},"title":"Different Transitions for Hover On \/ Hover Off","author":"Chris Coyier","date":"February 3, 2011","format":false,"excerpt":"In other words, \"Different transitions on mouseenter and mouseleave\" as those are the DOM events that happen, but we're not using JavaScript here, we're talking about CSS :hover state and CSS3 transitions. Hover on, some CSS property animates itself to a new value; hover off, a different CSS property animates.\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6150,"url":"https:\/\/css-tricks.com\/jquery-css-abstraction\/","url_meta":{"origin":7361,"position":4},"title":"jQuery CSS Abstraction","author":"Chris Coyier","date":"April 9, 2010","format":false,"excerpt":"It should be said, first and foremost, that you should try to keep your styling and your JavaScript away from each other. If you want to change the style of an element with JavaScript, add (or remove) a class name from the element. Then use that class name as your\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":145960,"url":"https:\/\/css-tricks.com\/autoprefixer\/","url_meta":{"origin":7361,"position":5},"title":"Autoprefixer: A Postprocessor for Dealing with Vendor Prefixes in the Best Possible Way","author":"Andrey Sitnik","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 "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/7361","targetHints":{"allow":["GET"]}}],"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=7361"}],"version-history":[{"count":18,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/7361\/revisions"}],"predecessor-version":[{"id":254289,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/7361\/revisions\/254289"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=7361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=7361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=7361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}