Érase una vez en la web, un campo de batalla
Con la nueva era de HTML5, la web móvil y todas las nuevas tecnologías, mucha gente ha olvidado o simplemente nunca vivió la "Guerra de Navegadores", una época oscura en internet donde todos peleaban contra todos, todos se odiaban entre si, ningun navegador implementaba algo que otro ya lo tenía, y sentía la necesidad de tener su propia versión de dicha característica.
Era como "Game of Thrones", pero en internet.
Ésta página está optimizada para Internet Explorer 5.5 con resoluciones de 800x600
Es esa fecha en la que "Esta página web está diseñada para correr en tu viejo Internet Explorer 5.5 en resoluciones 1024x768 y tu que usas Netscape con 800x600 no me importas" era practicamente ley, y el resto de gente que usaba Netscape u Opera sufría en el olvido.
Señores, esto está ocurriendo otra vez, les presento la nueva guerra de navegadores del 2012 en la era móvil y el pésimo uso de los prefijos de CSS.
Los prefijos de los navegadores en CSS3
Código :
#logo {
-webkit-animation: annoying_blink_effect 0.150s infinite;
-webkit-transform: rotate(-15deg);
-webkit-transition: all 10s linear;
}Safari, el navegador por defecto del iPhone y iPad, con su motor de rendereado WebKit introdujo muchas caracteristicas que han sido un boom a nivel gráfico para la web, incluyendo a las transiciones, animaciones, transformaciones, y muy pronto Adobe esta implementará los shaders para CSS, que ahora se volvieron parte del estandar de CSS3 - estas nuevas caracteristicas nos han brindado muchas nuevas posibilidades en la web; nuestras apps son mas rapidas, mas bonitas y hasta a veces su interfaz se puede comparar a la de una aplicacion nativa.
Pero esto trajo un nuevo problema, al ser los pioneros, mucha gente empezó a usar estas propiedades sin importarle el resto de navegadores, cada vez vemos menos websites siendo probadas con otros navegadores que usen la última versión de WebKit, y esta resultando en websites muy pobres que solo fueron "Diseñadas para correr en iPhone 4S", olvidando al 3GS o a los Android, ni hablar de los Window Phone, y Opera Mobile... alguien se acuerda de Opera?
Opera en el vacío: "ya nadie me quiere ;__;"
Opera, Microsoft y Mozilla se hartaron, se cansaron que aunque sus navegadores soporten muchas de estas opciones de CSS3, los "diseñadores web" solo estan diseñando, maquetando y programando para WebKit.
Es entonces cuando Opera mandó a los estándares al diablo e implementó los prefijos -webkit- a su navegador en versión "experimental", echando la culpa de todo esto a nosotros, los que trabajan en la web. ¿Y saben qué? Creo que es cierto, muchos de nosotros usan -o, -ms, -moz además de -webkit, y por último muy pocos usan la propiedad SIN los prefijos en su código.
¿Oh, no, y ahora qué podemos hacer?
No mucho, solo rezar que Opera nunca pase esto a su versión estable, esperar a que algún día todos los navegadores decidan dejar de usar prefijos (muy improbable), y aprender a escribir buen CSS.
El estándar indica que uno debe escribirlo su código asi.
Código :
#logo {
animation: annoying_blink_effect 0.150s infinite;
transform: rotate(-15deg);
transition: all 10s linear;
}Pero esta es la web, los navegadores nunca quieren hacerte la vida fácil, entoncestienes que incluir todos los prefijos de los como se debe, además de la propiedad por defecto.
Código :
#logo {
-o-animation: annoying_blink_effect 0.150s infinite;
-ms-animation: annoying_blink_effect 0.150s infinite;
-moz-animation: annoying_blink_effect 0.150s infinite;
-webkit-animation: annoying_blink_effect 0.150s infinite;
animation: annoying_blink_effect 0.150s infinite;
-o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
-o-transition: all 10s linear;
-ms-transition: all 10s linear;
-moz-transition: all 10s linear;
-webkit-transition: all 10s linear;
transition: all 10s linear;
}Pero los prefijos son horribles, arruinan mi código y los odio
Entonces, haz como los pros, aprende a usar pre-procesadores como Stylus, Less o Sass.
Y si por nada del mundo puedes usar uno de ellos, arruina la velocidad de carga de tu web usando prefix free.
Siempre usen los prefijos, no dejen que las empresas detras de los navegadores nos usen de excusa para hacernos la vida imposible.
.
.
