What is the best way to create CSS that will only work on browsers other than IE and Edge?

I need assistance with writing CSS code that will only be applied to 'desktop' screen sizes when the page is viewed on browsers other than IE and Edge. Here's what I have so far:

@media only screen and (min-width: 981px) /* and XXX */

The 'XXX' part is where I'm stuck. I know that this is the code for checking if IE is present: 

@media all and (-ms-high-contrast: active), (-ms-high-contrast: none)
, and for Edge: @supports (-ms-ime-align: auto). But I'm unsure how to correctly combine and negate these two clauses.

cssinternet-explorermicrosoft-edge

Answer №1

To achieve a specific style for browsers excluding Edge and IE, you can utilize the not operator in the following manner:

@supports not (-ms-ime-align:auto) {
    /*Applying style for Non-Edge and Non-IE browsers*/
    body {
        background-color: azure;
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for updating the background color of the header in ngx datatable?

I am looking to change the background color of the table header to blue. This is the HTML code I have: <ngx-datatable class="material" [rows]="rows" [columnMode]="'force'" [headerHeight]="50" [footerHe ...

cssangularngx-bootstrapscss-mixinsngx-datatable

Reposition and resize an image. Creating a grid layout

I'm having trouble with positioning and cropping an image correctly on my website. I want it to look like this (hero-section): The entire project is based on a grid layout. I need a circular image that is larger than the container, positioned to the ...

htmlcssimagegridcss-position

Lengthen the space between each item on the list to enhance readability

Is there a way to adjust the line height between li tags? I attempted using height:100%, but it seems ineffective. Are my methods correct? Can anyone provide guidance? The following is the code snippet in question: <html xmlns="http://www.w3.org/1999 ...

htmlcss

What is the method for creating a border around text like the Google login feature?

Did Google update the login TextBox to look like this today? https://i.sstatic.net/bXPQu.png There is a border around the text, what is the most effective method to achieve this using HTML & CSS? Update: A single answer can be found on StackOverflow ...

htmlcss

Stop storing CSS data for nopCommerce

Currently, I am looking for a method to avoid caching CSS files on my nopCommerce website. In the past, I have achieved this by adding the date and another element at the end of the CSS call. Html.AppendCssFileParts("~/Themes/CustomTheme/Content/css/site. ...

htmlcssasp.netcachingnopcommerce

Displaying image titles when the source image cannot be located with the help of JavaScript or jQuery

I am currently facing an issue where I need to display the image title when the image is broken or cannot be found in the specified path. At the moment, I only have the options to either hide the image completely or replace it with a default image. $(&apo ...

javascriptjquerycssimage

PHP script encounters error while trying to modify CSS class

On my sticky login form, I am encountering an issue where the input fields should turn red when submitted with blank information. Interestingly, some fields behave correctly while others exhibit random behavior. The left photo below displays the initial lo ...

phpcss

Conceal specific image(s) on mobile devices

Currently, I am facing an issue on my website where I need to hide the last two out of six user photos when viewed on mobile or smaller screens. I believe using an @media code is the solution, but I'm unsure about the specific code needed to achieve t ...

csshtml

Position the image on top of the details

I have an image with a spinner rotating around it through animation, accompanied by two boxes containing information as depicted in the uploaded image below. However, I would like to position the image above the boxes rather than beside them. .about-img ...

htmlcssimagebootstrap-4

How can CSS grid be used to move a particular <td> element?

Currently, I am working on creating a dynamic table using CSS grid and I am looking to slightly adjust the left-most <th> and <td>. I am uncertain about how to move a specific element within a <table>. My goal is to achieve a layout simi ...

cssvue.jsgridcss-grid

Modify the sticky menu color upon scrolling

While working on a client's website, I've stumbled upon an issue that has left me scratching my head. I'm looking to modify the color of the sticky menu once it's scrolled. Can anyone assist me in creating a custom CSS code to implemen ...

csswordpressbootstrap-modal

The Enigmatic Gap Amidst Flex Elements

I have a situation where two divs are placed within a flex container. However, the second div is incorrectly aligning to the right side of the page rather than next to the first div. Despite the default values for flex-flow being row and justify-content b ...

htmlcssflexbox

What are the steps to create a CSS grid like this?

Any suggestions on how to create a grid template similar to the image shown in this picture? I am looking to achieve this design without rounded borders and without any gaps between the elements. ...

htmlcssgridcss-grid

Issue with transitioning from Bootstrap 2 to Bootstrap 3 navbar

I am facing an issue with my navbar that collapses perfectly. However, when using the script below to automatically hide the menu upon clicking a menu item: $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { $('.navba ...

jqueryhtmlcsstwitter-bootstrap-3

The CSS grid-template-areas feature is not performing as anticipated

.content { width: 600px; height: 600px; border: 4px solid lime; display: grid; grid-template-areas: 'a d' 'b d' 'c d'; } textarea, iframe { margin: 0; box-sizing: border-box; } .content > .a {gri ...

htmlcsscss-grid

Can Anyone Provide Assistance with CSS for Customizing the Bootstrap 4 Navbar Burger Icon

I am working on implementing a bootstrap 4 navbar into my Angular code base. When the screen size of the browser becomes smaller, I want to hide the navbar and instead display a hamburger icon with a side menu. I have tried a few solutions, but have not b ...

cssangularbootstrap-4navbarhamburger-menu

Designing websites or applications for mobile devices requires careful consideration of how content will

Currently, I am trying to use media queries to cater to mobile screens. The main problem I am encountering involves the text on the header when switching between Portrait and Landscape modes. In the landscape view, the top property overrides the portrait ...

cssmedia-querieslandscape-portrait

The horizontal scroll feature is dysfunctional when attempting to allocate cell space based on a percentage

I want to display two sections of text that take up the full width of the screen and resize automatically when the screen size changes. Currently, I am using percentage widths to achieve this. However, when the text inside a section exceeds the available ...

htmlcsshorizontal-scrolling

What causes images to unexpectedly expand to fill the entire screen upon switching routes in Next.js?

I'm in the process of creating a website using Next and Typescript, with some interesting packages incorporated: Framer-motion for smooth page transitions Gsap for easy animations One issue I encountered was when setting images like this: <Link&g ...

cssreactjstypescriptnext.jsvercel

Increase the border thickness around my title and add a border after an image

I'm encountering difficulties when trying to replicate the style showcased in this image using CSS. My specific challenge lies in creating a yellow horizontal line above the title "nossos numeros" and blue vertical lines between "Cursos", "Alunos", an ...

csstwitter-bootstrap-4