There will always be quirks in every browser you use, so making sure that we know how to target Edge specifically will come in handy in the future!

Targeting Microsoft Edge with CSS

Tue Feb 2, 2016

Microsoft Edge in Windows 10 has information everywhere that it can't be specifically targeted using media queries in your CSS file. However, I came across a solution this morning that works really well!

In your CSS file you can add wrap the following media query (below in bold) and whatever you wrap in there will only be applied to Microsoft Edge. Edge is the only Microsoft browser that supports hardware acceleration which allows the query below to work for us.

@supports (-ms-accelerator:true) {
#header { background-color: pink; }
}

Now, Microsoft Edge is lightyears ahead of previous versions of Microsoft's Internet Explorer so you likely won't need to do anything specific to your CSS to get it looking proper in this new browser. However, there will always be quirks in every browser you use, so making sure that we know how to target Edge specifically will come in handy in the future!

Casey Aiello
Casey Aiello
Professional Services Manager | Web Consultant/Designer | Percussion Software

Along with being a Consultant, Casey is also the Professional Services Team Lead at Percussion and our in-house designer. She has a strong background in responsive web design and development. Casey knew that she wanted to work in the tech field ever since she was in elementary school. That strong passion led her to be a volunteer and strong advocate of various organizations that work to get more young women involved and excited about science and technology careers. In her free time, Casey enjoys spending time relaxing with family and friends.

Love our blog?

Sign up to receive the latest marketing emails from us too!