Fix Warning "Also Define The Standard Property 'Box-Shadow' for Compatibility"

Fix Warning Also define the standard property 'box-shadow' for compatibility

It means you should add the standard style rule (box-shadow) in addition to the vendor prefixed version (-webkit-box-shadow)

.scrollbar-black::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); // <- Add this to fix.    
    background-color: #000;
}

Also define the standard property 'grid-row' for compatibility

You can get rid of that, if you want, by setting this setting to ignore:

CSS > Lint: Vendor Prefix

  When using a vendor-specific prefix, also include the standard property.

You are getting the warnings because you use one or more of these keys

-ms-grid-row
-ms-grid-column

in your elements without also using the standard non-prefixed versions at the same time:

grid-row
grid-column

So in every element where you have -ms-grid-row also include, after it in the same selector, grid-row and the same with -ms-grid-column put a grid-column after it in the same selector. And the warnings will go away. This is good practice anyways. For example:

header {
  -ms-grid-row: 1;   /* warning has gone away */
  grid-row: 1;

  -ms-grid-column: 1;
  -ms-grid-column-span: 2;

  grid-column: 2;
  grid-area: header;
}

Or set the CSS > Lint: Vendor Prefix to ignore and you won't see the warnings - but I do not recommend doing that. You should be including the standard non-prefixed versions of those keys.

Using CSS variable to define -webkit-background-clip property doesn't work on Chrome

Lea Verou has confirmed that this is a Chrome bug. She created this reduced test case, which fails when viewed with Chrome. She filed this bug report: Issue 980439.

On top of that, there's a WebKit bug (thus affecting both Safari and Chrome) when you try to define the background-clip property with a CSS variable, e.g., background-clip:--a, where the CSS variable is text. This causes both Chrome and Safari to ignore a valid -webkit-background-clip:text rule. See Bug 199410 - background-clip:var(--a) invalidates -webkit-background-clip:text when --a:text.

Due to both of these bugs, the background-clip property isn't at this time a good candidate for using CSS variables to simplify vendor prefixes.

Transitions on the CSS display property

You can concatenate two transitions or more, and visibility is what comes handy this time.

div {  border: 1px solid #eee;}div > ul {  visibility: hidden;  opacity: 0;  transition: visibility 0s, opacity 0.5s linear;}div:hover > ul {  visibility: visible;  opacity: 1;}

<div>  <ul>    <li>Item 1</li>    <li>Item 2</li>    <li>Item 3</li>  </ul></div>

How to add border radius on table row

You can only apply border-radius to td, not tr or table. I've gotten around this for rounded corner tables by using these styles:

table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  border: solid 1px #000;
  border-style: none solid solid none;
  padding: 10px;
}

tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }

tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }

tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }

<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

Webkit backface visibility not working

I had a similar problem with children of such an element when a child had a webkit-transform.
I noted that I had to set the backface visibility on that element as well:

<style>
#div1 {
    -webkit-transform: rotateX(180deg);
    -webkit-backface-visibility: hidden;
}
#div2 {
    -webkit-transform: translate3d(0,0,0);
}
</style>

<div id="div1">
    <div id="div2">
        Text
    </div>
</div>

So the solution is to use as well:

#div2 {
    -webkit-transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden; /* again */
}

---

Related Topics