Is the "supports" feature supported by the browser?

As I make my return to web development after some time away, I can't help but wonder if the ancient art of CSS hacks could be the solution to bridging the gap between modern @supports queries and outdated browsers that don't support these features. Is there potential to avoid unnecessary JavaScript by utilizing clever CSS hacks? Could this even eliminate the need for JavaScript in smaller projects? Are there any existing projects that explore this idea? Or perhaps I simply haven't found the right keywords in my search...

javascripthtmlcssmedia-queries

Answer №1

Indeed, you have the ability to achieve this using the following commands:

Below are some valid examples you can use: 

@supports not (not (transform-origin: 2px))
- to test browser non-support

or

@supports (display: grid) - to test browser support

or

@supports (display: grid) and (not (display: inline-grid)).
- to test both scenarios

For more information, refer to MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

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

When the key code is equal to "enter" (13), the form will be submitted

When I press the Enter key, I want to submit a form if there are no error messages present. Here is the function I have created: $(targetFormID).submit(function (e) { var errorMessage = getErrorMessage(targetDiv); if (e.keyCode == 13 && errorMessa ...

javascriptjquerykeycode

Theme not being rendered properly following the generation of a dynamic component in Angular

I am currently working on an Angular 9 application and I have successfully implemented a print functionality by creating components dynamically. However, I have encountered an issue where the CSS properties defined in the print-report.component.scss file a ...

javascriptangulartypescript

What are the steps for releasing a Next.js app as an npm package?

Currently, my web application is developed using Next.js. I am interested in distributing it as an npm package for others to utilize in their projects. Despite my efforts to search and seek assistance through Google, I have not come across any valuable ins ...

javascriptreactjsnpmnext.jspublish

What could be causing the CSS to not display properly on specific routes?

I'm facing an issue where CSS seems to be working fine for certain routes with node.js & express, but not for others. It's puzzling because the HTML file links to the same CSS file in both cases. For instance, CSS works perfectly for the route " ...

javascripthtmlcssnode.jsexpress

Diverging Width Values Between Chrome and Firefox with Jquery's .width() Method

Currently, I am implementing this JQuery script for my table. $(document).ready(function () { var tableBottom = $(window).height() - $('#compare-table').height(); $(window).scroll(function (event) { var y = $(this).scrollTo ...

jquerycsshtml

To reveal the secret map location, just tap on the button - but remember, this only applies to

I am encountering an issue with duplicating a card and toggling the hidden location map. Currently, the location button only works for the first card and not for the rest. I need each card to independently open and hide the location map when clicked on the ...

javascripthtmlcss

Changing the color of tabs using inline styles in material ui does not seem to work

I am brand new to using material ui and have been attempting to alter the colors of the selected tab. Currently, the color is a dark blue shade and I am aiming to change it to red. I tried applying inline styles, but unfortunately, there was no change. C ...

javascriptcssreactjsreduxmaterial-ui

JavaScript radio button returning value as undefined issueThe problem with radio buttons

http://jsfiddle.net/jngpjbjm/ Take a look at the provided fiddle link. I'm having an issue where the radio button value is showing up as undefined. I can't figure out why this is happening. Any assistance would be greatly appreciated. <input ...

javascripthtml

How can I use JavaScript or JQuery to retrieve the HTML content as a string from a specific URL?

How can I extract the URL of a link from a webpage and add it to my code without an ID for that specific link? Is there a way to search based on the content within the <a> tag? ...

javascriptjqueryhtmlajax

Panning or dragging on Google Map V3 can become unresponsive when the cursor moves outside of the map element

I have incorporated a Google map in a specific section of my webpage. I am facing an issue where if I click and drag the mouse outside the map area to other div elements, releasing the mouse still causes dragging/panning to continue when I return to the m ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Dynamic row height in MUI DataGrid

I'm currently utilizing the MUI DataGrid component, and I have a specific behavior in mind that I'd like to achieve: When there is a small number of rows present, I want the table to only occupy the necessary space for those rows. On the other h ...

cssreactjsmaterial-uidatagrid

Issue encountered: Incompatibility between Mongoose Populate and Array.push()

After reading a different post addressing the same issue, I still couldn't figure out how to implement the solution into my own scenario. The discussion revolved around the topic of node js Array.push() not working using mongoose. In my Mongoose asyn ...

javascriptnode.jsarraysasynchronousmongoose

Prevent the sender from receiving notifications from Firestore

Data is transmitted to firestore by the sender firestore saves the data firestore shares the data with all connected clients, sender included Is there a method for the sender to not receive the notification? OR If the sender does get the notification, is ...

javascriptnode.jsfirebasegoogle-cloud-firestore

Display/Conceal JavaScript

I recently implemented a JavaScript function on my website to show/hide specific elements. However, being new to JavaScript, I have encountered some difficulties. I've spent quite some time troubleshooting the code but haven't been able to pinpoi ...

javascripthtml

What is the best way to create a loop using JSON information?

Seeking assistance to create a loop using JSON data to display the title, link, and description of advertisements in HTML format. Provided is a JSON template with two ads, but my actual JSON contains 10-20 IDs. What am I overlooking in the code below? Sto ...

javascriptjquery

Review Limited Screen Size for a Smartphone Website

I have been working on optimizing a mobile website and I utilized CSS to adjust the layout design for screen widths between 150px and 480px. However, during testing on an actual phone, the desktop layout is appearing instead of the custom layout set with C ...

javascriptphpcsshtml

Tips for being patient while waiting for a function to return a value

I'm working on a React class and I'm facing an issue. The problem is that the variable isTokenActive is returning undefined, and I suspect it's because I need to wait for the function checkIfRefreshTokenWorking to return a value. componentD ...

javascriptreactjs

When using Fancybox2's json image group feature, the subsequent image fails to display

I need help updating my gallery to fancybox 2. Previously, everything worked fine in version 1.3.4, but now I'm facing an issue where the next image in the slideshow is not displaying correctly. It always shows the first image instead. However, if I n ...

javascriptjqueryfancyboxfancybox-2

Display or conceal content based on checkbox status

i am trying to create a system where content is hidden by default and only displayed when a checkbox is checked. The goal is to show the content when the checkbox is checked and hide it when unchecked, so that other content can be shown as well upon checki ...

htmlcss

The CORS policy has blocked access to XMLHttpRequest from 'localhost' to 'localhost'. A preflight response is required

I'm encountering the following error message: Access to XMLHttpRequest at 'https://localhost:44355/Brand' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access ...

javascriptreactjshttpcorsaxios