I have a CSS file with different style classes incorporated in it and this CSS file is being used in LWC. Now what I found it's coming up fine in Chrome but not in Mozilla or Safari browser. How to make the CSS compatible for cross browser use?

Example: content of css file something like below:

    max-width: 17px;
    min-width: 18px;
    min-height: 18px;
    margin: 10px 0px 42px -6px;

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 10px;
    padding: 0px;

.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;

1 Answer 1


You can use a tool like this which will tell you if your CSS is compatible with each browser and the reason why it is not.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .