Separate stylesheet for Safari/MAC

@claytonseoMar 23.2010

Hi guys

I want to include a separate style sheet for a Safari Web Browser on a MAC machine.

Does anyone know how to do this?

to post a comment

7 Comments(s) _↴

@tirnaMar 23.2010 — #If you like you can use these JS functions to detect the type of browser and then set the appropriate stylesheet for it.

All you need to do is change the stylesheet names in setCSSforBrowser() and add/remove 'else if' blocks to suit the browsers you want to support.

Then in the <head> section of your web page, call setCSSforBrowser() to set the appropriate stylesheet.

[CODE] 
 
 /*******************************************************************
 This function returns the browser name as a string
 *******************************************************************/
 function getBrowserName()
 {
 var name = "Unknown";
 if(navigator.userAgent.indexOf("MSIE")!=-1)
 {
 name = "MSIE";
 }
 else if(navigator.userAgent.indexOf("Firefox")!=-1)
 {
 name = "Firefox";
 }
 else if(navigator.userAgent.indexOf("Opera")!=-1)
 {
 name = "Opera";
 }
 else if(navigator.userAgent.indexOf("Chrome") != -1)
 {
 name = "Chrome";
 }
 else if(navigator.userAgent.indexOf("Safari")!=-1)
 {
 name = "Safari";
 }
 
  return name; 
 }
 /*******************************************************************
 This function returns the browser version as a string
 *******************************************************************/
 function getBrowserVersion()
 {
 var version = "0";
 //look for IE browser
 
  if (navigator.userAgent.indexOf("MSIE")!=-1)
  {
   var temp   = navigator.userAgent.split("MSIE");
 
   version = temp[1].substring(0, temp[1].indexOf(";"));
 
   //alert("You are using Microsoft Internet Explorer version " + version);
   return version;
  }
 
  //look for Firefox browser
 
  if(navigator.userAgent.indexOf("Firefox")!=-1)
  {
   var versionIndex=navigator.userAgent.indexOf("Firefox")+8;
 
   if (parseInt(navigator.userAgent.charAt(versionIndex))>=1);
   {
   version = navigator.userAgent.substring(versionIndex, versionIndex+7);
   }
 
   //alert("You are using Firefox version " + version);
   return version;
  }
 
  //look for Opera browser
  if(navigator.userAgent.indexOf("Opera")!=-1)
  {
   //check if Opera 10+
   if(navigator.userAgent.indexOf("Version/")!=-1) {
   var temp   = navigator.userAgent.split("Version/");
   version = temp[1];
   }
   else {  //we have Opera 9-
   var temp   = navigator.userAgent.split("Opera");
 
   version = temp[1].substring(1, temp[1].indexOf(" "));
 
   //alert("You are using Opera version " + version);
   }
   return version;
  }
 
  //look for Chrome Browser
 
  if(navigator.userAgent.indexOf("Chrome")!=-1)
  {
   var temp   = navigator.userAgent.split("Chrome/");
   version = temp[1].substring(0,temp[1].indexOf(" "));
   //alert("You are using Chrome version " + version);
   return version;
  }
  //look for Safari browser
  if(navigator.userAgent.indexOf("Safari")!=-1)
  {
   var temp   = navigator.userAgent.split("Version/");
   version = temp[1].substring(0,temp[1].indexOf(" "));
   //alert("You are using Safari version " + version);
   return version;
  }
 }
 
 *************************************************************************************/
 var browserName   = getBrowserName();
 var browserVer    = parseFloat(getBrowserVersion());
 //var browserVer    = 6;
 //alert("Browser = "+browserName+"nnVersion = "+browserVer);
 var isBrowserSupported  = false;
 
 function setCSSforBrowser(cssPath)
 { 

 if(browserName == "MSIE" && browserVer >= 8)
 {
 //we have IE8 or higher 
 document.write('<link rel="stylesheet" type="text/css" href="'+cssPath+'wpc_IE8.css" />');
 isBrowserSupported = true;
 }
 else if(browserName == "MSIE" && browserVer >= 7)
 {
 //we have IE7 or higher
 /*
 alert("Your browser is Microsoft Internet Explorer version 7 !!!!"+
 "nnYour screen width :t" + screen.width + " pixels." +
 "nYour screen height:t" + screen.height +  " pixels." +
 "nnThis page is optimised for Microsoft Internet Explorer V7 nwith screen size 1280 x 1024 pixels.");
 */ 

 document.write('<link rel="stylesheet" type="text/css" href="'+cssPath+'wpc_IE7.css" />');
 isBrowserSupported  = false;
 }
 else if(browserName == "MSIE" && browserVer <= 6)
 {
 //we have IE6 or lower
 
   alert("** Warning **nnYour browser is Microsoft Internet Explorer version 6 or lower.nnThis website has features not supported by IE v6nand is best viewed with:"+
   "nnInternet Explorer v7+nFirefox v2+nOpera v9.63+nSafari for Windows v3.1+nGoogle Chrome v2+nn"+
   "Please consider updating or changing your browsernto one of the above.nnThank you.");
   document.write('<link rel="stylesheet" type="text/css" href="'+cssPath+'wpc_IE7.css" />');
   isBrowserSupported  = false;
  } 
  else if(browserName == "Firefox")
  {
   document.write('<link rel="stylesheet" type="text/css" href="'+cssPath+'wpc_FF3.css" />');
 
   if(browserVer >= 3.6)
   isBrowserSupported  = true;
   else
   isBrowserSupported  = false;
  } 
  else if(browserName == "Safari")
  {
   document.write('<link rel="stylesheet" type="text/css" href="'+cssPath+'wpc_SAF.css" />');
 
   if(browserVer >= 4)
   isBrowserSupported  = true;
   else
   isBrowserSupported  = false;
  }
  else if(browserName == "Opera")
  {
   document.write('<link rel="stylesheet" type="text/css" href="'+cssPath+'wpc_OP.css" />');
 
   if(browserVer >= 10)
   isBrowserSupported  = true;
   else
   isBrowserSupported  = false; 
  }
  else if(browserName == "Chrome")
  {
   document.write('<link rel="stylesheet" type="text/css" href="'+cssPath+'wpc_GC.css" />');
   if(browserVer >= 2)
   isBrowserSupported  = true;
   else
   isBrowserSupported  = false;
  }
  else //we have an unsupported browser  - use the FF css and hope for the best !!!
  { 
   document.write('<link rel="stylesheet" type="text/css" href="'+cssPath+'wpc_FF3.css" />');
   isBrowserSupported  = false;
   browserName         = "Unsupported";
   browserVer          = "Unknown";
  }
  //reset the MSIE browser name
  if(browserName == "MSIE") browserName = "Internet Explorer"
 }
 /************************************************************************************
 This function checks if the user's browser is supported or not
 ************************************************************************************/
 function checkForUnsupportedBrowser()
 {
 if(!isBrowserSupported)
 {
 alert("** Warning **nnThis website is best viewed with:"+
 "nnInternet Explorer v7nFirefox Portable Edition v3.0.5nOpera v9.63nSafari v3.1nn"+
 "It appears your browser is not one of the above.nn");
 } 

 }
 //----------------------------------------------------------------------------
 //** This function gets a browser's viewport width and height
 //----------------------------------------------------------------------------
 function getViewportInfo(minWidth)
 {
 var viewportwidth  = 0;
 var viewportheight = 0;
 
  // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
  if (typeof window.innerWidth != 'undefined')
  {
   viewportwidth = window.innerWidth,
   viewportheight = window.innerHeight
  }
 
  // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
  else if (typeof document.documentElement != 'undefined'
   && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
   {
   viewportwidth = document.documentElement.clientWidth,
   viewportheight = document.documentElement.clientHeight
  }
 
  // older versions of IE
 
  else
  {
   viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
   viewportheight = document.getElementsByTagName('body')[0].clientHeight
  }
 
  //alert user if his broweer window is too small
 
  if(viewportwidth > 0 && viewportwidth < minWidth)
  {
   alert('** Warning ** nnYour browser width is '+viewportwidth+' pixels wide.'+
   'nnYour browser needs to be at least '+minWidth+' pixels wide to view this page correctly.'+
   'nnPlease maximise your browser window or increase your monitornscreen width to at least '+minWidth+' pixelsnn');
  }
 } 
 
 [/CODE]

@claytonseoauthorMar 23.2010 — #Ok, does it know what machine platform you are using, because I know that Safari/MAC renders differently than Safari/Windows.

Ty

@tirnaMar 23.2010 — #no it doesn't as I haven't come across a situation where I've had to have a diferent stylesheet for Safari on a Mac to Safari on Windows.

If the version numbers of Safari are different on a mac and windows then you could edit setCSSforBrowser() to set an appropriate stylesheet for the version number as it does for IE8 and IE7.

@claytonseoauthorMar 23.2010 — #Ok, im dealing with a client who has Safari 4.0.4/MAC, I have a Safari 4.0.4/Windows.

We have tested it on various computers and different screen resolutions but there is still issues on the MAC machines(seems to be a width problem).

Ty for the method above, what if the client does not have java-script enabled?

Im looking for something like this:

@tirnaMar 23.2010 — #In my <noscript> element I ask users to turn on their JS and explain why hoping that it re-assures them it is safe.

If they choose to not switch on their JS then that is fine.

You could try setting a default stylesheet within <noscript> for javascript disabled browsers.

Part of designing a website includes deciding which browsers and users you are going to support.

Imo the overwhelming vast majority of users use either IE or FF and have JS enabled.

@claytonseoauthorMar 23.2010 — #
Imo the overwhelming vast majority of users use either IE or FF and have JS enabled.[/QUOTE]

true

@FangMar 23.2010 — #http://www.quirksmode.org/js/detect.html

Also in #CSS _↴

Easiest way to update site content?Need help with :hover.Paragraph problems

Success!

Help @claytonseo spread the word by sharing this article on Twitter...

Tweet This

Separate stylesheet for Safari/MAC

7 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #CSS _↴