Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
-
- CommentAuthordmitryseliv
- CommentTimeAug 22nd 2006
Does anybody knows any Safari CSS Hack that actually works?
It should be visible only by Safari.
I know couple that you can hide some rules from Safari but I need one specific to target only Safari browser.
Any ideas?
DS -
It isn't pretty but it works:
http://www.ibloomstudios.com/article1/
Can't use it alot, but it is good for fixing that "one" bug. -
- CommentAuthordmitryseliv
- CommentTimeAug 23rd 2006
Yes i seeing this one before.
But it's not always works correclty by some reason.
DS -
- CommentAuthordanielmall
- CommentTimeAug 23rd 2006
It's dirty, but you can target Safari like this with "::root". Think of it as "* html" for Safari. For instance, if you wanted to style all of your paragraphs red only in Safari, you can do this:
::root p { color: red; } -
using the :first-of-type pseudo-class works:
http://www.evotech.net/blog/2007/06/targeting-safari-30-with-css/ -
If you want to target 3.1 to the exclusion of 3.0, you'll want to use the body:nth-of-type hack
http://www.evotech.net/blog/2008/09/css-hack-for-google-chrome-and-safari-31/ -
/* To target a safari browser issue */
@media screen and (-webkit-min-device-pixel-ratio:0){
#YourID{float:left;margin-top:12px;}
.YourClass{float:left;margin-top:12px;}
} -
- CommentAuthorJackinloadup
- CommentTimeSep 22nd 2008
@parthiban
that sounds like the best way to go about it. what the earliest version of safari this will work on? -
Hi Jack,
I have worked on Safari 3.0. I don't exactly know, what is the earliest version of the same.Thankful People: xal629 -
Parthiban,
Have you had issues with it effecting your Firefox (Mac) preview? When I added the code you suggested, it worked! But, I went to retest in Firefox and noticed that it effected my positioning there as well. Thoughts?
in styles.css I have:
#navigation {position:absolute; top:69px ;left:382px;}
#main {position:absolute; left:568px; top:53px; width:423px}
#featured2 {width:205px; position:absolute; top:33px; left:225px;}
in safari3.css I have:
@media screen and (-webkit-min-device-pixel-ratio:0){
#main {margin-top:-15px;}
#navigation {margin-top:2px}
#featured2 {margin-top:-6px}
}Thankful People: bobth -
evening,
I've been having similar issues with CSS positioning with Mac Safari and Mac Firefox. All is well in Win IE, Firefox, Safari bit a few pixels off in Mac saf and FF. Did you get any further with this? I was trying to find a way to target the css just for those browsers and mac. If you could let me know I would appreciate it. Thanks
Bob -
It was quite helpful.I would also like to add to this.Different browsers have their different ways of serving the web page content and may create problem while using some CSS properties to get a desired output. To avoid these kinds of problems there is are solutions which are called "CSS hacks" and which are also different for different browsers. Using CSS hack is not recommended as per the W3C validation rules but in some cases we have to use them to get our task done. I knew about CSS hack for IE, Firefox but I came across CSS hack for Safari which I was not aware of and as Safari is one of the mostly used browser in world so I think this information might help others as well to overcome from these kind of browser compatibility issues.
http://www.mindfiresolutions.com/
1 to 12 of 12