Contenido

-prefix-free, dí adios a los prefijos CSS

11 may

+ 5

Ayer vimos la cantidad de líneas de código que debemos incluir en nuestros CSS’s para disponer de ciertas funcionalidades en los diferentes navegadores, no es algo nuevo, hace ya tiempo nos quejábamos de ello. Y parece que a medida que van saliendo más y más propuestas por parte de los diferentes navegadores estos prefijos se están haciendo más y más populares.

El problema, radica en que dentro de X años esos prefijos dejarán de ser necesarios por que por lo general adoptan una nomenclatura estándar, lo que nos obligará a recorrer todos nuestros CSS’s para adaptarlos a los atributos del momento.

Para solventar prácticamente por completo ese problema aparece prefix-free, un librería Javascript que se encarga de gestionar estos prefijos por nosotros dejándonos a nosotros la nomenclatura estándar y él adaptándose al navegador que está visitando nuestra aplicación web.


// Nuestro CSS
border-radius: 1em; // Para cuando se cumplan los estandares.

// Resultado
-moz-border-radius: 1em; // Mozilla 
-ms-border-radius: 1em; // Internet Explorer 8 (No soportado) 
-webkit-border-radius: 1em; // WebKit y Safari 

Como podemos ver el cambio es significativo, y únicamente hemos de añadir un fichero JS a la carga de nuestra aplicación web.

<script src="js/prefixfree.min.js"></script>

Compatibilidad

Actualmente está disponible para los principales navegadores, IE9+ Opera 10+, Firefox 3.5+, Safari 4+ y Chrome para escritorio y Mobile Safari, Android browser, Chrome y Opera Mobile para móviles.

Problemas detectados.

En CristaLAB comentaban que nos funcionan en:

  • CSS’s cargados mediante @include.
  • ficheros CSS’s locales en Chrome y Opera.
  • Estilos inline
  • y CSS’s de diferentes dominios

Aún así, el trabajo que nos ahorramos a largo plazo es realmente interesante para tenerlo en cuenta.

jQuery transit, transformaciones y transiciones CSS3

10 may

+ 1

jQuery.Transit, es un plugin de jQuery (1.4+) que nos permite trabajar con las diferentes transiciones y transformaciones de CSS3 mediante una simple nomenclatura.

Para ello, dota al atributo css() de una serie de parámetros que nos permite extender los estilos básicos tratados con jQuery.


("#box").css({ x: '30px' });               // Move right
$("#box").css({ y: '60px' });               // Move down
$("#box").css({ translate: [60,30] });      // Move right and down
$("#box").css({ rotate: '30deg' });         // Rotate clockwise
$("#box").css({ scale: 2 });                // Scale up 2x (200%)
$("#box").css({ scale: [2, 1.5] });         // Scale horiz and vertical
$("#box").css({ skewX: '30deg' });          // Skew horizontally
$("#box").css({ skewY: '30deg' });          // Skew vertical
$("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation
$("#box").css({ rotateY: 30 });
$("#box").css({ rotate3d: [1, 1, 0, 45] });

// Valores relativos
$("#box").css({ rotate: '+=30' });          // 30 degrees more
$("#box").css({ rotate: '-=30' });          // 30 degrees less

// No importa usar unidades
$("#box").css({ x: '30px' });
$("#box").css({ x: 30 });

// Multivalores
$("#box").css({ translate: [60,30] });
$("#box").css({ translate: ['60px','30px'] });
$("#box").css({ translate: '60px,30px' });

Todos estos helpers implementados en css() usan la funcioón $.fn.transition() que es la encargada de gestionar las animaciones aplicadas a estos nuevos parámetros.


/*
   $('...').transition(options, [duration], [easing], [complete])
*/
$("#box").transition({ opacity: 0.1, scale: 0.3 });
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500);                         // duration
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast');                      // easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');                   // duration+easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..});             // callback
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..});  // everything

Funciona en: IE 10+, Firefox 4+, Safari 5+, Chrome 10+, Opera 11+, Mobile Safari

Un plugin de esos que te ayuda a hacer las cosas más faciles, de los que nunca viene mal conocer :D

Detectando inserciones DOM con Javascript y animaciones CSS

8 may

+ 3

Ayer, David Walsh nos mostraba una técnica para detectar elementos insertados en nuestro DOM mediante animaciones CSS. Para ello usaremos javascript, pero no el elemento “deprecated” DOMNodeInserted de la DOM Event Reference.

Veamos el código

<ul id="parentElement"></ul>
<style type="text/css">
/* Definimos las animaciones */

/* La estándar */
@keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}

/* La de Firefox ¬¬ */
@-moz-keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}

/* La de WebKit ¬¬! */
@-webkit-keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}

/* La de IE ¬¬!! */
@-ms-keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}

/* La de Opera ¬¬!!!*/
@-o-keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}

/*
Definimos las duraciones
para toooodos los navegadores
*/
#parentElement > li {
	animation-duration: 0.001s;
	-o-animation-duration: 0.001s;
	-ms-animation-duration: 0.001s;
	-moz-animation-duration: 0.001s;
	-webkit-animation-duration: 0.001s;

	animation-name: nodeInserted;
	-o-animation-name: nodeInserted;
	-ms-animation-name: nodeInserted;
	-moz-animation-name: nodeInserted;
	-webkit-animation-name: nodeInserted;
}

</style>
<script type="text/javascript">
	var insertListener = function(event){	
		// Detectamos el nombre de la animación lanzada
		if (event.animationName == "nodeInserted") {
			console.warn("Another node has been inserted! ", event, event.target);
			}
		}

// Asociamos los la anterior funcionalidad al evento "animationstart"
document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari
</script>

Como podemos ver en el código, la técnica usada pasa por definir las animaciones CSS (en todos y cada uno de los navegadores, bufff! ) a las que se les asigna un nombre, después, usando la gestión de eventos asociamos (otra vez para los diferentes navegadores ¬¬) la función insetListener() que se encargará de comprobar que al accionar el evento animationstart se esté accionando la animación previamente definida. A nivel académico, me parece realmente interesante, aunque quizás un poco laborioso para implementar en el día a día.

SASS, extiende tus CSS’s

7 may

+ 11

Cuando estás ante un proyecto medianamente grande, o repetitivo, nos encontramos con código que fácilmente se vuelve susceptible de convertirse en una maraña de líneas que en meses vas a ser incapaz de descifrar. Si además ese código, lo estás usando en otras páginas con pequeñas variaciones, nos encontramos que cualquier cambio provocará que tengas que perder más tiempo del estrictamente necesario, para solventar estas situaciones aparece SASS.

SASS  (Syntactically Awesome StyleSheets) es una herramienta externa a tu aplicación WEB que nos permitirá disfrutar de las CSS’s extendidas con las que siempre hemos soñado, añadiendo anidamiento de elementos, variables, extensión de selectores y muchas cosas más. Sin duda nos permite trabajar con las CSS’s a otro nivel.

/* Variables */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue; /* Usamos la variable */
  color:
    darken($blue, 9%); /* Usamos la variable */
}

.border {
  padding: $margin / 2; /* Usamos la variable */
  margin: $margin / 2; /* Usamos la variable */
  border-color: $blue; /* Usamos la variable */
}

¿Como funciona?

A simple vista podemos ver que el código CSS que estamos escribiendo no es para nada estándar y si lo pruebas en tu navegador hará caso omiso de él, por eso debemos hacerlo pasar previamente por SASS para que convierta dicho código en algo que el navegador pueda comprender.

sass style.scss:style.css

Con este pequeño comando, que ejecutaremos desde nuestra consola (o script destinado a poner nuestras aplicaciones en LIVE), obtendremos un código CSS estándar y listo para que se use en tu aplicación.

¿Que podemos hacer con SASS?

Lo conocí hace un año y algo y la verdad es que aparte del uso académico que le dí en su momento no he vuelto a hacer nada con él, pero bueno, tampoco estaba haciendo nada con nada :D

Entre las funcionalidades que nos ofrece hay que destacar las 4 más importantes (para mi):

  1. Variables (POR FIN!! :D)
  2. Anidamiento
  3. Funciones
  4. Herencia de selectores

Variables

El uso de variables, nos permite preparar el código para realizar cambios rápidos en caso de necesitarlo, y poder cambiar en un sitio un valor que usaremos en muchos lugares de nuestro código. Vamos, que nos permite convertir un lenguaje de marcado por uno de programación, esto a los más puristas no les gusta, pero a mi me encanta poder facilitarme el trabajo de dentro de unos meses :D

// Variable Definitions
$page-width:    800px;
$primary-color: #eeeeee;

body {
	width: $page-width;
	color: $primary-color;
}

Anidamiento

El anidamiento es algo más personal, a mi particularmente me gusta por que visualmente el fichero de trabajo nos permite ver el código de forma más cómoda y clara, además si quiero aplicar un estilo concreto para un submódulo dentro de un módulo, lo tengo más sencillo a la hora de buscar la línea dentro del código y así incluirlo.

body {
  font: {
    family: sans-serif;
    size: 30em;
    weight: bold;
  }
}
#contents {
  width: $page-width;
  #sidebar {
    float: right;
    width: $sidebar-width;
  }
  #main {
    width: $page-width - $sidebar-width;
    background: $primary-color;
    h2 { color: blue; }
  }
}

#footer {
  height: 200px;
}

Funciones

En la página oficial, los llaman mixins, pero vamos que son funciones de toda vida que defines previamente y cuando los necesitas los añades dentro de un selector, al igual que las variables las definimos previamente y las tenemos disponibles en todo nuestro código, la principal diferencia con la variables es que estas permiten recibir parámetros y así alterarse en función de ellos.

// Definimos table-base
@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

// Definimos left
@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px); // Cargamos left() con parámetro
  @include table-base; // Cargamos table-base
}

Herencia de selectores

El nombre de herencia de selectores, es mio, quizás no sea el más apropiado, pero me recuerda mucho a la jerarquia de plantillas de lenguajes como Django, pero en versión lite y CSS. Se basa en la capacidad de definir nuevas selectores CSS e indicar fácilmente que deben compartir los estilos CSS del selector que indicamos, vamos que creamos un selector “hijo” que nos indica quien es su “padre” al que se parece salvo algunas pecualiaridades.

// Definimos los estilos para .error
.error {
  border: 1px #f00;
  background: #fdd;
}

// Definimos los estilos de .badError
.badError {
  @extend .error; // Indicamos que use los estilos de .error
  border-width: 3px;
}

¿Como instalarlo?

SASS, está desarrollado en Ruby, por lo que necesitarás disponer de él en tu sistema, y mediante el sistema gem es tan sencillo como ejecutar el siguiente comando:

gem install sass

¿Como usarlo?

Para diferenciar los ficheros .css que usará nuestra versión final de los ficheros de código que usaremos para desarrollar nuestra aplicación web, se propone un estándar con la extensión .scss. De esta forma, dispondremos de una versión de desarrollo para nosotros completamente independiente de la que usaremos en nuestro entorno de producción, y ahí ya podremos comprimirlo y convertirlo en una maraña de letras ilegible :D

Mediante el comando sass de nuestro sistema convertiremos un fichero .scss a .css con la siguiente estructura:

sass --watch style.scss:style.css

Más Información

Si te apetece conocer más sobre esta herramienta te recomiendo que revises la siguiente información:

syze, añade @media queries avanzadas y cross browser con javascript

5 ene

+ 4

Syze, es una librería javascript cross-browser, cross-device y cross-library que nos permitirá disponer de una opción funcional para disfrutar de los @media queries de CSS3. Y todo ello en menos de 1KB.

Instalación

Añadimos la llamada al CDN (o descargamos el fichero JS y lo servimos desde nuestro servidor).

<script src="//rezitech.github.com/syze/syze.min.js"></script>

Y añadimos una línea Javascript que indicará las opciones de las que queremos disponer en nuestro CSS.

syze.sizes(320, 480, 768, 1024, 1920);

Esto nos permitirá trabajar con un sistema de clases que podremos condicionar, haciendo que se ajuste a cada dispositivo dependiendo de su tamaño y su orientación.

body { background: no-repeat center center; }
.is320  body { background-image: url(mobile-tall-128x128.png); }
.is480  body { background-image: url(mobile-wide-128x128.png); }
.is768  body { background-image: url(tablet-tall-256x256.png); }
.is1024 body { background-image: url(tablet-wide-256x256.png); }
.is1920 body { background-image: url(hdsize-wide-512x512.png); }

Podéis ver un ejemplo directamente desde aquí (redimensionar la página).

Propiedades CSS que afectan a la tipografía que usamos

16 feb

+ 5

A finales de Enero, la gente de Typekit publicó una serie de artículos muy interesantes sobre un estudio que habían realizado sobre lo que afecta a una tipografía hasta que llega al usuario en forma de página web. Como ya sabemos, intervienen muchos factores, el sistema operativo, los navegadores, los diseños de la fuente, los ficheros de las fuentes y en algunos casos las propiedades CSS.

  • font-size
  • color
  • -webkit-font-smoothing
  • rotation

Afectan directamente a la apariencia de la fuente al salir por pantalla, debido a que dicha fuente se ha rasterizar y convertir a un piñado de píxeles que el navegador despues ha de saber dibujar.

Como siempre, lo importante es conocer las limitaciones para poder lidiar con ellas.

Listado de propiedades CSS compatibles con todos los navegadores

2 nov

+ 5

Las propiedades CSS son los frágiles pilares sobre los que se sustentan todos los diseños web. Estos pilares son delgados y generalmente andamos poniendo parches para que el diseño soporte la llegada del inquilino de turno, ya sea el Sr. Firefox o la Srta. Google Chrome, o incluso el veterano Internet Explorer.

Debido a la exigencia de cada uno de los inquilinos, nos vemos obligados a aprender todos los trucos disponibles para hacer que su estancia en nuestra construcción sea lo más cómoda y agradable posible.

A estas alturas, sabemos que estas 10 propiedades CSS son completamente compatibles con todos ellos:

  1. color
  2. direction
  3. font-family
  4. font-size
  5. font-style
  6. font-weight
  7. list-style-position
  8. table-layout
  9. text-indent
  10. word-wrap

Por contra, todas estas hacen sacar lo mejor de nosotros para conseguir que soporten el peso de cada visita:

  1. background
  2. background-attachment
  3. background-color
  4. background-image
  5. background-repeat
  6. background-position
  7. border
  8. border-collapse
  9. border-color
  10. border-style
  11. border-width
  12. clear
  13. cursor
  14. display
  15. float
  16. font
  17. font-variant
  18. height
  19. left
  20. right
  21. bottom
  22. top
  23. letter-spacing
  24. line-height
  25. list-style
  26. list-style-image
  27. list-style-type
  28. margin
  29. overflow
  30. padding
  31. page-break-after
  32. page-break-before
  33. position
  34. text-align
  35. text-decoration
  36. text-transform
  37. vertical-align
  38. visibility
  39. white-space
  40. width
  41. word-spacing
  42. z-index

Esperemos que poco a poco vayamos viendo menguar esta lista para hacernos la vida más fácil.

Selectivizr, añade pseudo-clases y atributos CSS3 a IE6-8

6 sep

+ 8

:Select[ivizr] es una librería javascript que nos permite llevar las pseudo-clases y atributos de CSS3 a navegador que no los soportan como Internet Explorer.

Instalación

Pensado para funcionar con las principales librerías Javascript existentes, su uso es muy sencillo.


<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

Una alternativa interesante para los que no estén satisfechos con ie-css3.js.

Comprime CSS y Javascript con YUI Compressor directamente desde Textmate

26 ago

+ 0

Interesante Bundle para TextMate que nos permite comprimir nuestro código CSS y Javascript desde el mismo editor. Con una simple combinación de teclas reduciremos el peso de nuestros ficheros.

Carga Javascript/CSS con canvas en formato PNG

24 ago

+ 11

Como curiosidad me pareció muy interesante ayer la noticia de Nihilogic en la que nos mostraba la posibilidad de comprimir ficheros Javascript o CSS en una imagen PNG para luego cargarla mediante Canvas y así poder disponer del código comprimido anteriormente.

La idea, aunque interesante, no me parece factible para la vida real. Principalmente por que no me imagino depurando el código Javascript mirando un fichero PNG, pero para hacer pruebas es altamente atractivo.

jquery-1.2.3.min.js
(Ver Imagen)

(jQuery convertido a PNG :D)

La idea

Ya hemos visto otras formas de minimizar el tiempo de carga de nuestros ficheros Javascript o CSS, y esta no es muy diferente. Básicamente las dos se basan en evaluar el código de nuevo directamente en el navegador como texto, para ello se usa eval(), lo único que veremos cambiar será la forma de recoger el código.

var x = function(z, m, ix ) { // image, callback, chunk index
  var o = new Image();
  o.onload = function() {
    var s = "",
        c = d.createElement("canvas"),
        t = c.getContext("2d"),
        w = o.width,
        h = o.height;
    c.width = c.style.width = w;
    c.height = c.style.height = h;
    t.drawImage(o, 0, 0);
    var b = t.getImageData( 0, 0, w, h ).data;
    for(var i= 0; i <b.length; i += 4) {
      if( b[i]> 0 )
        s += String.fromCharCode(b[i]);
    }
    m(s, ix);
  }
  o.src = z;
}

Este código se encargará de leer mediante un elemento <canvas /> una imagen que le pasaremos como parámetro. Se encargará de cargar byte a byte para obtener el texto completo de nuestro javascript. Posteriormente lo evaluaremos y dispondremos del código disponible en nuestra página.

¿Como se crean esas PNG’s?

La creación de estas imágenes es bastante sencilla, simplemente tendremos que leer el texto que deseamos convertir a PNG y generaremos una imagen pixel a pixel con el valor de cada carácter.

def string2png( string, output )
  image = Magick::Image.new 1,string.length
  for i in 0 .. string.length
    color = '#%02X0000' % string[i]
    pixel = Magick::Pixel.from_color color
    image.pixel_color 0, i, pixel
  end
  image.compression = ZipCompression
  image.write("png8:"+ output)

  image = nil
end

En este código en Ruby vemos que después de leer el código lo recorremos letra a letra y vamos generando un pixel de un color diferente (dependiendo de la letra que estemos procesando). Ver el código completo.

¿Por que usar esto?

Personalmente no lo usaría para un uso real, pero la reducción de peso de ficheros en las pruebas realizadas con Javascript han sido bastante interesantes:
prototype-1.6.0.2.js
123 KB Javascript compressed to 30 KB PNG (24%)
jquery-1.2.3.min.js
53 KB Javascript compressed to 17 KB PNG (32%)
excanvas.js
24 KB Javascript compressed to 8 KB PNG (33%)
excanvas-compressed.js
10 KB Javascript compressed to 5 KB PNG (50%)
dijit.js
46 KB Javascript compressed to 16 KB PNG (35%)

Aunque son valores interesantes, las pruebas hechas con digit-all.js en la misma página de Nihilogic reflejan que para cargar los 70Kb comprimidos en PNG (255Kb sin comprimir) necesita cerca de 5-6 segundos en evaluarlo. Periodo que el navegador se queda prácticamente parado.
Por otro lado, navegador como IE6 no soportan el elemento canvas nativamente, lo que nos limita su uso prácticamente en la mayoría de sitios web.

Conclusiones

Como curiosidad está la mar de bien, incluso para demostrar lo que se puede hacer con ingenio y las herramientas que ofrece HTML5. Pero nada más, gZip ofrece una reducción interesante además lo incorporan la mayoría de navegadores.
Via