CODEWITHSUNDEEP
csssafarigoogle-chrometarget
Kyle
Kyle

Reputation: 67194

Can you target Google Chrome?

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.

Upvotes: 16

Views: 46795

Answers (2)

Hbirjand
Hbirjand

Reputation: 1965

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

Upvotes: 8

Kyle
Kyle

Reputation: 67194

@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.

Upvotes: 37

Related Questions