CSS hack for Edge browser

%3CLINGO-SUB%20id%3D%22lingo-sub-1754159%22%20slang%3D%22en-US%22%3ECSS%20hack%20for%20Edge%20browser%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1754159%22%20slang%3D%22en-US%22%3E%3CP%3EI%20want%20to%20apply%20some%20CSS%20styles%20only%20in%20Edge%20browser%20and%20not%20able%20to%20find%20any%20CSS%20hack%20that%20only%20targets%20Edge%20browser.%26nbsp%3BI%20am%20using%20Microsoft%20Edge%26nbsp%3B%3CSPAN%3EVersion%2085.0.564.68%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3EThanks.%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1754590%22%20slang%3D%22en-US%22%3ERe%3A%20CSS%20hack%20for%20Edge%20browser%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1754590%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F823520%22%20target%3D%22_blank%22%3E%40singalashwani%3C%2FA%3E%26nbsp%3BYou%20can%20search%20for%20%22Edg%22%20in%20UserAgent%20and%20dynamically%20load%20CSS%20file%20with%20rules%20for%20Edge.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1754632%22%20slang%3D%22en-US%22%3ERe%3A%20CSS%20hack%20for%20Edge%20browser%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1754632%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F505175%22%20target%3D%22_blank%22%3E%40msekmfb1%3C%2FA%3E%26nbsp%3Bthanks%20for%20the%20solution.%20Its%20working.%20Also%20can%20you%20please%20guide%20me%20any%20CSS%20hack%20also%20if%20I%20don't%20want%20to%20use%20JS%20to%20detect%20the%26nbsp%3Bnavigator.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1754689%22%20slang%3D%22en-US%22%3ERe%3A%20CSS%20hack%20for%20Edge%20browser%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1754689%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F823520%22%20target%3D%22_blank%22%3E%40singalashwani%3C%2FA%3E%26nbsp%3BThere's%20no%20way%20to%20do%20that%20in%20pure%20CSS%2C%20you%20can%20add%20a%20class%20to%20document%20body%20based%20on%20browser%20name%20and%20use%20it%20in%20CSS%2C%20e.g.%20add%20%22edge%22%20class%20to%20body%20and%20add%20style%20like%20%22.edge%20%7B%20...%20%7D%22%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1755460%22%20slang%3D%22en-US%22%3ERe%3A%20CSS%20hack%20for%20Edge%20browser%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1755460%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F823520%22%20target%3D%22_blank%22%3E%40singalashwani%3C%2FA%3E%26nbsp%3Bthanks%20for%20the%20question.%20I'm%20really%20curious%20why%20you%20want%20to%20do%20this.%20Is%20there%20a%20bug%20in%20Edge%20that%20you%20are%20working%20around%20that%20you%20don't%20see%20in%20Chrome%3F%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E-John%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1757500%22%20slang%3D%22en-US%22%3ERe%3A%20CSS%20hack%20for%20Edge%20browser%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1757500%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F318459%22%20target%3D%22_blank%22%3E%40johnjansen%3C%2FA%3E%26nbsp%3Bthanks%20for%20the%20follow-up.%20Actually%2C%20I%20am%20working%20on%20a%20full-page%20vertical%20scrollable%20infographic%20website%20where%20all%20the%20different%20slides%20are%20full-page%20background%20images%20and%20on%20top%20of%20that%2C%20I%20am%20placing%20absolutely%20positioned%20divs%20to%20align%20elements.%20The%20alignment%20of%20these%20divs%20are%20not%20same%20in%20Chrome%20and%20Edge.%20That's%20why%2C%20I%20was%20looking%20for%20a%20CSS%20only%20solution%20to%20target%20styles%20only%20for%20the%20Edge%20browser%20but%20was%20not%20finding%20anything%2C%20thanks%3C%2FP%3E%3C%2FLINGO-BODY%3E
New 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)