Oct 07 2020 07:01 AM
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
Oct 07 2020 08:52 AM
@singalashwani You can search for "Edg" in UserAgent and dynamically load CSS file with rules for Edge.
Oct 07 2020 09:02 AM
@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.
Oct 07 2020 09:08 AM
@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 { ... }"
Oct 07 2020 12:07 PM
@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
Oct 08 2020 12:06 AM
@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
Oct 08 2020 08:48 AM
@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
Oct 08 2020 09:30 AM
@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)
Oct 08 2020 09:33 AM
@singalashwani I think that is exactly what you need: fullPage.js | One Page Scroll sections Site Plugin (alvarotrigo.com)