[IMP] website: add a way for css to detect if flex can be used

Website content is not supposed to use flex as it is not supported by
some old browsers. This commit provides a way to use flex only for
browsers which support it. When designing a snippet, you can use flex
to design elements and then write other style for when flex is not
supported.

Using flex should however still be avoided when possible. But hopefully,
this commit will allow to build greater snippets whose ugly non-flex
style can be disabled on demand or dropped in a future odoo version.

1 files changed, 6 insertions, 0 deletions

diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 72a5934fcd6..6b221b801d1 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -23,6 +23,12 @@ odoo.define('website.website', function (require) {
     if (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())) browser += ",mobile";
     document.documentElement.setAttribute('data-browser', browser);
 
+    /* --- Add no-flex attr into the dom if flex is not supported for css selectors --- */
+    var htmlStyle = document.documentElement.style;
+    var isFlexSupported = (('flexWrap' in htmlStyle) || ('WebkitFlexWrap' in htmlStyle) || ('msFlexWrap' in htmlStyle));
+    if (!isFlexSupported) {
+        document.documentElement.setAttribute('data-no-flex', '');
+    }
 
     /* ----------------------------------------------------
        Helpers