Wappler + css with a parameter

Wappler General How To
#1

Hey everybody.
I have a question about how can I handle editing css avoiding the cache.
Wappler don’t recognize the workaround I use (with a good reason, of course).

The thing is the site I’m working on has some users and if I publish an edited css, well the feedback won’t be good.

That’s why I’m using:
css/style.css?ver=1 to “force” the load.
In fact, I’m using:
href="css/style.css<?php echo '?rnd='.mt_rand(); ?>" /> so I don’t need to manually change it on every file.

The solution works as expected on every user browser, but when I go back to Wappler, it wont let me edit the file cause it doesn’t recognize the path, so I comment everytime the link lines when I need to make a change:
<!-- <link rel="stylesheet" type="text/css" href="css/style.css<?php echo '?rnd='.mt_rand(); ?>" /> -->
<link rel="stylesheet" href="css/style.css" />

I have no problem on comment a line, as I achieve the result I want, but:
There’s out there a better way to handle this?

Thanks in advance.

#2

Hi.
What do you mean by Wappler does not allow you to update the file?
You can open the css as any other file and make whatever changes you want.

#3

Thanks for the reply sid,
When I have
<link rel="stylesheet" type="text/css" href="css/style.css<?php echo '?rnd='.mt_rand(); ?>" />
Turns out that Wappler doesnt load the style.css file, so I have to comment that line (with the parameter) and uncomment the line with the clean css to be able to edit.
It’s not a big problem, I just only want to know if there’s a fastest/better way…

#4

Hi Fran, u can use Cache control on the server: u just need to configure HTTP headers on the server to instruct browsers not to cache the CSS file or to set a short lifespan for the cache. This ensures that the browser requests a more updated version of the file more frequently.

here’s how you would do it:

  1. Open or create a .htaccess file in the root directory of your website (or in the directory where the css/style.css file is located).
  2. Add the following lines of code to configure the cache :
<IfModule mod_headers.c>
    # Disable cache for css/style.css
    <FilesMatch "css/style\.css$">
        Header set Cache-Control "no-cache, no-store, must-revalidate"
        Header set Pragma "no-cache"
        Header set Expires 0
    </FilesMatch>
</IfModule>

These lines of code will ensure that the css/style.css file is delivered without caching to the browser, ensuring that the most recent version of the file is always requested.

If you want a short lifespan, let’s say 5 minutes, for the cache, you can achieve that by setting the “max-age” directive in the Cache-Control header to 300 seconds (5 minutes). Here’s how you can do it using again the .htaccess file:

<IfModule mod_headers.c>
    # Set a short cache lifespan for css/style.css (5 minutes)
    <FilesMatch "css/style\.css$">
        Header set Cache-Control "max-age=300, public"
    </FilesMatch>
</IfModule>
1 Like
#5

You mean in the preview section in Wappler itself? Or on the browser?

#6

Hey Max, appreciate the reply, it was my first approach, but in this particular case, I can’t modify the htaccess.

Also, this don’t work for me :frowning_face: :

image
image975×208 13.8 KB

Exactly, having styles.css?X=Y:
image
(So I have to comment the “?X=Y” edit the styles, and then uncomment the “?X=Y” part again.)

1 Like
#7
#8

This is the information you should have shared in bug report to begin with.
George has tagged Patrick, so maybe a fix will be released in future.

For now, I can just suggest to write your CSS in file directly - if you know how. I don’t use the styles panel myself, and always just work in file directly.
Also, using custom CSS is not something that is required very often given that BS has classes for various use-cases.
And even if I have to write custom CSS, I prefer to just create a class out of it and use that.

#9

Hi Sid! I never tought it was a bug.
In my mind was correct that wappler dont recognize style.css?v=1
Do you all understand that I have linked a css with a variable on my code right?
Sorry if i’m not being clear

#10

The design panel indeed has problems detecting the file url when it has query parameters. Will have it improved with the next Wappler Beta.

4 Likes