Javascript  -  Browser-Specific CSS

For situations where you wish to have a specific CSS <STYLE> for specific platforms (in this case, MacOS and Windows), here’s a set of JavaScripts from Peter Lamont which will automatically detect the version of the browser being used, and implement the appropriate CSS script for those pages.

Since CSS is specific to 4.x level browsers and above, you may want to use a “Browser Version Detect” script to route older browsers to a different area...

(Please keep in mind that this script does *not* generate the CSS code *for* you. You must first create a set of CSS stylesheet definition files before implementing these scripts. Also, you should set this page’s HTML Output setting to “Regular Tables” or “CSS”, as the docuent.writeln command does ot always work properly in the “Nested Tables” output. )

If your CSS code is fairly short, you can embed it directly into the NOF page by inserting this code into the “Beginning of Body” field of the “Layout HTML” for this specific page:

<script language = “JavaScript”>
document.writeln(“<style Type= \”text/css\”>”)

if (navigator.appVersion.toLowerCase().indexOf(“win”)=-1) {

<!-- This CSS Code is specific to Windows browsers -->
document.writeln(“.headText {font-family: Arial,Helvetica,sans-serif; font-size: 14pt; font-weight: bold; text-align: left}”)
document.writeln(“.bodyText {font-family: Arial,Helvetica,sans-serif; font-size: 10pt; text-align: left)”)
}
else {

<!-- This CSS code is specific to Mac browsers -->
document.writeln(“.headText {font-family: Arial,Helvetica,sans-serif; font-size: 14 pt; font-weight: bold; text-align: left}”)
document.writeln(“.bodyText {font-family: Arial,Helvetica,sans-serif; font-size: 12 pt; text-align: left}”)
}
document.writeln(“</style>”)



... note that the code highlighted in blue is CSS code and is modifyable to be whatever CSS definitions  you want to use here. Since

If your CSS code is fairly lengthy, you will most likely want to create an external file with these CSS definitions written there. You can reference this code using the script below:

<!-- This code sets up platform specific CSS ->>

<SCRIPT language = “JavaScript”>
if (navigator.appVersion.toLowerCase().indexOf(“win”)!=-1)
{

<!-- This sets up the Windows-specific CSS code -->
document.writeln(“<link REL=stylesheet HREF=\”stylesheet_win.css\”>”)
}
else {
<!-- This sets up the Mac-specific CSS code -->
document.writeln(“<link REL=stylesheet HREF=\”stylesheet_mac.css\”>”)
}
</SCRIPT>



... note that the filenames highlighted in blue should be replaced by the URL for the CSS files you are using here.

Go Back to Previous Page

Have a question that you can´t find the answer to? Want to report a possible bug?

Send a help request to NetObjects Technical Support