[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.
This commit is contained in:
qsm-odoo
2017-06-12 14:04:56 +02:00
parent fe6ce260a5
commit f8285ef439
+6
View File
@@ -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