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

Question

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):

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

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?

Imo that sounds like a really bad idea. And looking at your other question I'm wondering why you'd use a table to begin with (unless of course it contains tabular data) and why not simply set the background color on the table cells instead of nested divs if you must use a table. If it's not tabular data but just a layout you're after then use flexbox. — powerbuoy
– powerbuoy, Commented Jan 29, 2018 at 16:02
I think I have a solution for your original question, take a look in my answer there: stackoverflow.com/questions/48441760/… — SpaceDogCS
– SpaceDogCS, Commented Jan 29, 2018 at 16:06
I know it's an awful idea, but I can't find a cross-browser working solution. Although it's only a matter of changing height: 100%; (Working in Firefox) to height: 1px (Working in Chrome). There's a reason on why I use tables: it's a tabular layout, and each table cell has an 'object listbox' component where you can select and drag objects, so I need the column organization that provides a table... — Fel
– Fel, Commented Jan 29, 2018 at 16:29

Fel · Accepted Answer · 2018-01-30 09:49:08Z

6

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!

answered Jan 30, 2018 at 9:49

Fel

4,89812 gold badges46 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

FussinHussin · Accepted Answer · 2018-01-29 17:20:19Z

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

StepUp · Accepted Answer · 2018-11-15 08:31:53Z

1

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:

create new styles sheet, e.g. InternetExplorer.scss
then import this style sheet into main stylesheet file styles.scss:
```
@import "scss/InternetExplorer.scss";
```

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;
    }
}

answered Nov 15, 2018 at 8:31

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

Comments

joowtjuh · Accepted Answer · 2018-01-29 17:55:38Z

0

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.

answered Jan 29, 2018 at 17:55

joowtjuh

1763 bronze badges

Comments

ANeves · Accepted Answer · 2018-10-03 22:20:43Z

0

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.

edited Oct 3, 2018 at 22:20

ANeves

6,4033 gold badges43 silver badges64 bronze badges

answered Jan 29, 2018 at 18:08

joowtjuh

1763 bronze badges

2 Comments

Fel Over a year ago

Thanks for your suggestion, it showed me the way to find the solution :)

mcheah Over a year ago

heads up to anyone considering this - @supports is not supported by IE, so this is not a great solution for something like replacing flexbox with floats if necessary.

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related