css - prefijos - transform safari prefix

Lista de prefijos de proveedor de CSS

Question

Además de la siguiente lista, ¿hay otros prefijos de proveedor de CSS que sean importantes para el desarrollo web ? ¿Son correctas mis definiciones? ¿Debo ser más específico sobre los navegadores móviles (Webkit móvil, por ejemplo)

• -khtml- (Konqueror, realmente viejo Safari)
• -moz- (Firefox)
• -o- (Opera)
• -ms- (Internet Explorer)
• -webkit- (Safari, Chrome)

¿ Esta lista (que también contiene mso- , -wap- y -atsc- ) agrega algo de valor?

Answer 1

Estos son los que yo conozco:

• -ms- Microsoft
• mso- Microsoft Office
• -moz- Mozilla Foundation (navegadores basados ​​en Gecko)
• -o- , -xv- Opera Software
• -atsc- Comité de Normas Avanzadas de Televisión
• -wap- El Foro WAP
• -webkit- Safari, Chrome (y otros navegadores basados ​​en WebKit)
• -khtml- , -konq- navegador Konqueror
• -apple- Webkit también admite propiedades usando los prefijos -apple-
• prince- YesLogic
• -ah- Antenna House
• -hp- Hewlett Packard
• -ro- Objetos reales
• -rim- Research In Motion
• -tc- Componentes altos

Estos están oficialmente enumerados en la Especificación CSS 2.1, sección informativa 4.1.2.2 .

Answer 2

Si bien no se encuentra en el contexto directo del desarrollo web, JavaFX utiliza un prefijo de proveedor para el uso de CSS: -fx- .

Answer 3

Solo una sugerencia, si está planeando simplemente añadir un prefijo a una transición css, supongamos column-count: 3; y desea soporte para todos los navegadores principales, y prefija su propiedad con todos los prefijos mencionados en las respuestas aquí, entonces una forma mejor y más óptima sería usar una herramienta que lo haga por usted:

Puede usar una toma en línea como pleeease.io que hará la conversión por usted:

Entrada

a {
  column-count: 3;
  column-gap: 10px;
  column-fill: auto;
}

Salida

a {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  -webkit-column-fill: auto;
     -moz-column-fill: auto;
          column-fill: auto;
}