CODEWITHSUNDEEP
cssangular
Fel
Fel

Reputation: 4818

Load different CSS rule depending on the browser in an Angular 4 component

I have an Angular 4 application that looks quite different depending on the browser you use. This is an example of how it looks on Firefox 58 (and it's the way I want it to look):

App on Firefox 58

And this is an example of how it looks on Chrome 63:

App on Chrome

I opened a question a few days ago to see if I could fix this issue (Different 'div' heights in Chrome and Firefox) but I couldn't find a way to make it work for both browsers.

So, I'm thinking on loading a different CSS class depending on the user using Chrome or Firefox. Does Angular 4+ have a way of finding out the browser? What I would do then is to load the appropriate class using ngClass in the component's template that would, hopefully, fix the issue.

Or is there a better alternative?

Upvotes: 7

Views: 10480

Answers (5)

StepUp
StepUp

Reputation: 38134

You can have main file of styles, for example, styles.scss. And if you want to have styles for other browsers, for example, for Internet Explorer 10-11, then:

  1. create new styles sheet, e.g. InternetExplorer.scss

  2. then import this style sheet into main stylesheet file styles.scss: 

    @import "scss/InternetExplorer.scss";

  3. Then in InternetExplorer.scss write condition for Internet Explorer 10-11

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .nav-tabs .nav-item {
        margin-bottom: -1px;
        z-index: 0;
    }
}

Upvotes: 1

joowtjuh
joowtjuh

Reputation: 176

it is not recommended to have different stylesheets per user agent. (maybe older versions of firefox does not support certain styling or chrome starts supporting it).

It is recomended to check if a browser supports some style. you can check if a browser supports some stlye with the @supports at-rule.

Upvotes: 0

Fel
Fel

Reputation: 4818

Doing some more research, I found the solution in this article:

https://www.codeproject.com/Tips/1167666/How-to-Apply-CSS-HACKS-for-Different-Browsers-Chro

In my case, this is the solution I used:

/* Style only for Google Chrome/Opera */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  td {
    height: 1px;
    vertical-align: top;
  }
}

/* Style only for Mozilla Firefox */
@-moz-document url-prefix() {
  td {
    height: 100%;
    vertical-align: top;
  }
}

/* Style only for Internet Explorer */ 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  td {
    height: 100%;
    vertical-align: top;
  }
}

Thanks for all the suggestions!

Upvotes: 6

joowtjuh
joowtjuh

Reputation: 176

it is not recommended to have different stylesheets per user agent, instead check if the browser supports the styling. you can check if a browser supports some style with the @supports at-rule.

Since you haven't uploaded any code, I can not tell you how to implement it in your case.

Upvotes: 0

FussinHussin
FussinHussin

Reputation: 1814

per the OP's question, yes you can detect browser (user agent) types by using window.navigator.userAgent. Learn more about it at mozilla

a rough function could look like:

getBrowser() {
  if (window.navigator.userAgent.indexOf('Mozzila') != -1) {
      this.firefox = true;
  else {
      this.firefox = false;
  }
}

This will return browser specifications. Put this function in a service and you can call it during the ngOnInit hook in angular. Then you can dynamically add a css stylesheet you have created by adding it to the DOM

<link *ngIf="!firefox" rel="stylesheet" href="path/to/css">

alternately, you could create the style tag and append it to the DOM on the fly.

You could just use it for a single style in the css stylesheet like this:

<div class="title" [class.chrome]="!firefox">

that sounds like a really bad idea

@powerbuoy is right, this is a bad idea. Not in function, but in how you want to put it into practice. This is not a very scalable method and will not work across many browsers. Other (better) css solutions include using flexbox or bootstrap

Upvotes: 1

Related Questions