El proceso de introducción de nuevas propiedades CSS y elementos HTML puede ser largo y complicado. A veces, los cambios son propuestos por comités de estándares (como el consorcio World Wide Web (W3C)) y otras veces, los proveedores de navegadores crean sus propiedades.
Una propiedad creada por el W3C no funciona hasta que los proveedores de navegadores la implementen en las nuevas versiones de sus navegadores. A veces, hay desacuerdos sobre cómo se debe implementar un estándar. A veces, un proveedor de navegador crea una nueva propiedad de transición. Tenía que hacer esto con prefijos de proveedores. Otras veces, un proveedor de navegador crea una nueva propiedad que luego se convierte en un estándar, pero con una sintaxis ligeramente diferente. Y lo que es peor, si los usuarios finales nunca actualizan sus navegadores, ninguna de las nuevas funciones funcionará.
Un prefijo de proveedor es un prefijo especial que se agrega a una propiedad CSS. Cada motor de renderizado tiene su propio prefijo que solo aplicará la propiedad a ese navegador en particular.
El prefijo del proveedor es compatible con los siguientes navegadores:
- Internet Explorer: -ms-
- Chrome: -webkit-
- Safari: -webkit-
- Firefox: -moz-
- iOS: -webkit-
- Android: -webkit-
- Ópera: -o-
- Microsoft Edge: -ms-
CSS
/* Syntax */
.someClass {
/* Support for Firefox */
-moz-propertyName: propertyValue;
/* Support for webkit based browsers
(Chrome, Safari, iOS, etc.) */
-webkit-propertyName: propertyValue;
/* Support for Opera */
-o-propertyName: propertyValue;
/* Support for Edge and Internet Explorer */
-ms-propertyName: propertyValue;
/* Standardized property */
propertyName: propertyValue;
}
Para una mejor comprensión, tomaremos algunos ejemplos sobre cómo usarlo:
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Box Hover</title>
<style>
.mybox {
width: 300px;
height: 250px;
background-color: blue;
border-radius: 25px;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
}
.mybox:hover {
background-color: pink;
width: 500px;
height: 250px;
}
</style>
</head>
<body>
<div class="mybox"></div>
<script src="./script.js"></script>
</body>
</html>
Producción:
La salida del código anterior
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
span.home-text,
span.devrev-text {
background: linear-gradient(to right,
#f00, #ff0, #0ff, #0f0, #00f);
background-size: 200% auto;
color: #000;
font-size: 40px;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 9s linear infinite;
}
@keyframes shine {
0% {
background-position: 0% 100%;
}
50% {
background-position: 100% 0%;
}
100% {
background-position: 0% 100%;
}
}
</style>
</head>
<body>
<span class="home-text">
It is the world's first Document
</span><br>
<script src="./script.js"></script>
</body>
</html>
Producción:
La salida del código anterior
Nota:
- En CSS, un navegador simplemente ignora las propiedades que no son comprensibles.
- Siempre ponga la propiedad estandarizada al final. Cualquier navegador utilizará la última definición para su comprensibilidad, sobrescribiendo cualquier anterior.
Publicación traducida automáticamente
Artículo escrito por deekshashukla03102001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA