Prefijos CSS

El avance tecnológico en la web provoca que los navegadores no siempre soportan tecnologías nuevas o experimentales, he aquí donde entran los prefijos CSS.

¿Qué son los prefijos CSS?

Los prefijos son fragmentos de código agregado a las propiedades CSS que no están estandarizadas (betas o experimentales).

Esto provoca a los desarrolladores de estas nuevas propiedades a agregar prefijos para cada navegador, permitiendo que otros programadores las utilicen.

Prefijos CSS más comunes

Entre los prefijos mas utilizados por los principales navegadores podremos encontrar los siguientes.

• -webkit- (utilizada por Chrome, safari y otros navegadores basados en WebKit)
• -moz- (Firefox)
• -o- (Opera)
• -ms- (internet Explorer y Edge)

Es probable que los identifiques si ya tienes un poco de experiencia en la creación de sitios web.

¿Como se utilizan?

Veamos en un ejemplo la implementación de los prefijos para comprender mejor como se utilizan.

.cuadrado {
    width: 32px;
    height: 32px;
    background-color: #555555;
    -webkit-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    transform: scale(0, 0);
}

• Se crea un selector de acuerdo al nombre de una clase HTML.
• En las propiedades del selector se agregan los prefijos, únicamente a propiedad que lo requiera.

Agregar los 4 prefijos mas utilizados y una sin prefijo para que puedan ser reconocidos por los navegadores.

Podría interesarte Agregar Bootstrap a un proyecto web  

No todas las propiedades de CSS las utilizan, si tienes duda de si una propiedad la utiliza o no puedes consultar el sitio web caniuse.

Caniuse te muestra el porcentaje de compatibilidad de las propiedades CSS con los navegadores web de equipos de cómputo y móviles.