aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Hace ya tiempo tiempo, vimos que WebKit integraba una implementación de font-face con la que podríamos definir la fuente que debía mostrarse en nuestras página, hace poco Mozilla anunció que Firefox 3.1 iba a integrar esta opción, incluso encontramos alternativas mediante Javascript que servían como alternativa a sIFR3.

Safari + @font-face

Internet Explorer 7.0 + @font-face

John Tangerine nos muestra un ejemplo de como conseguir esta funcionalidad en Internet Explorer 6+, eso sí, sin usar el sistema estandar de fichero .otf.

<style type="text/css" media="screen">
h1, h2, h3, p, td{
font-family:'Fontin-Regular', georgia, serif;
}

/* TODOS LOS NAVEGADORES MODERNOS*/
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.otf') format('opentype');
}
</style>

/* PARA INTERNET EXPLORER*/
<!--[if IE]>
<style type="text/css" media="screen">
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.eot');
}
</style>
<![endif]-->

Puedes probar tu mismo el resultado de este código.

Hace casi 1 año que WebKit anunciaba la incorporación de CSS Transform en el corazón de su navegador. Una propiedad que nos permitía realizar modificaciones a nuestros elementos HTML directamente desde el CSS.

-moz-transform: translate(100px, 200px); /* Move right 100 pixels, down 200 pixels */
-moz-transform: translate(30px); /* Move down and right 30 pixels */
-moz-transform: translate(50%, 50%); /* Move down and right by 50% of the size of the element. */

Hoy Ajaxian anuncia que Firefox se suma a los que implementan esta propiedad.

Hace casi un año, WebKit anunció que soportaba @font-face como parte de la implementación de CSS3 en su navegador. Con esta propiedad nos permite definir una fuente que se descargará al cliente evitando que nuestros diseños se vean de forma diferente dependiendo de que el usuario tenga o no la fuente principal instalada.

@font-face {
  font-family: "Kimberley";
  src: url(http://www.princexml.com/fonts/larabie/ »
  kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }

Ahora Firefox 3.1 nos permitirá usar este código y disfrutar de esta propiedad que la mayoría de diseñadores web estaba deseando disponer.

No soy muy partidario de que los navegadores creen sus propias propiedades CSS, pero de alguna forma tienen que ir mostrándonos las novedades que se van implementando y las propuestas que podrían llegar a implementarse en algún momento.

Esto nos origina una cantidad de propiedades como las que nos podemos encontrar en Mozilla (-moz) o WebKit (-webkit). Ahora Microsoft anuncia que para la nueva versión de Internet Explorer 8 dispondremos de una nueva y que será una muestra de que están haciendo bien su trabajo.

-ms-propiedad

No son milisegundos, sinó que es el nuevo prefijo que los desarrolladores web tendremos que conocer para lidiar con el CSS de este navegador.

Como podemos ver, se han implementado muchas opciones y esto nos permite añadir más opciones a nuestros diseños gracias a estas propiedades CSS, el único problema es el resultado en nuestra hoja de estilos:

-moz-border-radius: 1em; // Mozilla
-ms-border-radius: 1em; // Internet Explorer 8
-webkit-border-radius: 1em; // WebKit y Safari
border-radius: 1em; // Para cuando se cumplan los estandares.

¿Un poco feo no?

Anotación

Quiero remarcar el gran trabajo que están haciendo con Internet Explorer 8, dejando a un lado el odio hacia Microsoft, hay que reconocer que esta versión será digna de competir en la guerra de los navegadores, sin duda va a ser muy interesante.

CSS3 está a la vuelta de la esquina, gracias a la implementación por parte de los navegadores, este estandar poco a poco va haciéndose más real y van apareciendo perlas como estas del equipo devOpera.

En el artículo, nos muestran como usar el pseudo-selector nth-child , un selector que nos permitirá crear tablas estilo zebra con una sola línea.

tr:nthchild(2n+1) {
  background-color: #99ff99;
}

Al selector le debemos indicar el número de líneas a los que ha de aplicar el estilo, en este caso, cada 2 líneas empezando en la posición 1 (comenzan en el 0).

Más información

• W3C Selectors
• QuirksMode

Es un selector del que no se ha hablado mucho y que realmente dará mucho juego en un futuro. Este selector, nos permite negar las busquedas que hasta ahora estabamos haciendo.

La mejor forma de comprender lo que :not() nos ofrece es mediante un ejemplo:

//CSS
/* Todos los elementos input */
input {
        border:1px red solid;
}

/* El elemento con id #phone */
input#phone {
	background-color:yellow;
}
/* Todos los elemento no #phone*/
input:not(#phone) {
	background-color:green;
}

/* Todos los elementos que no sean Submit */
input:not([type="submit"]) {
	font-size:3em;
}

// HTML
<form id="comments_form" action="" method="post">
	<fieldset>
		<p>
			<label for="name">Nombre: </label>
			<input name="nombre" value="" type="text" id="name" />
		</p>
		<p>
			<label for="surname">Apellido: </label>
			<input name="apellido" value="" type="text" id="surname" />
		</p>
		<p>
			<label for="phone">Teléfono: </label>
			<input name="telefono" value="" type="text" id="phone" />
		</p>
		<p>
			<input type="submit" value="Enviar" />
		</p>
		</fieldset>
</form>

Como podemos ver, nos ofrece otra posibilidad más con la que seleccionar nuestro elementos.

Una de las novedades que WebKit integra y que Mobile Safari tambien se aprovecha son las CSS Animations, una propuesta del equipo de desarrollo de webkit con el que podemos definir animaciones asociadas en nuestros ficheros CSS.

.divSlide {
        -webkit-animation-name: "slide-me-to-the-right";
        -webkit-animation-duration: 1s;
}
@-webkit-keyframes "slide-me-to-the-right" {
        from { left: 0px; }
        to { left: 100px; }
}

Este código es el que produce la mágia que podemos ver en este ejemplo de MyDailyPhoto (Requiere iPhone 2.0). En el podemos ver que mediante la integración de los eventos touch del iPhone/iTouch va cambiando las clases de los elementos a los que se les aplican los estilos.

Destripemos un poco más el código:

.CLASS {
        -webkit-animation-name: "ANIMATION_NAME";
        -webkit-animation-duration: 1s;
}

Por un lado definimos la animación con -webkit-animation-name, y la duración de la animación con -webkit-animation-duration. Una vez definida la animación debemos definir le cuerpo de la animación:

@-webkit-keyframes "ANIMATION_NAME" {
        from { left: 0px; }
        to { left: 100px; }
}

En este caso la animación animación modifica el left del elemento al que le hayamos específicado la class CLASS para desplazarlo 100px.

Gracias a las posibilidades que las CSS Animations nos ofrecen podemos hacer cosas como estas:

// Giramos a la izquierda
.flip-left {
    -webkit-animation-name: "flip-left";
    -webkit-backface-visibility: hidden;
}
@-webkit-keyframes flip-left {
    from { -webkit-transform: rotateY(180deg); }
    to { -webkit-transform:  rotateY(0deg); }
}

// Giramos a la derecha
.flip-right {
    -webkit-animation-name: "flip-right";
    -webkit-backface-visibility: hidden;
}
@-webkit-keyframes flip-right {
    from { -webkit-transform: rotateY(0deg); }
    to { -webkit-transform:  rotateY(180deg); }
}

// Hacemos aparecer el elemento
.show {
    -webkit-animation-name: "show";
    -webkit-animation-duration: 1s;
}
@-webkit-keyframes show {
    from { opacity:0; }
    to { opacity:1; }
}

Usando estas propiedades y un poco de PHP he montado una pequeña galería de imagenes (solo hay 3 fotos) a modo de prueba para que veais los chulo que puede quedar.

Más información

Desde Wayne Pan descubro una función JS con la que encontrar una animación fácilmente.

var findAnimation = function(name) {
      var ret_rule = null, sheets = document.styleSheets;
      for(var i = sheets.length - 1; i >= 0 ; i--) {
        var sheet = sheets[i];
          for(var j = sheet.cssRules.length - 1; j >= 0; j--) {
            var rule = sheet.cssRules[j];
              // 7 means the keyframe rule
              if(rule.type === 7 && rule.name == name) {
                ret_rule = rule;
                break;
              }
            }
      }
      return ret_rule;
    }
  findAnimation('shrink-n-grow-animation').findRule('50%').style.height = '25px';

Desde Ajaxian presentan Transformie, un plugin de jQuery que nos permite disfrutar de estas transformaciónes en IE, para ello hace uso de DXImageTransform.Microsoft.Matrix.

John Resig anuncia que en la proxima versión de Firefox 3, la 3.1. Dispondrá de la capacidad de usar el atributo de CSS3 border-image. Con él podremos especificar una imagen que hará de border al elemento al que se lo indiquemos.

border-image: url(border.png) 27 27 27 27 round round;

border-image: url(border.png) 27 27 27 27 stretch stretch;

Para los más impacientes, podemos hacer nuestras pruebas con la ultima nighty release disponible para descargar.