Hi Team
In the CSS files for the HTML Bootstrap version (style.bundle.css), i notice what seems to be a lot of duplication. The files are massive 50k lines of code. When I want to find something for troubleshooting / customising, it's a real needle in a haystack - and I've noticed many instances of redundancy eg. restating multiple :root color[dark-theme]/[light-theme] definitions, body styles, etc.
Within individual definitions I've also noticed many duplicates but I'm not sure if that due to my lack of css knowledge.
eg.
.menu-item .menu-link .menu-arrow:after {
display: block;
width: 100%;
content: " ";
will-change: transform;
background-size: 100% 100%;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
background-color: var(--bs-text-muted);
-webkit-mask-image: url(");
mask-image: url("");
/*rtl:begin:remove*/
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
background-color: var(--bs-text-muted);
-webkit-mask-image: url("");
mask-image: url("");
/*rtl:end:remove*/
}
Hi,
May I know which Metronic version are you using ? Do you need RTL support or default version if fine for you ?
The code you mentioned above will be printed for RTL version CSS files. Yes, the main CSS file has some extra code for RTL support. We use CSSRTL tool to generate the RTL version so we needed to follow the special format /*rtl:begin:remove*/ to make it work for the RTL version.
To reduce the size of the plugins bundle you can also refer to this guide.
Regards,
Sean
Hey Sean / Legend!
I'll follow up your guide, but in the existing style.css as is (the ones published for example to v8.2.8), am I correct in my understanding that the repeated lines of css are redundant, as the browser css engine simply prioritizes the more recent line?
ie
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
background-color: var(--bs-text-muted); <--- this is superseded by the one below
-webkit-mask-image: url(");
mask-image: url("");
/*rtl:begin:remove*/
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
background-color: var(--bs-text-muted); <--- this supersedes the previous
Hi,
Yes, the default LTR mode uses the last
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
background-color: var(--bs-text-muted); <--- this supersedes
/*rtl:begin:remove*/
...