0

I have css setting below

.user-content {
  height: calc(100% - 20px);
}

and Want to have setting if the browser is not chrome? Is there a way to have this setting if the browser is not Chrome Kim

kim2014
  • 97
  • 1
  • 2
  • 14
  • Why would you do that just for chrome? – Vucko Aug 30 '15 at 12:00
  • Req, or specific problem in chrome whatever the reason, it is very legit. – Barr J Aug 30 '15 at 12:07
  • 1
    possible duplicate of [Is there a Google Chrome-only CSS hack?](http://stackoverflow.com/questions/10812093/is-there-a-google-chrome-only-css-hack) –  Aug 30 '15 at 12:17
  • See also http://stackoverflow.com/questions/10812093/is-there-a-google-chrome-only-css-hack. –  Aug 30 '15 at 12:17
  • possible duplicate of [Browser detection in JavaScript?](http://stackoverflow.com/questions/2400935/browser-detection-in-javascript) – easwee Aug 31 '15 at 06:29

2 Answers2

1

You can use the below code which targets all Chrome browsers starting from version 28.

.user-content {
  font-size: 2em;
}
@supports (-webkit-appearance: none) {
  .user-content {
    font-size: 3em;
  }
}
<div class="user-content">I am 3x larger only in Chrome browser, 2x otherwise</div>

Check out the other CSS hacks here: Browser specific CSS

m4n0
  • 25,434
  • 12
  • 57
  • 77
  • In my css I have the code below: .appliance-content { height: calc(100% - 20px); } @supports (-webkit-appearance: none) { appliance-content { height: 100%; } } and it didn't work – kim2014 Aug 30 '15 at 12:29
  • 1
    @kim2014 you're missing the `class selector` - `appliance-content { height: 100%; }` -> `.appliance-content { height: 100%; }` (notice the **dot (.)**). – Vucko Aug 30 '15 at 12:32
  • Thanks a lot Vucko. It worked now. Is there any way that I can have the setting .appliance-content { height: 100%; } for all browsers but NOT Chrome. – kim2014 Aug 30 '15 at 13:30
  • @kim2014 Check my edit. The second rule is just overwriting for Chrome only. – m4n0 Aug 30 '15 at 14:54
  • Thanks But we need to have the second rule. The reason I am asking this question because I have this setting : .row-height { height : calc(100%} and I only want to have this setting for all browsers but NOT Chrome – kim2014 Aug 30 '15 at 15:03
  • Yes, specify the rule that you want for all browsers first and overwrite in the second for Chrome. Check the snippet in Chrome and other browsers, open Developer tools to check the overwrite. – m4n0 Aug 30 '15 at 15:06
0

Use the webkit-transition property of CSS 3, it will allow you to create chrome specific styles rules.

for more info: What is webkit

Using webkit

Community
  • 1
  • 1
Barr J
  • 9,047
  • 1
  • 22
  • 41