{"id":431,"date":"2015-03-06T17:02:53","date_gmt":"2015-03-06T16:02:53","guid":{"rendered":"https:\/\/www.nullalo.com\/?p=431"},"modified":"2025-10-22T10:20:35","modified_gmt":"2025-10-22T08:20:35","slug":"css-gestire-i-prefissi-vendor","status":"publish","type":"post","link":"https:\/\/www.nullalo.com\/en\/css-handling-vendor-prefixes\/","title":{"rendered":"CSS – Handling vendor prefixes"},"content":{"rendered":"

<\/p>\n

CSS vendor prefixes or CSS browser prefixes are a way for browser makers to add support for new CSS features in a sort of testing and experimentation period. Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn\u2019t been finalized.<\/p>\n

The CSS browser prefixes are:<\/p>\n

Android<\/strong>: -webkit-
\nChrome<\/strong>: -webkit-
\nFirefox<\/strong>: -moz-
\nInternet Explorer<\/strong>: -ms-
\niOS<\/strong>: -webkit-
\nOpera<\/strong>: -o-
\nSafari<\/strong>: -webkit-<\/code><\/p>\n

In most cases, to use a more advanced CSS style property, you take the standard CSS property and add the prefix above for each browser. For example, if you want to add a CSS3 transition to your document, you would use the transition property with the prefixes listed first:<\/p>\n

-webkit-transition: all 4s ease;\r\n-moz-transition: all 4s ease;\r\n-ms-transition: all 4s ease;\r\n-o-transition: all 4s ease;\r\ntransition: all 4s ease;<\/pre>\n
Note: don\u2019t assume that the browser-prefixed version of a property is exactly the same as the standard property<\/strong>. For example, to create a CSS gradient, you use the linear-gradient<\/em> property. Firefox, Opera, and modern versions of Chrome and Safari use that property with the appropriate prefix. But early versions of Chrome and Safari use the prefixed property –webkit-gradient<\/em>. Also, Firefox uses different values than the standards.<\/p>\n
Vendor Prefixes are Not a Hack<\/h4>\n
A CSS hack exploits flaws in the implementation of another element or property in order to get another property to work correctly.<\/p>\n
For example, the box model hack<\/a> exploits flaws in the parsing of the voice-family property or in how browsers parse back-slashes (\\). But these hacks are used to fix the problem of the difference between how Internet Explorer 5.5 handled the box model and how Netscape interpreted it, and have nothing to do with the voice family style.<\/p>\n
A vendor prefix isn\u2019t a hack because it allows the specification to set up rules for how a property might be implemented, while at the same time allowing browser makers to implement a property in a different way without breaking everything else.<\/p>\n
They also allow browser makers to create new features in their browsers before the specification has caught up. They can use the prefixes to state that these properties are \u201cin progress.\u201d<\/p>\n
Instead of being a hack, vendor prefixes are a proactive approach to prevent problems before they happen.<\/p>\n
Vendor Prefixes are Annoying But Temporary<\/h4>\n
When you use browser prefixes with the standard prefix listed last, you are setting your web pages up to be future proofed. Browsers that use the prefixes will use them and ignore the properties they don\u2019t understand. Browsers that can support the standards based properties will implement them because they are listed last in your style sheet.<\/p>\n
Yes, might feel annoying and repetitive to have to write the properties 2\u20135 times to get it to work in all browsers, but it\u2019s temporary. As browsers improve, they add support for the standards based version of the property, and you can remove the prefixed versions. For example, just a few years ago, to set a rounded corner on a box you had to write:<\/p>\n
-moz-border-radius: 10px 5px;\r\n-webkit-border-top-left-radius: 10px;\r\n-webkit-border-top-right-radius: 5px;\r\n-webkit-border-bottom-right-radius: 10px;\r\n-webkit-border-bottom-left-radius: 5px;\r\nborder-radius: 10px 5px;<\/pre>\n
But now you really only need the standards version:<\/p>\n
border-radius: 10px 5px;<\/pre>\n
Chrome has supported the CSS3 property since version 5.0, Firefox added it in version 4.0, Safari added it in 5.0, Opera in 10.5, iOS in 4.0, and Android in 2.1. Even Internet Explorer 9 supports it without a prefix (and IE 8 and lower didn\u2019t support it with or without prefixes).<\/p>\n
Remember that browsers are always going to be changing and some type of hack will be required unless you\u2019re planning on building web pages that are years behind the most modern methods. And writing browser prefixes is much easier than finding and exploiting errors that will most likely be fixed in a future version, requiring that you find another error to exploit and so on.<\/p>\n
The Quick Solution<\/h4>\n
There is a script that allows you to write unprefixed properties: it works behind the scenes, adding the current browser\u2019s prefix to any CSS code, only when it\u2019s needed.<\/p>\n
You can find it here:<\/p>\n
http:\/\/leaverou.github.io\/prefixfree\/<\/a><\/p>\n
<\/p>","protected":false},"excerpt":{"rendered":"
CSS vendor prefixes or CSS browser prefixes are a way for browser makers to add support for new CSS features in a sort of testing and experimentation period. Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in<\/p>\n","protected":false},"author":2,"featured_media":442,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[26,6],"tags":[27,30,28],"class_list":["post-431","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-uncategorized","tag-css","tag-prefissi","tag-vendor"],"yoast_head":"\nCSS - Handling vendor prefixes - Nullalo!<\/title>\n<meta name=\"description\" content=\"I\u00a0prefissi vendor (o prefissi browser) dei CSS sono un modo che\u00a0i produttori di browser hanno per aggiungere il supporto per nuove funzionalit\u00e0 CSS in una\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.nullalo.com\/?p=431\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS - Handling vendor prefixes - Nullalo!\" \/>\n<meta property=\"og:description\" content=\"I\u00a0prefissi vendor (o prefissi browser) dei CSS sono un modo che\u00a0i produttori di browser hanno per aggiungere il supporto per nuove funzionalit\u00e0 CSS in una\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.nullalo.com\/?p=431\" \/>\n<meta property=\"og:site_name\" content=\"Nullalo!\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/nullalo\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fulvio.sicurezza\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-06T16:02:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-22T08:20:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.nullalo.com\/wp-content\/uploads\/2015\/03\/css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1140\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fulvio Sicurezza\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/FulvioSicurezza\" \/>\n<meta name=\"twitter:site\" content=\"@Nullalo\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fulvio Sicurezza\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.nullalo.com\/?p=431\",\"url\":\"https:\/\/www.nullalo.com\/?p=431\",\"name\":\"[:it]CSS - Gestire i prefissi vendor[:en]CSS - Handling vendor prefixes[:] - Nullalo!\",\"isPartOf\":{\"@id\":\"https:\/\/www.nullalo.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.nullalo.com\/?p=431#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.nullalo.com\/?p=431#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.nullalo.com\/wp-content\/uploads\/2015\/03\/css.jpg\",\"datePublished\":\"2015-03-06T16:02:53+00:00\",\"dateModified\":\"2025-10-22T08:20:35+00:00\",\"author\":{\"@id\":\"https:\/\/www.nullalo.com\/#\/schema\/person\/fe9c2885376a6ab076e06461ae1b546c\"},\"description\":\"I\u00a0prefissi vendor (o prefissi browser) dei CSS sono un modo che\u00a0i produttori di browser hanno per aggiungere il supporto per nuove funzionalit\u00e0 CSS in una\",\"breadcrumb\":{\"@id\":\"https:\/\/www.nullalo.com\/?p=431#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.nullalo.com\/?p=431\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.nullalo.com\/?p=431#primaryimage\",\"url\":\"https:\/\/www.nullalo.com\/wp-content\/uploads\/2015\/03\/css.jpg\",\"contentUrl\":\"https:\/\/www.nullalo.com\/wp-content\/uploads\/2015\/03\/css.jpg\",\"width\":1140,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.nullalo.com\/?p=431#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.nullalo.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS – Gestire i prefissi vendor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.nullalo.com\/#website\",\"url\":\"https:\/\/www.nullalo.com\/\",\"name\":\"Nullalo!\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.nullalo.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.nullalo.com\/#\/schema\/person\/fe9c2885376a6ab076e06461ae1b546c\",\"name\":\"Fulvio Sicurezza\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.nullalo.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.nullalo.com\/wp-content\/uploads\/2015\/02\/Fulvio-Sicurezza_avatar_1424711147-96x96.jpg\",\"contentUrl\":\"https:\/\/www.nullalo.com\/wp-content\/uploads\/2015\/02\/Fulvio-Sicurezza_avatar_1424711147-96x96.jpg\",\"caption\":\"Fulvio Sicurezza\"},\"sameAs\":[\"http:\/\/www.generalservice.na.it\",\"https:\/\/www.facebook.com\/fulvio.sicurezza\",\"http:\/\/it.linkedin.com\/in\/fulviosicurezza\",\"https:\/\/x.com\/https:\/\/twitter.com\/FulvioSicurezza\",\"https:\/\/www.youtube.com\/c\/FulvioSicurezzaIT\"],\"url\":\"https:\/\/www.nullalo.com\/en\/author\/f-sicurezza\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS - Handling vendor prefixes - Nullalo!","description":"I\u00a0prefissi vendor (o prefissi browser) dei CSS sono un modo che\u00a0i produttori di browser hanno per aggiungere il supporto per nuove funzionalit\u00e0 CSS in una","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.nullalo.com\/?p=431","og_locale":"en_US","og_type":"article","og_title":"CSS - Handling vendor prefixes - Nullalo!","og_description":"I\u00a0prefissi vendor (o prefissi browser) dei CSS sono un modo che\u00a0i produttori di browser hanno per aggiungere il supporto per nuove funzionalit\u00e0 CSS in una","og_url":"https:\/\/www.nullalo.com\/?p=431","og_site_name":"Nullalo!","article_publisher":"https:\/\/www.facebook.com\/nullalo","article_author":"https:\/\/www.facebook.com\/fulvio.sicurezza","article_published_time":"2015-03-06T16:02:53+00:00","article_modified_time":"2025-10-22T08:20:35+00:00","og_image":[{"width":1140,"height":600,"url":"https:\/\/www.nullalo.com\/wp-content\/uploads\/2015\/03\/css.jpg","type":"image\/jpeg"}],"author":"Fulvio Sicurezza","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/FulvioSicurezza","twitter_site":"@Nullalo","twitter_misc":{"Written by":"Fulvio Sicurezza","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.nullalo.com\/?p=431","url":"https:\/\/www.nullalo.com\/?p=431","name":"[:it]CSS - Gestire i prefissi vendor[:en]CSS - Handling vendor prefixes[:] - Nullalo!","isPartOf":{"@id":"https:\/\/www.nullalo.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.nullalo.com\/?p=431#primaryimage"},"image":{"@id":"https:\/\/www.nullalo.com\/?p=431#primaryimage"},"thumbnailUrl":"https:\/\/www.nullalo.com\/wp-content\/uploads\/2015\/03\/css.jpg","datePublished":"2015-03-06T16:02:53+00:00","dateModified":"2025-10-22T08:20:35+00:00","author":{"@id":"https:\/\/www.nullalo.com\/#\/schema\/person\/fe9c2885376a6ab076e06461ae1b546c"},"description":"I\u00a0prefissi vendor (o prefissi browser) dei CSS sono un modo che\u00a0i produttori di browser hanno per aggiungere il supporto per nuove funzionalit\u00e0 CSS in una","breadcrumb":{"@id":"https:\/\/www.nullalo.com\/?p=431#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.nullalo.com\/?p=431"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.nullalo.com\/?p=431#primaryimage","url":"https:\/\/www.nullalo.com\/wp-content\/uploads\/2015\/03\/css.jpg","contentUrl":"https:\/\/www.nullalo.com\/wp-content\/uploads\/2015\/03\/css.jpg","width":1140,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/www.nullalo.com\/?p=431#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.nullalo.com\/"},{"@type":"ListItem","position":2,"name":"CSS – Gestire i prefissi vendor"}]},{"@type":"WebSite","@id":"https:\/\/www.nullalo.com\/#website","url":"https:\/\/www.nullalo.com\/","name":"Nullalo!","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.nullalo.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.nullalo.com\/#\/schema\/person\/fe9c2885376a6ab076e06461ae1b546c","name":"Fulvio Sicurezza","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.nullalo.com\/#\/schema\/person\/image\/","url":"https:\/\/www.nullalo.com\/wp-content\/uploads\/2015\/02\/Fulvio-Sicurezza_avatar_1424711147-96x96.jpg","contentUrl":"https:\/\/www.nullalo.com\/wp-content\/uploads\/2015\/02\/Fulvio-Sicurezza_avatar_1424711147-96x96.jpg","caption":"Fulvio Sicurezza"},"sameAs":["http:\/\/www.generalservice.na.it","https:\/\/www.facebook.com\/fulvio.sicurezza","http:\/\/it.linkedin.com\/in\/fulviosicurezza","https:\/\/x.com\/https:\/\/twitter.com\/FulvioSicurezza","https:\/\/www.youtube.com\/c\/FulvioSicurezzaIT"],"url":"https:\/\/www.nullalo.com\/en\/author\/f-sicurezza\/"}]}},"_links":{"self":[{"href":"https:\/\/www.nullalo.com\/en\/wp-json\/wp\/v2\/posts\/431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nullalo.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nullalo.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nullalo.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nullalo.com\/en\/wp-json\/wp\/v2\/comments?post=431"}],"version-history":[{"count":1,"href":"https:\/\/www.nullalo.com\/en\/wp-json\/wp\/v2\/posts\/431\/revisions"}],"predecessor-version":[{"id":1975,"href":"https:\/\/www.nullalo.com\/en\/wp-json\/wp\/v2\/posts\/431\/revisions\/1975"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nullalo.com\/en\/wp-json\/wp\/v2\/media\/442"}],"wp:attachment":[{"href":"https:\/\/www.nullalo.com\/en\/wp-json\/wp\/v2\/media?parent=431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nullalo.com\/en\/wp-json\/wp\/v2\/categories?post=431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nullalo.com\/en\/wp-json\/wp\/v2\/tags?post=431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}