tricks - css title tooltip

CSS ¿Qué son-moz- y-webkit-?

Question

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

Soy un principiante en CSS y cuando estaba buscando un código CSS el otro día, encontré estas líneas. En los tutoriales que solía aprender css, nunca había visto algo como estas líneas. ¿Podría alguien explicarme estas líneas o darme una fuente donde pueda aprender a implementar líneas como estas?

¡Gracias por adelantado!

Answer 1

Estas son las propiedades con prefijo de proveedor que ofrecen los motores de representación relevantes ( -webkit para Chrome, Safari; -moz para Firefox, -o para Opera, -ms para Internet Explorer). Por lo general, se utilizan para implementar funciones CSS nuevas o patentadas, antes de la aclaración / definición final por parte del W3.

Esto permite que las propiedades se configuren de forma específica para cada navegador / motor de representación individual para que las inconsistencias entre las implementaciones sean contabilizadas de manera segura. Los prefijos, con el tiempo, se eliminarán (al menos en teoría) ya que el prefijo, la versión final, de la propiedad se implementa en ese navegador.

Para ese fin, generalmente se considera buena práctica especificar primero la versión con prefijo del vendedor y luego la versión sin prefijo, para que la propiedad sin prefijo anule las configuraciones de propiedad con prefijo del vendedor una vez que se implemente; por ejemplo:

.elementClass {
    -moz-border-radius: 2em;
    -ms-border-radius: 2em;
    -o-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
}

Específicamente, para abordar el CSS en su pregunta, las líneas que cita:

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

Especifique las propiedades de column-count column-gap column-fill para los navegadores Webkit y Firefox.

Referencias

• Módulo de diseño de múltiples columnas CSS .
• ''En defensa de los prefijos del proveedor'' (Meyerweb.com) .
• Listas de prefijos de proveedor (Meyerweb.com) .

Answer 2

¿Qué son -moz- y -webkit-?

Las propiedades de CSS que comienzan con -webkit- , -moz- , -ms- o -o- se llaman prefijos de proveedor.

¿Por qué diferentes navegadores agregan prefijos diferentes para el mismo efecto?

Una buena explicación de los prefijos del proveedor proviene de Peter-Paul Koch de QuirksMode :

Originalmente, el punto de los prefijos de los vendedores era permitir a los fabricantes de navegadores comenzar a respaldar las declaraciones experimentales de CSS.

Digamos que un grupo de trabajo del W3C está discutiendo una declaración de cuadrícula (que, por cierto, no sería una mala idea). Digamos además que algunas personas crean un borrador de especificación, pero otros no están de acuerdo con algunos de los detalles. Como sabemos, este proceso puede tomar años.

Digamos además que Microsoft como experimento decide implementar la grilla propuesta. En este momento, Microsoft no puede estar seguro de que la especificación no cambie. Por lo tanto, en lugar de agregar una cuadrícula a su CSS, agrega -ms-grid .

El tipo de prefijo de proveedor dice "esta es la interpretación de Microsoft de una propuesta en curso". Por lo tanto, si la definición final de la cuadrícula es diferente, Microsoft puede agregar una nueva cuadrícula de propiedades de CSS sin romper las páginas que dependen de -ms-grid.

ACTUALIZACIÓN AL AÑO 2016

Como esta publicación tiene 3 años, es importante mencionar que ahora la mayoría de los proveedores entienden que estos prefijos solo crean código duplicado innecesario y que la situación en la que necesita especificar 3 reglas CSS diferentes para obtener un efecto que funcione en todos los navegadores es un no deseado.

Como se menciona en this glosario sobre la vista de Mozilla sobre el Vendor Prefix el May 3, 2016 ,

Los vendedores de navegadores ahora intentan deshacerse del prefijo del proveedor para funciones experimentales. Se dieron cuenta de que los desarrolladores web los estaban usando en sitios web de producción, contaminando el espacio global y dificultando el desempeño de los de abajo.

Por ejemplo, hace solo unos años, para establecer una esquina redondeada en una caja, tenía que escribir:

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px;

Pero ahora que los navegadores han llegado a ser totalmente compatibles con esta característica, solo necesitas la versión estandarizada:

border-radius: 10px 5px;

Encontrar las reglas correctas para todos los navegadores

Como aún no existe un estándar para las reglas CSS comunes que funcionan en todos los navegadores, puede usar herramientas como caniuse.com para verificar el soporte de una regla en todos los navegadores principales.

También puede usar pleeease.io/play . Pleeease es una aplicación Node.js que procesa fácilmente su CSS. Simplifica el uso de preprocesadores y los combina con los mejores postprocesadores. Ayuda a crear hojas de estilo limpias, admite navegadores antiguos y ofrece una mejor capacidad de mantenimiento.

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;
}