What causes the unusual behavior of css property "all: unset" in the Safari browser on MacOS?

Here's the situation - the parent element has the CSS property all: unset.

I noticed that in Safari (Version 12.1.1 (14607.2.6.1.1)), all the children of this parent are only affected by the * selector, ignoring inline styles and even the !important declaration.

Interestingly, this behavior only applies to the color property; the background-color property works as expected.

Everything displays correctly in Chrome, so is this a glitch in Safari or did I make an error somewhere? And how can I resolve this issue in Safari?

* {
  color: red;                   /* Text color uses this value */
  background-color: pink;
}

.Parent {
  all: unset;
}

.Child {
  color: blue;
  background-color: yellow;     /* Background color uses this value */
}
<div class="Parent">
  <div class="Child">Some Text</div>
</div>

htmlcsssafariunset

Answer №1

In Safari, you can utilize the -webkit-text-fill-color property to specify text colors. Here is an example:

* {
  color: red;                   /* Text color is using this one */
  background-color: pink;
  -webkit-text-fill-color: red;
}

.Parent {
  all: unset;
}

.Child {
  color: blue;
  background-color: yellow;     /* Background color is using this one */
  -webkit-text-fill-color: blue;
}
<div class="Parent">
  <div class="Child">Some Text</div>
</div>

@ Dan Fabulich provided insight on the bug in this code snippet:

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

Update Bootstrap Vue to change the colors of the breadcrumbs

Struggling to customize the look of bootstrap-vue breadcrumbs? I've attempted various combinations of classes and styles in the breadcrumb and breadcrumb-item tags, but to no avail. Every time, I end up with blue or grey text on a light grey backgroun ...

cssbootstrap-4bootstrap-vue

Trigger a function upon the initial keypress event detected on an input field

I am facing an issue with an input element that has an onkeypress event triggering a function called change(). Strangely, the function does not execute on the very first keypress. I notice that I have to input 55 instead of just 5 for the function to updat ...

javascripthtmleventsinputonkeypress

SVG: Altering the dy attribute has no impact on the overall height of the bounding rectangle for the parent text

We are striving to align a group of tspan elements both vertically and horizontally. However, the parent container is not taking into consideration dy values. This lack of consideration is leading to alignment issues. If you adjust the dy values in this ...

javascripthtmlsvg

Steps for adding products to your shopping cart without using a JavaScript framework:

As a newcomer to web development, I took on the challenge of creating an e-commerce website using only HTML, CSS, and vanilla JavaScript (without any frameworks). I've encountered a roadblock while trying to implement the "Add to Cart" functionality ...

javascripthtmlcsse-commerce

Enhancing the appearance of individual cells in jQuery DataTables

While working with jQuery DataTables, I have successfully managed to access row data and apply styling to the entire row. Below is the code snippet used to initialize the datatable: var $dataTable = $('#example1').DataTable({ "data": data, ...

javascriptjquerycssajaxdatatables

When hovering over an element, I must utilize a selector and reference a variable that was defined outside of the hover state in order to

Explaining this code may be a challenge, but I'll give it my best shot. Here's the code snippet: $('#navibar a').hover(function(){ var position = $(this).position(); var width = $(this).width(); $('#underliner'). ...

javascriptjqueryhtmlcss

Comparing HTML5 and web services with MVC3

Within my organization, there is an ongoing discussion regarding the best approach to developing our future web applications. We currently have two distinct groups of developers who share common interests. All parties agree on utilizing html5, css3, and jQ ...

ajaxasp.net-mvc-3web-serviceshtml

What factors dictate the color of rows in jquery datatable designs?

Within the jQuery datatable styles, such as "smoothness," the rows are displayed in different colors. What factors determine which colors are shown on each row? And is there a way to customize this color scheme? Refer to the example below from their sampl ...

jquerycssdatatablestyles

What to do when encountering a problem with HTML, CSS, and JS while loading a webpage from an SD card to a WebView

I am facing an issue while loading an HTML file from the SD card to a webview. The problem is that the CSS, images, and videos are not loading properly in the webview. Compatible with Android 4.4 KitKat and Chrome version Not compatible with versions belo ...

javascriptandroidhtmlcssstorage

Tricky CSS layout challenge: Creating a flexible width single-line design

How can I create a single-line CSS layout that flows to the right endlessly, with each box occupying a set percentage of the viewport width (e.g. 20%)? To better illustrate, refer to the following diagram: +-----------------------------+ |VIEWPORT ...

csslayout

Choose the first and last div element in the selection

Is there a way to target the first and fourth div elements using the :nth-child selector for styling purposes? .main{ width:460px; height:240px; } .box{ width:100px; height:100px; background:red; float:left; margin:10px; } /*I tried */ . ...

htmlcsscss-selectors

Guide to looping through a map arraylist in JavaScript

Here is a sample map arraylist. How can I access this arraylist using JavaScript from within pure HTML? And how can I iterate over this list? <%@page import="org.json.simple.JSONObject"%> <%@page import="org.json.simple.JSONArray"%> <% JSON ...

javascriptjqueryhtmljsparraylist

Creating a div element with a fixed size that remains the same regardless of its content

Check out the code snippet below for displaying an image and title: <div id="eventsCollapsed" class="panel-collapse collapse" ng-controller="videoController"> <div class="panel-body"> <div ...

cssangularjstwitter-bootstraptwitter-bootstrap-3

Resolve Bootstrap 4 responsive table header alignment glitch

Utilizing the d-none and d-md-block classes on a responsive table to hide certain columns at smaller screen sizes has been successful overall. However, there is one issue - the hidden columns seem to be slightly misaligned with the rest of the table. Despi ...

htmlcssbootstrap-4responsive-design

Issues with CSS hierarchy between descendants and child elements are causing functionality problems

Presented here is a snippet of HTML/CSS code featuring two URLs: The first URL (Google) is a direct child of the div. The second URL (Bing) is simply a descendant of the div. Using the child-selector should result in only the Google URL being styled in ...

htmlcsscss-selectors

The material icons CDN does not seem to be functioning properly in Next.js

After adding a CDN to the head section of my Next.js project, I encountered an issue where it was not working as expected. import Head from "next/head"; <Head> <link href="https://fonts.googleapis.com/icon?family=Material+Ico ...

cssnext.jscdnheadgoogle-material-icons

Send Angular to different Controller post successful Login

I'm having trouble figuring out how to route my angular app to a new controller after the user logs in. My app is pretty simple, it uses 'loginservice'... once the user logs in, it should go to /home which has a different template than the i ...

htmlangularjs

What is the best way to toggle between different sections of a webpage using HTML, CSS, and Javascript?

I am looking to display unique content based on the user's selection of different month/year options on the same page. For example, if the user chooses March 2021, I would like to show them events specific to that month. Here is a screenshot for refer ...

javascripthtmlcss

An HTML table featuring rows of input boxes that collapse when the default value is not filled in

My table is populated with dynamic rows of input boxes, some of which may have a default value while others return an empty string ''. This causes the table to collapse on those inputs. <tr *ngFor="let d of displayData"> < ...

htmlcssangulartypescript

Calculating the size of grid thumbnails or items using the calc() function

I am currently working on building a responsive portfolio grid that spans the full width of the screen. To achieve this, I have set the width of the items using calc() and ensured that the thumbnail image fills the entire div by applying the following CSS: ...

phpcsswordpressthumbnailsimage-size