DEV Community

Anushree M
Anushree M

Posted on

How to write css that looks same in all browsers?

#question #css #webdev #beginners

Hello! Two month back me and my friend had created front-end of our project, which looked similiarly in browsers -> chrome, firefox, edge in laptop. After a month, we observed changes in alignment of cards, size of forms, buttons on chrome and firefox eventhough we haven't changed any of the code.
Can anyone say what might have caused this?
How professional web dev's write code to avoid such problems?

Top comments (2)

Collapse
 
danielhansson profile image
Daniel Hansson •

One thing that comes to mind, is autoprefixer. A plugin for postCSS

GitHub logo postcss / autoprefixer

Parse CSS and add vendor prefixes to rules by Can I Use

Autoprefixer Cult Of Martians

PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba.

Write your CSS rules without vendor prefixes (in fact, forget about them entirely):

::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}
@media (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}
Enter fullscreen mode Exit fullscreen mode

Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you. You can try the interactive demo of Autoprefixer.

::-moz-placeholder {
  color: gray
}
:-ms-input-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx) {
  .image {
    background-image:
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

.

Collapse
 
anushree1125 profile image
Anushree M •

Thank you 🤝

Read next

teamstation profile image

Our Scientific Approach to Aligning Human Capacity with Business Objectives

TeamStation AI -

motuncoded profile image

How to create Subscribe to Newsletter with Reactjs and Supabase

Adijat Motunrayo Adeneye -

arjun98k profile image

Introduction to JavaScript

arjun -

cryptosandy profile image

How to Debug Code Effectively: Tools and Techniques

Crypto.Andy (DEV) -