CODEWITHSUNDEEP
phphtmlcssgoogle-chromecookies
Michelle
Michelle

Reputation: 43

Switching CSS based on cookie setting not working in Google Chrome

On my website I've implemented a style switcher based on php setting a cookie. If the user clicks a link, a cookie is set and based on that cookie a certain CSS file is referenced in the head section of the page. This works in all browsers on Mac OS and Windows, except for Google Chrome.

It's like the cookie is not (always) set, or if a cached version of the page is served. I can't put my finger on the exact problem though, so I really hope someone here can point me in the right direction!

The switch links look like this:

<a href="http://www.mywebsite.nl/assets/templates/scripts/styleswitcher.php?SETSTYLE=0">Switch to high contrast</a>

and when the link is clicked and the style is changed, it changes to the following (and back again, when clicked again):

<a href="http://www.mywebsite.nl/assets/templates/scripts/styleswitcher.php?SETSTYLE=1">Switch to normal contrast</a>

These links are generated on the page by this piece of code:

<?php
if(isset($_COOKIE['STYLE'])) {

   if ($_COOKIE['STYLE'] == 0) {
      $output = "<a href='assets/templates/scripts/styleswitcher.php?SETSTYLE=1'>Switch to normal contrast</a>";
   } else {
      $output = "<a href='assets/templates/scripts/styleswitcher.php?SETSTYLE=0'>Switch to high contrast</a>";
   }
} else {
   $output = "<a href='assets/templates/scripts/styleswitcher.php?SETSTYLE=0'>Switch to high contrast</a>";
}

return $output;
?>

The file styleswitcher.php, to which the links are pointing:

<?php
// SET COOKIE FOR 1 YEAR
if(isset($_GET["SETSTYLE"])){

 if(setcookie("testcookie",true)){
  setcookie("STYLE",$_GET["SETSTYLE"],time()+31622400,"/");
  $_COOKIE["STYLE"] = $_GET["SETSTYLE"];
 }else{
  $_SESSION["STYLE"]=$_GET["SETSTYLE"];
 }
} else {

}
// RETURN TO CALLER PAGE
header("Location: ".$_SERVER["HTTP_REFERER"]);
?>

The correct css file is printed in the head section of the page by this piece of code:

<?php
if(isset($_COOKIE['STYLE'])) {

  if ($_COOKIE['STYLE'] == 0) {
     $output = '<link href="assets/templates/styles/highcontrast.css" rel="stylesheet" type="text/css" />';
  } else {
     $output = '<link href="assets/templates/styles/screen.css" rel="stylesheet" type="text/css" />';
  }
} else {
    $output = '<link href="assets/templates/styles/screen.css" rel="stylesheet" type="text/css" />';
}

return $output;
?>

When clicking the link in Chrome, the css doesn't change. Most of the time I don't see the cookie being set at all in the developer tools, but sometimes it does get set once, but doesn't change anymore when clicking the link again, thus showing the wrong css. Does anyone have any clue what could be causing the problem in Chrome?

One last thing, in the .htaccess file I also have some code to control caching. Could this have something to do with it?

.htaccess file

#ExpiresActive On
#ExpiresByType image/gif A2592000
#ExpiresByType image/jpeg A2592000
#ExpiresByType image/png A2592000
BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary


## EXPIRES CACHING ##
<IfModule mod_expires.c>
   ExpiresActive On
   ExpiresByType image/jpg "access 1 year"
   ExpiresByType image/jpeg "access 1 year"
   ExpiresByType image/gif "access 1 year"
   ExpiresByType image/png "access 1 year"
   #ExpiresByType text/css "access 1 month"
   #ExpiresByType text/html "access 1 month"
   ExpiresByType application/pdf "access 1 month"
   ExpiresByType text/x-javascript "access 1 month"
   ExpiresByType application/x-shockwave-flash "access 1 month"
   ExpiresByType image/x-icon "access 1 year"
   # ExpiresDefault "access 1 month"
</IfModule>

## DEFLATE ##
<ifModule mod_deflate.c>
    <filesMatch "\.(js|css|html|php|svg)$">
        SetOutputFilter DEFLATE
    </filesMatch>
</ifModule>

I already disabled the ExpiresByType rules for css and html and for the default, but to no avail.

Thanks heaps for any help! - Michèlle

Upvotes: 1

Views: 813

Answers (2)

Damian Polac
Damian Polac

Reputation: 934

Why do you change value of cookie in php? It has no sense, since cookie is saved in browser. Use Javascript instead.

You should also not serve different version of static page based on cookie, because it can be in conflict with http cache.

The simplest way I can think about. (It's not best way, just simplest!)

"buttons":

<a href="#" onclick="localStorage.setItem('style','highcontrast');location.reload()">Set high contrast</a>
<a href="#" onclick="localStorage.setItem('style','screen');location.reload()">Set default</a>

in < head >:

<script>
  if (localStorage.getItem('style')=='highcontrast') {
    document.write('<li'+'nk href="assets/templates/styles/highcontrast.css" rel="stylesheet" type="text/css" />');
  } else {
    document.write('<li'+'nk href="assets/templates/styles/screen.css" rel="stylesheet" type="text/css" />');
  }
</script>

Upvotes: 1

cyberwombat
cyberwombat

Reputation: 40084

Close your session before redirecting:

session_write_close();
header("Location: ".$_SERVER["HTTP_REFERER"]);

Upvotes: 0

Related Questions