Worried about bloat - Question re css duplications
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*/
}This repeats the same elements, even with the same values, between comments
/*rtl:begin:remove*/
My limited knowledge of css, tells me that the comments are purely for human readability and that the code between these comments isn't treated differently. So it just looks like code has been unnecessarily duplicated.. even if the values for those attributes was different, the subsequent values would be selected irrespective of rtl or ltr... My understanding that the only way to adjust for context was to create a .rtl_class, that has it's own properties and add this with javascript/jquery when needed.
But instead of the style sheet being split with a nested rtl condition,
ie.
body {
.rtl{
}
.ltr{
}
}
all the styles are in the same class condition.
What gives? Please advise as I'm looking into stripping things back..
Also, if this is legitimate duplication, any changes you guys could release the distros with clean stylesheets?
Replies (3)
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 previousor am I incorrect about this assumption?
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 supersedesWhile the RTL mode CSS code will skip the code wrapped
/*rtl:begin:remove*/
...this is a workaround way to support RTL/LTR modes in Metronic 8.x with Bootstrap 5.
Metronic 9 Tailwind uses different approach and you can switch to RTL mode by just adding dir="rtl" to the body tag:
https://keenthemes.com/metronic/tailwind/docs/customization/rtl
Regards,
Sean
