CSS hack for Edge browser

Copper Contributor

I want to apply some CSS styles only in Edge browser and not able to find any CSS hack that only targets Edge browser. I am using Microsoft Edge Version 85.0.564.68

 

Thanks.
8 Replies

@singalashwani You can search for "Edg" in UserAgent and dynamically load CSS file with rules for Edge.

@msekmfb1 thanks for the solution. Its working. Also can you please guide me any CSS hack also if I don't want to use JS to detect the navigator.

@singalashwani There's no way to do that in pure CSS, you can add a class to document body based on browser name and use it in CSS, e.g. add "edge" class to body and add style like ".edge { ... }"

@singalashwani thanks for the question. I'm really curious why you want to do this. Is there a bug in Edge that you are working around that you don't see in Chrome? 

 

-John

@johnjansen thanks for the follow-up. Actually, I am working on a full-page vertical scrollable infographic website where all the different slides are full-page background images and on top of that, I am placing absolutely positioned divs to align elements. The alignment of these divs are not same in Chrome and Edge. That's why, I was looking for a CSS only solution to target styles only for the Edge browser but was not finding anything, thanks

@singalashwani that actually sounds like a bug, if you are talking about the current Edge browser. Can you share the version of Edge as well as a CSS sample that demonstrates the issue?

 

-John 

@johnjansen I assume he talks about something like this (https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm) but he actually does not have enough CSS knowledge to do that without absolute positioning.

 

@singalashwani check this manual How To Create a Parallax Scrolling Effect (w3schools.com)