Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Google Chrome Specific Stylesheet

Google Chrome Specific Stylesheet

Locked

Views: 6,059

Results 1 to 5 of 5
This thread is locked. New replies are disabled.
23 Feb 2010, 1:47 AM
#1
limelites avatar

limelites

Totally Zenned

Join Date:
Jan 2009
Posts:
2,085
Plugin Contributions:
0

Google Chrome Specific Stylesheet

Is it possible to create a Google Chrome specific stylesheet?

Also, would be nice to have a Safari and Opera specific stylesheet too.

Site I'm working on is https://www.superfancy.co.uk, which as you will see is not quite lining up the same in all browsers..... we're talking a few pixels, but it looks bad on the horizontal background bar.

I am using the ie specific stylesheets from the download area, but I don't have a clue how to create Chrome, Safari and Opera specific sheets. Any help will be hugely appreciated.

23 Feb 2010, 8:14 AM
#2
limelites avatar

limelites

Totally Zenned

Join Date:
Jan 2009
Posts:
2,085
Plugin Contributions:
0

Re: Google Chrome Specific Stylesheet

I found a way to add Chrome and Safari specific styling to your site. Just add this to the bottom of your stylesheet.css file:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* the CSS styling below will only be picked up by Safari and Chrome */

body {
background-image: url("../images/back-ground-vertical-safari.jpg");
}

}

Now, does anyone have a similar workaround for Opera?

24 Feb 2010, 12:01 AM
#3
rstevenson avatar

rstevenson

Totally Zenned

Join Date:
Nov 2006
Location:
Dartmouth, NS Canada
Posts:
2,400
Plugin Contributions:
0

Re: Google Chrome Specific Stylesheet

I'm sure you know, but for any others reading this thread, a Note: This hack uses a CSS3 class that is currently supported only by Safari and by recent versions of Opera, and then uses clever formatting of the @media query to rule out Opera. Nice trick! But other browsers, whenever they start to support that CSS3 class, may suddenly pick up your hack. Perhaps this will be fine, but perhaps not, so if you use this hack you need to remember where you used it and to check each browser version as it comes out to see if it is affected by it.

If I were me, I'd use Javascipt browser sniffing instead. I believe it's possible to sniff out all browsers and versions that way. You might be worried about people browsing with javascript turned off, but if they're doing that, a few pixels difference in a layout will be the least of their problems these days. ;-)

Rob

24 Feb 2010, 3:37 AM
#4
Kim avatar

Kim

Obaa-san

Join Date:
Jun 2003
Location:
West Coast, North America
Posts:
26,604
Plugin Contributions:
0

Re: Google Chrome Specific Stylesheet

Uh ... this is OT - but do you realize you have a horizontal scroll bar in a window that less than 1400 and some pixels?

(and BTW your background doesn't line up in FireFox on my computer)

24 Feb 2010, 6:58 PM
#5
rstevenson avatar

rstevenson

Totally Zenned

Join Date:
Nov 2006
Location:
Dartmouth, NS Canada
Posts:
2,400
Plugin Contributions:
0

Re: Google Chrome Specific Stylesheet

Also, viewing the page source, you have extra head and body code down at the bottom. Maybe that is the source of the problem.

Rob