Managing CSS in Angular App for Cross Browsers and OS

Do you want to organize your CSS files in your angular app? Do you want to find out the strategy to segregate the CSS based on cross browsers and operating systems? You CSS designer should not be worried how to manage these. As a developer you should setup your angular app such that it works out of the box.

Introduction

I will use angular 10 project. Then I will install ngx-device-detector node package and finally I will demonstrate the best practice to follow to dynamically load cross browser and operating system related CSS files in your angular application.

Installing ngx-device-detector Angular Library

I am assuming that you have created one angular project named as manage-css using angular cli ng new manage-css --styles=scss. I have angular project created with sass styles.

Showing OS and Browser Info using ngx-device-detector Angular Library

Add below code in app component to see how ngx-device-detector works.

app.component.tsapp.component.html

<div> <ul> <li>user Agent - </li> <li>Os - </li> <li>browser - </li> <li>device - </li> <li>os_version - </li> <li>browser_version - </li> <li>deviceType - </li> <li>orientation - </li> </ul> </div>

Adding default style.scss for all Browsers (IE & Chrome etc.)

styles.scss would be our default style file. You could imagine this is our base style file.

Let’s crate a div in app.component.html

<div id="test"> This is angular app <br> Chrome color: aqua <br> IE color: yellow </div>

Now our site is running both in chrome and IE browser nicely

Chrome:

IE browser:

Now I have requirement to show border only on IE browser not in Chrome.

Adding IE Browser specific CSS Files in Angular App

Let’s assume we are writing CSS for chrome browser as default. And we want to extend few style class for IE browser. So lets create styles-ie.scss and extend one of our default class test from styles.scss.

extended test class and added border

We need to add this file in angular.json so that angular will add this to the index.html file when we serve or build.

Go to angular.json > architect > build > options > styles and add below code

Now lest run npm run build Notice we have 2 files styles.css and styles-ie.css in dist/manage-css folder

Now in the Index.hml you see Angular build add both CSS files.

We do not want that. Because, I want IE style files to be removed while running in Chrome.

Now, I will use deviceInfo object to determine which browser I am in. Then I will use Document from @angular/common to remove the IE specific style files.

In order to do above I will prefer to create angular service StyleService and execute this when my application initialized.

Creating Style Service and Remove IE Specific style files

Lets search all the link nodes with having style files ending with -ie.css and remove them.

Create style.service.ts add below code:

Create init-styles.ts

In app.module.ts add provider to call initStyles

Showing Chrome and IE specific styles only

Now lets run ng serve

and in Chrome IE specific styles are removed only Chrome Styles are loaded 🙂

and IE browser has extra style file for IE browser specific styles-ie.css 🙂

Adding Operating system specific styles in Angular app

I want to add styles-mac.scss and add black border to be shown only on MAC.

Add styles-mac.scss

Update angular.json to add MAC sass files.

Update the styles.service to add new method to remove MAC styles if running on Windows OS and call on execute function.

Become full stack developer 💻

If you want to become full stack developer and grow your carrier as new software developer or Lead Developer/Architect. Consider subscribing to our full stack development training programs. We have All-Access Monthly membership plans and you will get unlimited access to all of our video courses, slides, source code & Monthly video calls.

  • Please subscribe to All-Access Membership PRO plan to access current and future angular, node.js and related courses.
  • Please subscribe to All-Access Membership ELITE plan to get everything from PRO plan. Additionally, you will get access to monthly live Q&A video call with Rupesh and you can ask doubts/questions and get more help, tips and tricks.

You bright future is waiting for you so visit today FullstackMaster and allow me to help you to board on your dream software company as a Developer,Architect or Lead Engineer role.

Fullstack Master

💖 Say 👋 to me!

Originally published at https://rupeshtiwari.github.io on February 3, 2021.

--

--

--

I am a Senior Software Architect, mentor & successful PluralSight Author, professionally I am an expert at Angular, Express, Node.JS, Object Oriented Design but with a particular focus on Service Oriented Architecture, DDD, MEAN stack and Asp.Net.

Recommended from Medium

I am getting cheaper pricing for hosting from other providers. Why is your price high?

Soooo Fetch….but like technically!

React Hook Form — An Elegant Solution to Forms in React

Write Tests With Sentences First, Code Second

JavaScript Loops

Express with TypeScript (and ES Modules — Compilation, Build)

Creating Store Using RxJS in Angular — Demo

Creating Store Using RxJS in Angular - Demo

Creating Regression Test Content Using AEM Content Builder

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rupesh Kumar Tiwari

Rupesh Kumar Tiwari

Pluralsight Author, Developer and Trainer. I help students and professionals to become Full Stack Software Developer in less than a Year.

More from Medium

A Simple React Application in Visual Studio 2022

Inside ASP.NET Core 6 React Template

How to fix “The provided certificate file is not a valid PFX file” with dotnet dev-certs https…

Observer Pattern