Skip to content

Disable the CSS autoprefixer in the Storefront by default

Disable the CSS autoprefixer in the Storefront by default


This document represents an architecture decision record (ADR) and has been mirrored from the ADR section in our Shopware 6 repository. You can find the original version here


The storefront CSS, compiled by scssphp/scssphp, is currently automatically prefixed with vendor prefixes using padaliyajay/php-autoprefixer. However, the generated prefixes no longer add much value since the browser support has been updated with the Bootstrap v5 update. Most of the prefixes are unnecessary for the supported browsers in .browserslist. Unfortunately, the theme:compile process experiences a significant decrease in performance due to the auto-prefixer, which is particularly problematic in our SaaS solution. Moreover, the padaliyajay/php-autoprefixer package does not work dynamically and fails to consider .browserslist while applying the appropriate vendor-prefixes. This package hard-codes the CSS properties that require prefixing, making it an unsustainable long-term solution. To demonstrate this, a table containing all automatic prefixes generated by padaliyajay/php-autoprefixer is provided below.

Current browser support

>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
Firefox ESR
iOS >= 12
Safari >= 12
not Explorer <= 11

Current auto-prefixes

✅ = Fully covered by current browser support. The prefix is not used by the browser.
⚠️ = Not fully covered by current browser support. Please read the notes.

Current auto-prefixes for Webkit

CSS propertyVendor prefixSupportNotesCan I use
box-reflect-webkit-box-reflect⚠️ No Firefox supportNo cross-browser support was possible using prefixing only
column-count-webkit-column-count✅ Full support
column-gap-webkit-column-gap✅ Full support
column-rule-webkit-column-rule✅ Full support
clip-path-webkit-clip-path⚠️ Partial supportPrefix was needed in Safari 7-13 and iOS 7-12.5
user-select-webkit-user-select✅ Full support
appearance-webkit-appearance✅ Full support
animation-webkit-animation✅ Full support
transition-webkit-transition✅ Full support
transform-webkit-transform✅ Full support
transform-origin-webkit-transform-origin✅ Full support
backface-visibility-webkit-backface-visibility✅ Full support
perspective-webkit-perspective✅ Full support
background-clip-webkit-background-clip⚠️ Partial supportValue "text" needs prefix. Non-standard method of clipping a background image to the foreground text
filter-webkit-filter✅ Full support
font-feature-settings-webkit-font-feature-settings✅ Full support
flow-from-webkit-flow-from⚠️ No supportWas supported in WebKit and IE, implementing the feature is no longer being pursued by any browser
flow-into-webkit-flow-into⚠️ No supportWas supported in WebKit and IE, implementing the feature is no longer being pursued by any browser
hyphens-webkit-hyphens⚠️ Partial supportSafari and iOs need prefix. Value "auto" has full support
mask-image-webkit-mask-image✅ Full supportPrefixed values for gradients (-webkit-linear-gradient) were needed. Later, support for unprefixed values was added.
mask-repeat-webkit-mask-repeat⚠️ Partial supportChrome and Edge need prefix.
mask-position-webkit-mask-position⚠️ Partial supportChrome and Edge need prefix.
mask-size-webkit-mask-size⚠️ Partial supportChrome and Edge need prefix.
display: flexdisplay: -webkit-flex✅ Full support flex
display: inline-flexdisplay: -webkit-inline-flex✅ Full support inline-flex
position: stickyposition: -webkit-sticky⚠️ Partial supportSafari 7.1 - 12.1 needed prefix. Afterwards full unprefixed support inline-flex
::placeholder::-webkit-input-placeholder✅ Full support
::file-selector-button::-webkit-file-upload-button✅ Full support
keyframes-webkit-keyframes✅ Full support

Current auto-prefixes for Mozilla

CSS propertyVendor prefixSupportNotesCan I use
column-count-moz-column-count✅ Full support
column-gap-moz-column-gap✅ Full support
column-rule-moz-column-rule✅ Full support
user-select-moz-user-select✅ Full support
appearance-moz-appearance✅ Full support
font-feature-settings-moz-font-feature-settings✅ Full support
hyphens-moz-hyphens✅ Full support
::placeholder::-moz-placeholder✅ Full support
:placeholder-shown:-moz-placeholder-shown✅ Full support


  • Due to the above points we have decided to disable the CSS auto-prefixing by default.
  • In case it is still needed, to support older browsers or some special CSS property from the table above, it can still be activated via the config key storefront.theme.auto_prefix_css in Storefront/Resources/config/packages/storefront.yaml. However, we recommend to do a manual prefix inside the SCSS instead.
  • We will deprecate the auto-prefixing for v6.6.0 and only use SCSS compiling
  • We do not consider the deactivation of the auto-prefixing as a hard breaking change because:
    • Most prefixes are not needed due to current browser support.
    • Some prefixes are for CSS properties which are no longer implemented and developed by browsers.
    • Prefixes which are still valid are primarily cosmetic/appearance properties which are very unlikely to affect the Storefronts functionality.


When compiling the themes SCSS with theme:compile, the vendor-prefixes are no longer applied by default to the all.css.