Using Autoprefixer to add in prefixes

HTML & CSS
1

How many of these are needed and required?

Do I want to add every single one?

Here are just a few that come up:

Using my code at this link: https://jsfiddle.net/kcr3n01e/

https://autoprefixer.github.io/

Are all of these necessary?

How do you know which ones are necessary?

All these prefixes make my css look very convoluted.

.outer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  min-height: 100%;
  margin: auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  width: 290px;
  gap: 10px;
  -webkit-animation: fadeInButtons 3s ease 0s forwards;
          animation: fadeInButtons 3s ease 0s forwards;
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  /*z-index: 2;*/
}

.container.active {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
}

/*body*/.bg1 {
  -webkit-animation: fadeInBody 5s ease 0s forwards;
          animation: fadeInBody 5s ease 0s forwards;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  opacity: 0;
}

@-webkit-keyframes fadeInBody {
  100% {
    opacity: 1;
  }
}

    -o-linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
    -o-linear-gradient(left, var(--color-b)70px, #0000 70px 100px, var(--color-b) 100px),

    -o-linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
    -o-linear-gradient(left, var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),

  -webkit-filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
          filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}

  -webkit-animation: fadeInExit 1s forwards 7.5s;
          animation: fadeInExit 1s forwards 7.5s;
  opacity: 0;
  pointer-events: none;
  -webkit-clip-path: circle(50%);
          clip-path: circle(50%);
}

@-webkit-keyframes curtain1-close {
  from {
    -webkit-transform: translateX(calc(-100% - 1px));
            transform: translateX(calc(-100% - 1px));
  }

  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes curtain2-open {
  to {
    -webkit-transform: translateX(calc(100% + 1px));
            transform: translateX(calc(100% + 1px));
  }
}

.fadingOut .container.active .curtain .panel-left {
  -webkit-animation: curtain1-close 8s forwards;
          animation: curtain1-close 8s forwards;
}

.fadingOut .exit {
  -webkit-animation: fadeOutExit 8s forwards;
          animation: fadeOutExit 8s forwards;
  pointer-events: none;
  opacity: 1;
}

.exit svg {
  fill: red;
  -webkit-transition: fill 3s ease;
  -o-transition: fill 3s ease;
  transition: fill 3s ease;
}

.container.active .inner-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
2

Look at caniuse.com and see how good the support is for the unprefixed version. Then you can make an informed decision. For example, display:flex has over 98% browser support. How many visitors do you anticipate will be using browsers which don’t support the unprefixed version?

3 Likes
3

Just remember that prefixes were never meant to be used in production. That wasn’t their purpose.

Use with care and use only when absolutely necessary (which is not very often).

2 Likes
4

Why do people continue to use the webkit prefix for animation if animation is supported by an overwhelming majority of all browsers?

https://caniuse.com/css-animation

5

Because they are misguided.

Or they added it years ago and it’s still there cluttering up their workspace. That’s the danger of adding prefixes.

Animation is usually an enhancement anyway and if a site is constructed properly it should work without animation. That means prefixes aren’t really needed unless the use of the site depends on them. Most animation is eye candy and not required for the function of the site.

Indeed you should be using the prefers reduced motion media query when adding any major flashing or annoying animations.

2 Likes
6

I found that here:

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.