CODEWITHSUNDEEP
cssbrowsercross-browser
pheromix
pheromix

Reputation: 19307

How to make a css valid to all browsers?

I defined these css styles :

.scrollbar {
    float: left;
    background: #fff;
}
.scrollbar-primary::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}
.scrollbar-primary::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #4285F4;
}

At runtime it runs only on Google Chrome. When I run the app through Mozilla Firefox then the app does not render properly the desired rendering. So how to make the styles applied for all browsers ?

Upvotes: 1

Views: 61

Answers (1)

Robert
Robert

Reputation: 6967

You cannot implement this CSS across all browsers. -webkit is a vendor prefix for browsers that support either the WebKit or Blink browser engine. Right now support is inconsistent even within browsers that support this prefix:

MDN Documentation for ::-webkit-scrollbar

CanIUse Documentation for ::-webkit-scrollbar

If you absolutely need a fully customized scrollbar implementation that is fully cross-browser compatible you will very likely need to research a JavaScript based solution.

The good news is that since this is a vendor prefix, browsers that do not support it will simply ignore the declarations and load the scrollbar in whatever fashion that browser normally displays its scrolling mechanism.

Upvotes: 2

Related Questions