La gente de Opera ha presentado la primera beta de Opera 10. Una versión que sin duda, debe ir relacionada con los estándares web. Esta nueva versión además de mejorar las versiones ya existentes viene muy cargada de nuevos estándares que lo convierten en, probablemente, el navegador más avanzado del momento.
Entre los nuevos estándares implementados podemos destacar:
1) Web Fonts: Capacidad de importar fuentes propias a nuestras aplicaciones.
Uno de los estándares más solicitados por los desarrolladores web es la posibilidad de especificar fuentes diferentes a las que el usuario tiene instaladas en su sistema. Esto ha dado lugar a una gran cantidad de aplicaciones Javascript que solventan el problema momentáneamente.
/*
Definimos una nueva fuente y la URL de donde descargarla
*/
@font-face {
font-family: "My font gothic";
src: url("http://www.myweb.com/fonts/myfont.ttf") format("truetype");
}
/*
Indicamos que los párrafos reciban esa tipografía
*/
p {
font-family: "My font gothic";
...
}
Con la llegada de este estándar nos encontramos con que la tipografía de nuestras páginas SIEMPRE se verá bien, sin importar las que el usuario tenga instaladas en su sistema operativo.
Podeis ver un ejemplo aquí mismo.
2) Transpariencias, RGBA y HSLA: El control del color en tu navegador
Otra nueva mejora, procedente del estándar CSS3 es la posibilidad de usar transpariencias. Esta propiedad ya hace tiempo que está disponible en Opera (al igual que otros navegadores) pero en esta nueva nos permite relacionarla con las nuevas formas de gestionar el color de nuestros elementos con RGBA o HSLA.
// HSLA
div { background-color: hsl(240, 100%, 50%); }
// RGBA
div { background-color: rgb(255, 0, 0); }
// Combinandolos con la opacidad (en negrita)
div { background-color: hsla(240, 100%, 50%, 0.5); }
div { background-color: rgba(255, 0, 0, 0.5); }
Para verlo más claro, mejor mostrar un ejemplo de como lo hacíamos antes y como podemos hacerlo ahora.
// Antes
.news-item {
background-color: rgb(0, 255, 0);
opacity: 0.4;
}
// Ahora RGBA
.news-item {
background-color: rgba(0, 255, 0, 0.4);
}
// Ahora HSLA
.news-item {
background-color: hsla(120, 100%, 50%, 0.4);
}
3) Selector API: Selecciona cualquier elemento mediante Javascript en una línea
Quizas se trate de la que más he hablado en el blog. Y es que esta nueva funcionalidad, es la más extendida entre los navegadores modernos, con ella podremos seleccionar elementos de nuestro árbol DOM mediante una especificación CSS. Lo que hace que esta consulta sea más sencilla para todos y mucho más potente y ligera.
Hasta ahora los frameworks JS nos permitían realizar este tipo de consultas, ahora navegadores como WebKit, Firefox 3.5 y Opera 10 nos permiten aprovecharnos de la versión nativa, mucho más rápida que la implementada en Javascript.
// Ejemplo antiguo
var fruits = document.getElementById("fruits");
var checkboxes = fruits.getElementsByTagName("input");
var list = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
list.push(checkboxes[i]);
}
}
// Usándo selector API
var list = document.querySelectorAll("#fruits input:checked");
4) Mejoras en SVG
El estándar SVG (Scalable Vector Graphics) está llegando poco a poco y sin darnos casi cuenta se está integrando en la mayoría de navegadores y sin duda, lo está haciendo para quedarse. En esta nueva versión de Opera, podemos entre otras cosas:
- Manipular los FPS de un SVG animado mediante Javascript.
- WebFonts en SVG.
Otras mejoras
Otras mejoras que nos encontraremos en esta versión Beta son, la implementación de algunas mejoras en DragonFly.
Si recordamos, DragonFly es el Firebug de Opera, y aunque aún está en estado alpha esta nueva versión parece bastante interesante. Nos permitirá editar el DOM directamente desde él, así como depurar nuestras peticiones Ajax desde la pestaña Net.
No es necesario hacer demasiado incapie en que esta versión, ya valida el estándar Acid3 con un 100 sobre 100, ya que hace tiempo que vimos que Opera lo había conseguido.
Por fin nos estamos acercando a versiones en las que podemos deshacernos del Javascript necesario para conseguir que estas propiedades estén disponibles.
