Loading css from js causes the content to jump?
I have customized bootstrap 5 and I need to support rtl
I am using rtlcss to generate the .rtl.css file which is working but using the
<link> to include both css files was causing problems, so I used javascript to detect the dir in html tag and then decided which css file to load
using document.head.appendChild(linkElement) where linkElement conttains the path to the .css or .rtl.css file, but this is causing in the beginning the content to jump as if the styles are applying after the page has already loaded how to fix this?
18 Replies
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
If it's not too big, using inline css on the html may be a solution. You could also use a splash screen that hides the content for a few milliseconds, sort of giving the impression that something is being lodead (which I guess it is).
<link> to include both css files was causing problems,What problems? cause this is teh way Loading CSS via JS is going to be bad. Cause it won't apply specially with defer till after page is loaded. Are you using a bundler? Vite, Parcel ?
I am using rtlcss to generate the rtl file, I am not using any bundler, what rtlcss does changes values in a .rtl file doesn;t really check whether dir is ltr or rtl so including both files then they override one the other depending which I use the last
for some reason even some content doesn't show up at all
no inline css cant be a solurion here
no I am not using any content management system, I use the dir in the html manually for now just to test it out
mmm does bootstrap 5 not use logical properties?
I guess I'm wondering how much changes for the rtl that could not be solved with better style types?
How about that splash screen then?
@b1mind it has just renamed the classes ms for margin start which in ltr is margin left and rtl margin right, but what it really does is u need to import either the bootstrap.rtl.css or if you have customized it then you have to generate the rtl using rtlcss
right but I would think that being scss and having post power that it would use logical properties.
I dont really know why they did this implementation is really awful
guess I'll have to go with this way if cant find a new solution
could you just wrap it all in a html[dir="rtl"] ?
so there's no chance of updating the css before runtime? i.e., delivered to user
@b1mind actually didnt try it but the bad thing is that if that wornks that we have to remember everytime we build the rtl from the main file to add it because it would be removed
ok but how much is that lib doing for you? like I see the perks of it being able to control border inset and stuff too. If all you are changing is margin though... Use the attribute selector and or logical properties with @ supports
the problem is I am using bootstrap and bootstrap depends on it
Then it should have proper documentation on how to use it either via <link> or import
Cause this should be a non issue if its batteries included honestly. Are you sure you were putting the <links> in the right order?
rtlcss leveraging PostCSS and what not, lots of power and configuration available.
I have only 2 css files the main and the main.rtl I am using the main first and after the main.rtl
idk
When looking at their docs it looks like node and CLI usage so I have no idea
I am just using the cli
maybe I will have to see the advanced ussage
still not working
I added a splash screen
and I am listening to the load event on the link and then hiding the splash screen but I can still see the content jumping
but if I add a timeout of 500ms then I don't see it but this 500ms I don't think is enough in all devices?