Distinguishing background colors depending on the browser's compatibility with CSS properties

I've successfully designed a polka dot background using pure CSS:

.polka-gr{
    
    background-image: radial-gradient(#FAFFB3 20%, transparent 0), radial-gradient(#F1C3CB 20%, transparent 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}
<div class="polka-gr" style="background-color:#77FFD1;width:600px;height:200px;></div>

The background color is a shade of green (hex value #77FFD1).

For clients that don't support radial-gradient like Opera Mini, they see a plain #77FFD1 background without the polka dots.

Is it possible to display a different color like #FFFF99 for unsupported browsers while still showing the greenish background with polka dots in supported ones?

If this kind of setup is feasible, an example would be helpful.

cssprogressive-enhancement

Answer №1

.polka-gr{
  background: yellow;
}

@supports (background: radial-gradient(#F1C3CB 20%, transparent 0)) {
.polka-gr{

    background-image:radial-gradient(#FAFFB3 20%, transparent 0), radial-gradient(#F1C3CB 20%, transparent 0);
      background-color:#77FFD1;
      background-size: 30px 30px;
      background-position: 0 0, 15px 15px;
  }
}
<div class="polka-gr" style="width:600px;height:200px;></div>

To reach a wider range of browsers, utilize @supports

https://developer.mozilla.org/en-US/docs/Web/CSS/%40supports

In your scenario:

@supports (background: radial-gradient(white, black)) {
  /* include relevant styles here */
}

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

Can you tell me the proper term for the element that allows CSS properties to be changed after a link has been clicked?

I have integrated a horizontal scrolling date selector on my website, and it is functioning well. However, I am facing an issue while trying to change the CSS properties of a clicked date link using jQuery. Despite successfully firing the click event, I am ...

javascriptjqueryhtmlcss

Pattern to locate a CSS class identifier

I've been working on creating a regex to match valid CSS class name structures. Currently, my progress looks like this: $pattern = "([A-Za-z]*\.[A-Za-z]+\s*{)"; $regex = preg_match_all($pattern, $html, $matches); However, there are certai ...

phpcssregex

Angular Material Sidenav fails to cover the entire screen while scrolling

https://i.stack.imgur.com/32kfE.png When scrolling, the Sidenav is not expanding to take up 100% of the screen and it continues to scroll along with the page content. <div layout="column"> <section layout="row" flex> <!-- siden ...

javascriptcssangularjsangularjs-directiveangular-material

Rotating and scaling an image simultaneously using CSS3

I am feeling very puzzled. Why am I unable to simultaneously scale and rotate? Despite my attempts, it seems to be not working: .rotate-img{ -webkit-transform:scale(2,2); -webkit-transform:rotate(90deg); margin-left:20%; margin-top:10%; } ...

javascriptjquerycsscss-transforms

Mobile version experiencing issue with Navbar not collapsing

The dropdown navigation bar on the mobile version of my website is not functioning properly. Despite several attempts, I have been unable to figure out a way to make it work effectively. <!DOCTYPE html> <html lang="en"> <head> & ...

javascriptjquerycssbootstrap-5

Tips for transforming the appearance of an asp.net page with asp:Content into a stylish css-page

Currently facing an issue where I am unable to change the background-color in my CSS file. As a workaround, I have placed the style directly within an ASP page. <asp:Content Id="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> ...

c#htmlasp.netcss

Troubleshooting overlap problem between Skrollr and SlickNav

I successfully implemented Skrollr to fix images, similar to this example: Additionally, I am utilizing Slicknav for the menu functionality. However, I encountered an issue where the menu opens behind the fixed "parallax" image. Despite trying various ap ...

javascripthtmlcssskrollrslicknav

Guide on updating directory images by uploading a new one directly onto the site

As someone who is new to HTML, I have a question about updating images on my website through an "admin" page. Currently, I have two websites set up - the main site displays an image from the "images" folder, and the second site serves as an admin page. M ...

htmlcss

Getting Started with CSS Alignment - A Novice's Guide

Recently, I embarked on my journey to learn HTML and CSS with the ambition of creating a login page. Although I've successfully crafted a basic version, I'm encountering an issue where the input boxes and labels are misaligned, giving off an unpr ...

htmlcss

Tips for building a modal box with HTML, CSS, and jquery!

Looking to create a modal box using HTML, CSS, and jQuery? <button id="myBtn">Click here to open the Modal</button> This code will help you achieve that: <!-- This is the Modal content --> <div class="modal-content"> <sp ...

jqueryhtmlcss

Choose all list elements except the final one

I need to display a list of tags horizontally and add a comma after each item except for the last one. Here is how I can achieve this using CSS: ul.tags { list-style: none; } ul.tags > li { display: inline; } ul.tags > li:after { con ...

htmlcsscss-selectors

Navigate to the parent element in the DOM

Looking to add some unique styling to just one of the many Mat dialog components in my project. It seems like modifying the parent element based on the child is trickier than expected, with attempts to access the DOM through the <mat-dialog-container> ...

htmlcssangulartypescriptdom

Guide on adding dual horizontal scroll bars to a v-data-table (Vue / vuetify)

Currently, I am working on Vue / Vuetify and experimenting with the v-data-table component. While creating a table, I noticed that it has a horizontal scroll bar at the bottom. https://i.stack.imgur.com/noOzN.png My goal now is to implement two horizontal ...

htmlcssvue.jsvuetify.js

Strip the CSS styling from an image (the CSS being included in the generated code)

I need to remove the CSS styling from an image, but I can't modify the generated code where it's coming from. My actual code looks like this: <div class="bubble"> <img id="one" src="/static/webupload/MyronArtifacts/images/descarga.png ...

javascripthtmlcss

Building a single-page app optimized for mobile viewing with Foundation framework

Currently facing an issue with the scaling of the viewport on certain mobile devices when loading new content via ng-include in our responsive website built on Foundation. The problem arises as the width of the page breaks, leading to horizontal scrolling. ...

javascriptcssmobileresponsive-designzurb-foundation

Tips for adjusting column sizes in react-mui's DataGrid based on screen size

I would like the title column to occupy 3/4 of the full row width and the amount column to take up 1/4 of the full row width on all screens sizes (md, sx...). Here is the updated code snippet: import React from 'react' const MyComponent = () =&g ...

javascriptcssmaterial-uicomponentssizing

Ways to incorporate design elements for transitioning focus between different elements

When focusing on an element, I am using spatialNavigation with the following code: in index.html <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfb5acf2acafbeabb6beb3f2b1bea9b6 ...

javascripthtmlcssreactjssass

Toggle the active class on the parent element when it is clicked

I'm encountering a problem with my JavaScript - attempting to make this function properly. Firstly, here is the desired functionality: 1.) Add or remove the 'active' class from the parent element when clicked 2.) When clicking inside the ...

javascriptjqueryhtmlcss

Eliminating the border of a table that is contained within a cell

I am facing an issue with a nested table where I need to remove the borders from specific cells (around A and B). Here is the code snippet: <style> .withBorders tr td{ border: 1px solid black !important ; } .withBorders table. ...

cssborderparent-child

Pressing the button will allow you to select and copy the text within the

I am looking to incorporate a mock-chat feature into my website. The concept is to type something on the website, then click a button next to it which will move the text to a frame above. I attempted this using a textarea and even found a code for selectin ...

javascripthtmlcsscopy