?
Solved

How do I call a stylesheet specially for Safari?

Posted on 2009-02-12
10
Medium Priority
?
1,312 Views
Last Modified: 2013-12-07
I have one CSS issue with Safari that will require that I call a separate stylesheet if the user has Safari.

How would I detect that the user has Safari and then call the alternate stylesheet
0
Comment
Question by:Donnie Walker
  • 5
  • 2
  • 2
  • +1
10 Comments
 
LVL 13

Expert Comment

by:myderrick
ID: 23623168
You can hide the CSS elements from Safari. With this you do not need to create a specific css file for Safari. Eg

.submit {margin: 20px;}
.submit {margin: 10px;# } - Safari will ignore this

Details below:
http://www.ibloomstudios.com/articles/safari_css_hack/
http://www.ashhaque.com/blog/safari-specific-css-hack/

If you still want a file for safari alone. See here.
http://www.stuffandnonsense.co.uk/archives/hide_css_from_safari.html

MD
0
 
LVL 14

Accepted Solution

by:
yessirnosir earned 2000 total points
ID: 23623786
Would you settle for something that loads a stylesheet for both Safari & Chrome?  I played with some ideas for a while, and couldn't figure out a way to get Safari without also getting Chrome.... but have attached the code that does that.

used the following references in creating the code.  
http://www.hedgerwow.com/360/dhtml/detect-safari3-by-js-css.html
http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Load Safari-only Stylesheet</title>
<style type="text/css">
html { /* need this so that Safari3 can use window.getMatchedCSSRules to collect CSSStyleRule later */
	list-style-image:none;
}
#testbox {
	background:green;
}
</style>
<script type="text/javascript">
 
var isSafari3 = false; 
if( window.devicePixelRatio &&  window.getMatchedCSSRules ){
	//you need 	put html {list-style-image:none;} in yout Safari 3 only stylesheet first
	//we detect whether if it's Safari 3 by checking if it read some Safari 3 only styles 
    isSafari3  =  !!window.getMatchedCSSRules(document.documentElement,'');
}
if (isSafari3) {
var headID = document.getElementsByTagName("head")[0];         
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'safaricss.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);
}
 
</script>
</head>
<body >
<div id="testbox">
  <p>The background color of this box will appear
    red in Safari and green in other browsers.</p>
</div>
</body>
</html>
 
 
safaricss.css has only one line
#testbox {background:red;} 

Open in new window

0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 23623956
myhderrick, did you test that code?  I think that # hack is obsolete... doesn't work in current version of Safari/Wiin; not sure about Mac.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:Donnie Walker
ID: 23623970
Maybe I'm going about this all wrong and asking for the wrong thing.

My only issue with Safari is on this test site: http://www.kellercrescentdigital.com/lmh/

The client wants the buttons across the top to be flush with either side of the box below it. Right now in Safari the "Foundation" button hangs over about 4-5 pixels on the right.

In IE6. IE7, IE8 and Firefox 3 it looks fine.

The buttons are generated from a list using CSS. Is there a better solution to get what I need?

Should I make the buttons graphical instead?
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 23624008
Agh!  Just spent an hour on your first question!  How about another question !!!!!
0
 
LVL 30

Expert Comment

by:Mark Steggles
ID: 23624494
rentawebguy,

you should accept the answer/asnwers here and open another question

Regards
0
 
LVL 13

Expert Comment

by:myderrick
ID: 23624521
That was an example....Sorry if it didn't help.

How about the other link? - http://www.stuffandnonsense.co.uk/archives/hide_css_from_safari.html

MD
0
 

Author Comment

by:Donnie Walker
ID: 23624550
so the only way to call a Safari specific stylesheet is with javascript??
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 23624587
==>>>  only way to call a Safari specific stylesheet is with javascript??

someone may prove me wrong, but I couldn't come up with any non-javascript method to load anything except IE stylesheets, because only IE supports the conditional comment structure.
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 23625755
I'm going to prove myself wrong about the Javascript.   In your HTML, just attach a stylesheet, eg.

<link href="safari_only.css" rel="stylesheet" type="text/css" />

Then in the safari_only.css file, put all the styles inside an @media statement that will only apply to webkit-based browsers, eg.

@media screen and (-webkit-min-device-pixel-ratio:0) {
 #testbox { background: red; }
}

Found the hack here:  http://themechanism.com/blog/2008/01/08/safari-css-hack-redux/
As hacks go, it's not too ugly.  

btw... if I were you I wouldn't fix your problem this way.  Your issue is that your button widths are dependent on the font size, so different font rendering engines will cause different button widths.  Safari has a unique font rendering approach, which is making your problem obvious in Safari, but you really have the problem everywhere.  You can see it in Firefox too if you do any zooming in or out -- the buttons change size differently than the rest of the layout.  You would be better to get rid of the left/right padding on your button <a> element, and instead set the overall table width to 779px, and just set text-align:center on your table.menu79.  (And remove the text-align:left; on the <a> elements) If you can't figure it out from there, you really should ask a new question.  
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month13 days, 22 hours left to enroll

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question