Ways to add style to Chrome without causing any changes in Edge

I'm working on fixing a bug in Chrome and have successfully applied a style to correct it. However, when I view it in Edge, the appearance is not right. How can I target only Chrome (version 60) with my styles, without affecting other browsers?

@media (min-width: 860px) and (-webkit-min-device-pixel-ratio: 0) {
    table.content tbody tr td { min-width: 90px; }
}

@media (min-width: 711px) and (max-width: 860px) and (-webkit-min-device-pixel-ratio: 0) {
    table.content tbody tr td { min-width: 60px; }
}
cssgoogle-chromemicrosoft-edge

Answer №1

If you want to target a specific browser, you can utilize the @supports rule to combine supported and unsupported CSS properties for that particular browser. This method allows you to exclude other browsers as well.

For example, if you are focusing on Chrome on Windows and need to target it specifically because it does not support hyphens: auto even with the -webkit prefix (unlike Chrome for Mac and Android which support -webkit-hyphens: auto), you can use the following media query:

@supports not ((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) {
/* Your styles here */
}

Here is an example:

@supports not ((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) {
  * {
    color: red;
  }
}
This text will be red, but only in Chrome for Windows

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

The fixed navigation bar is obscured by the address bar in Chrome mobile

After starting a new project, I encountered an issue with my fixed navbar while testing it on Chrome on mobile iOS. Initially, I believed it to be a browser bug, but after reviewing previous projects, I realized that they functioned properly with the fixed ...

htmlgoogle-chromemobilescrollcss-position

Tips for creating a textarea element that resembles regular text format

I am working on creating an HTML list that allows users to edit items directly on the page and navigate through them using familiar keystrokes and features found in word processing applications. I envision something similar to the functionality of To achi ...

javascripthtmlcss

What is the best way to utilize a mask in an inline SVG that is compatible with Chrome browser?

I am looking to visually crop my element using an SVG shape that is defined within the same HTML file (inline SVG). Using clip-path works perfectly: div { width: 200px; height: 200px; background-color: red; clip-path: url("#c"); } <div> ...

htmlcsssvg

Leveraging jQuery in Content Scripts for Chrome Extensions

I am currently working on developing a Chrome extension that will prompt a small input whenever a user highlights text on a webpage (similar to Medium's feature that allows you to tweet highlighted text). While I am making progress, I believe using j ...

javascriptjquerygoogle-chromegoogle-chrome-extension

Tips for creating a stylish scrollbar in a React Material-Table interface

Currently, I am utilizing the react material-table and looking to implement a more visually appealing scroll-bar instead of the default Pagination option. Although I have experimented with the react-custom-scroll package, it has not produced the desired ...

javascriptcssreactjsmaterial-uimaterial-table

What does "cascading" refer to in the context of Cascading Style Sheets?

Similar Query: Explaining the concept of "cascading" in CSS Can you clarify the term "cascading" within Cascading Style Sheets? ...

cssterminology

Can you please provide guidance on implementing automatic horizontal scrolling with pauses between each div?

setInterval(function scroll() { $(".box_auto").each(function(i, e) { $("html, body").animate({ scrollTop: $(e).offset().top }, 500).delay(500); }); setTimeout(function() { $('html, body').animate({ scrollTop: 0 } ...

javascripthtmljquerycss

Ways to reduce the amount of time spent watching anime when it is not in view

My anime experiences glitches as the black container crosses the red, causing a decrease in duration. Is there a way to fix this glitch? I attempted to delay the changes until the red path is completed, but the glitches persist. delayInAnimeSub = ourVilla ...

javascripthtmlcssanimation

How can I dynamically assign a className in a React component based on the current state when importing styles?

I've been utilizing the style-loader to insert CSS modularly into my components ({style.exampleClassName}). My goal is to showcase a loader for a specific duration before displaying an image (at least 16 of these components in a grid layout). This i ...

javascriptcssreactjsreduxmodular

Enhancing the appearance of React Native WebView with CSS styling

Currently, I find myself facing a challenge... We are using a WebView in a section of our app because we receive an HTML string from an API endpoint. The HTML styling is not optimized for mobile use, so we are attempting to make some stylistic changes to i ...

cssreactjswebviewreact-native

What's the ideal file structure for Codeigniter paired with Angularjs?

Recently, I embarked on a project using Codeigniter and AngularJS for an app. However, I encountered some issues when attempting to use font-awesome offline. After investigating the problem, I concluded that it may be related to the file folder structure ...

phpcssangularjscodeigniterfonts

Utilizing Font Awesome within the `<fieldset>` element alongside Bootstrap 4 forms

When it comes to single-input forms in Bootstrap 4, a convenient method for incorporating font-awesome icons is by utilizing the input-group-addon class: <div class="input-group"> <span class="input-group-addon"> <i class="fa fa ...

htmlcsstwitter-bootstrapfont-awesome

Placing an icon and a title on the same baseline

I'm working on a new website design and I really like the layout shown in this image: https://i.stack.imgur.com/QuVRZ.png I've been struggling to align the icon with the title in a responsive manner. Here are some of the approaches I've att ...

htmlcss

The image on the landing page is not properly scaling to fit the size requirements

Currently utilizing Bootstrap Studio, I incorporated the code background-size:cover. While it works well in desktop mode, it unfortunately isn't very mobile-friendly. Below are screenshots for reference: Mobile View Example Desktop View Example ...

htmlcssbootstrap-4

Unable to reset iframe style height in IE8 using JavaScript

I am encountering an issue with resetting the height of an iframe using JavaScript. Here is the code snippet I am working with: var urlpxExt = document.getElementById('urlPx'); urlpxExt.style.height = "200px"; While this approach works well in m ...

javascriptcssdom-events

Incorporate a caret into an element using CSS styling

issue I encountered an issue where <textarea> and Javascript had some quirks when trying to transfer the value into a <pre> tag. My aim was to implement a blinking caret in the <pre> as if I were pressing F7. The reason behind not using ...

htmlcsscaret

What is the best way to develop an expanding line animation from this starting point?

I have a vision for an animation where, upon hovering over an icon, it enlarges, increases in opacity, and reveals some accompanying text. The visual effect I am aiming for involves two lines of color expanding horizontally from the center outwards before ...

htmlcssanimationcss-animations

Aligning text in a vertical progress bar using absolute positioning

Currently, I am trying to create a health bar-like element but I am facing difficulties in centering the text within it. Despite exhausting all my options, the text is either off-center when its length changes or extends beyond the borders of the bar. Her ...

htmlcss

The contents of the multi-level navigation are automatically shown as the page loads

I've implemented a multilevel dropdown menu on my website using a plugin, and it works as expected. However, there's an issue where the contents of the dropdown menu display for a brief moment while the page is loading. I tried adjusting the posi ...

javascriptjqueryhtmlcss

Resetting CSS attributes in Kendo UI Mobile when transitioning between views after removing them with jQuery

Dealing with the flicker of unstyled content in my kendo mobile web app has been a challenge, but I found a solution by using a specific CSS rule within my stylesheet: [data-role="content"] { visibility: hidden; } This effectively hides all ...

jquerycsskendo-ui