Clever Geek Handbook

Why is my css showing?

System details:
Server: Apache, Ubuntu 16.02
Client: Windows 10, Chrome

My apache config file looks like this:

<VirtualHost *:80>
       ServerName mycoolsiteA.mydomain.com
       ServerAlias mycoolsiteB.mydomain.com

       Alias /static /var/www/python/mysite/static
       Alias /templates /var/www/python/mysite/templates

       WSGIDaemonProcess my_app user=www-data group=www-data threads=5
       WSGIScriptAlias / /var/www/python/mysite/start.py
       WSGIScriptReloading On

       <Directory /var/www/python/mysite>
               WSGIProcessGroup my_app
               WSGIApplicationGroup %{GLOBAL}
               order deny,allow
               Allow from all
       </Directory>
</VirtualHost>

When I load the css to the browser it shows the following. However, this is rather random. It "sometimes" works and sometimes it doesn't.

My example url: https://mycoolsiteA.mydomain.com/static/css/bs/bootstrap.min.css

We have a Firewall device that automatically redirects http to https, but I am loading the css directly with https.

And the result will look like this: enter image description here

However, if I update multiple times or add r = number to the end, it clears the cache and load. But it will do it again randomly until I clear the cache again.

Here it is loaded and working:

enter image description here

Any thoughts, direction on where to look to fix this?

+3


source to share


1 answer


Welcome to the fun world of UTF-8!

I've seen this several times in PHP (see UTF-8 all over ). What you are experiencing is almost certainly a UTF-8 file that comes as some other character encoding (or vice versa). I downloaded Bootstrap and Notepad ++ identifies them as ANSI encoded. Your webserver can force this to use UTF-8. Look at the response headers for something like this

Content-Type: text/css; charset=UTF-8

So your webserver is talking UTF-8 about it, but it really isn't. At this point, your browser starts to tear up

, which means it doesn't recognize the character.

There are several ways to handle this if this is the case.



  • Recode the file as UTF-8 ( Notepad ++ can do this for you)
  • Stop sending UTF-8 by default. Your browser will try to detect the encoding

Just for the kicks, try loading CSS directly from MaxCDN servers

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

They don't pass UTF-8 header

+8


source






More articles:


All Articles