Can you target Google Chrome?

Question

I need to position this update button on www.euroworker.no/order (you'll have to add an item to the cart, use the Kjøp button to add and Handlevogn to view the cart). Works in FF and IE. (Although there is another alignment problems with IE) but not in Chrome or Safari. I had it working before, but the only thing I can think of to do is target safari and Chrome. Is this possible?

Here's the CSS and HTML(Smarty) for you.

HTML(Smarty):

    {capture assign="cartUpdate"}

     <div id="cartUpdate"><!--<input type="submit" class="submit" value="{tn _update}" />-->
     <button type="submit" class="submit" id="oppdatersubmit" name="saveFields" title="Oppdater" value="">&nbsp;</button> </div>
    {/capture}
    {assign var="cartUpdate" value=$cartUpdate|@str_split:10000}
    {php}$GLOBALS['cartUpdate'] = $this->get_template_vars('cartUpdate'); $this->assign_by_ref('GLOBALS', $GLOBALS);{/php}

    {form action="controller=order action=update" method="POST" enctype="multipart/form-data" handle=$form id="cartItems"}

CONTENT

{/form}

And the CSS:

#oppdatersubmit {
 background-image:url(../../upload/oppdater.png);
 background-repeat:no-repeat;
 background-position:left;
 background-color:none;
 border:none;
 overflow:hidden;
 outline:none;
    white-space: nowrap;
 width:77px;
 height:25px;
 cursor:pointer;
 position:absolute;
}

#cartUpdate {
 position:absolute;
 width:160px;
 height:30px;
 left:580px;
 bottom:130px;
}

Need to change these for Chrome and Safari.

Thanks.

Resurrection

the problem is not with chrome or safari... You have wrong nesting of tags ... fix that and then worry about specific browser issues.. – Commutual

The problem is with spcific browser issues, the system I am working with is not perfect and I can't change everything. This is what I have to do to make it work, we all know this isn't an exact science, I really do need to just target chrome. – Resurrection

Answer 1

@media screen and (-webkit-min-device-pixel-ratio:0) {

    /*Chrome CSS here*/

    #cartUpdate {
        position:absolute;
        width:160px;
        height:30px;
        left:660px;
        bottom:40px;
    }
}

Fixed the problem :)

UPDATE

This resource works better: CSS browser/OS selectors with JS.

Resurrection

it's picked up by opera 9.2 too – Uncertainty

Yes, it's picked up by all webkit enabled browsers, so Chrome, Opera and Safari are the most popular webkit browsers. – Resurrection

Opera uses Presto, not webkit afaik. – Dredger

Opera now uses webkit, Vivaldi (ex Opera) uses presto, they forked. – Altdorfer

Answer 2

There are some browser hacks available for targeting a specific browser,some of them will work on all the versions of the browser,and some one them not.

Here is the list of some the Google Chromes's hacks:

WebKit hack:

.selector:not(*:root) {}

• Google Chrome:All the versions
• Safari:All the versions
• Opera :14 and Later
• Android:All the versions

Supports Hacks:

@supports (-webkit-appearance:none) {}

Google Chrome 28,and Google Chrome > 28, Opera 14 and Opera > 14

• Google Chrome:28 and Later
• Opera :14 and Later

Property/Value Hacks:

.selector { (;property: value;); }
.selector { [;property: value;]; }

Google Chrome 28,and Google Chrome < 28, Opera 14 and Opera > 14,and Safari 7 and Less than 7. - Google Chrome:28 and Before - Safari:7 and Before - Opera :14 and Later

JavaScript Hacks:1

var isChromium = !!window.chrome;

• Google Chrome:All the versions
• Opera :14 and Later
• Android:4.0.4

JavaScript Hacks:2 {Webkit}

var isWebkit = 'WebkitAppearance' in document.documentElement.style;

• Google Chrome:All the versions
• Safari:3 and Later
• Opera :14 and Later

JavaScript Hacks:3

var isChrome = !!window.chrome && !!window.chrome.webstore;

• Google Chrome:14 and Later

Media Query Hacks:1

@media \\0 screen {}

• Google Chrome:22 to 28
• Safari:7 and Later

Media Query Hacks:2

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }

• Google Chrome:29 and Later
• Opera:16 and Later

For more information please visit this website

Balustrade