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.
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
Showing OS and Browser Info using ngx-device-detector Angular Library
Add below code in app component to see how ngx-device-detector works.
<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 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
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 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.
styles and add below code
Now lest run
npm run build Notice we have 2 files
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
@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.
style.service.ts add below code:
app.module.ts add provider to call
Showing Chrome and IE specific styles only
Now lets run
and in Chrome IE specific styles are removed only Chrome Styles are loaded 🙂
and IE browser has extra style file for IE browser specific
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.
angular.json to add MAC sass files.
styles.service to add new method to remove MAC styles if running on Windows OS and call on
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.