Contenido

Usa media queries para ocultar CSS3 a navegadores antiguos

27 jun

+ 18

Siempre tendemos a condicionar nuestro CSS pensando en los navegadores antiguos, haciendo uso de los condicionales o hacks para complementar las excepciones que navegadores como IE6,7 requieren para funcionar “correctamente”, pero … ¿y si añadieramos como excepciones las funcionalidades más modernas?

Desde 456 Berea St., recomienda usar las media queries de CSS3 para unir el CSS más moderno y solo será visible para los navegadores que las soporten, de esta forma estamos cambiando el chip y optimizar el uso de los CSS’s en los navegadores de los usuarios.

Típico CSS


.block {
	width: 100%;
	position: fixed;
       -moz-border-radius:1em; // IE no lo detecta
       -webkit-border-radius:1em; // ...
      // ...
}

Imaginemos que entramos con IE y cargamos este CSS, si seguimos el proceso de ejecución CSS secuencial deberemos evaluar cada una de las líneas aunque no las tengamos soportadas. Esto, en grandes aplicaciones con miles de líneas de CSS en navegadores antiguos pueden provocar lentitud (doy fé de ello).

Para solventar el problema y unificar el código “moderno” deberíamos cambiar el chip y unificarlo de la siguiente forma.

Usando media queries


@media only screen {
	.block {
		-moz-border-radius:1em; // IE no lo detecta
		-webkit-border-radius:1em; // ...
		// ...
	}
}

.block {
	width: 100%;
	position: fixed;
}

De esta forma, IE no reconoce la palabra “only” del @media y omite el resto del código incluido en su interior. De esta forma únicamente realizamos una sola comprobación que omitirá o no dependiendo de las capacidades del navegador.

Variables CSS, ¿como está el tema?

18 jun

+ 1

Hace ya 4 años que se vienen hablando de la inclusión de variables en nuestros CSS, pero el tema parece que está bastante parado. Al parecer la W3C en abril publicó un borrador en el que introducia una propuesta de como deberían funcionar las estas variables en nuestros CSS’s.


// Definición
:root {
  var-my-color: #fad;
}

// Uso
.thing {
  color: var(my-color);
}

Desde WebKit hace ya tiempo que podemos usarlas usando el prefijo (-webkit-).


// Definición
:root {
  -webkit-var-my-color: #fad;
}

// Uso
.thing {
  color: -webkit-var(my-color);
}

Este mes de Junio, la W3C se marca un nuevo borrador en el que prescinde de la función var() cambiándola por $ para llamar a nuestra variable.


// Definición
:root {
  var-my-color: #fad;
}

// Uso
.thing {
  color: $my-color;
}

Vamos, que la capacidad de que nuestros CSS’s dispongan de variables está más o menos igual que siempre y no parece que se vaya a solventar en un futuro cercano, por el momento deberemos seguir usando herramientas como LESS.js o SASS para disponer de esta capacidad y alguna más.

Via

HTML5Rubik, programando un cubo de Rubic

30 may

+ 3

Utilizando las nuevas tecnologías, CSS3 y Javascript (YUI), nos muestran un tutorial muy didáctico sobre como implementar un cubo de Rubic, con el que puedes jugar, con HTML5.

rubick
(Ver Imagen)

El resultado es muy interesante, y puedes verlo funcionar correctamente en Google Chrome, y si quieres verle las tripas, tienes el código en GitHub para destriparlo.

Me encantan estos ejemplos que nos muestran la cantidad de cosas que se pueden hacer con imaginación y los nuevos estándares.

Via

CoverScroll, disfruta de CoverFlow con este plugin para jQuery

30 may

+ 0

CoverScroll es un plugin jQuery que nos permite emular el sistema Cover Flow de Apple para elementos de nuestras páginas. [Descargar][Demo]

onMediaQuery, ejecuta javascript al cambiar las media query

29 may

+ 2

Ayer vimos Harvey, un plugin jQuery que nos permitía controlar cuando se ejecutaban en nuestros CSS’s los cambios sobre las Media Queries dependiendo de los cambios sobre el navegador que accede a nuestras páginas web.

Ahora os traigo onMediaQuery, una implementación en javascript para que no dependas de jQuery para poder disfrutar de esta funcionalidad.

En solo 1kb de Javascript dispones de la capacidad de ejecutar eventos al accionarse una query previamente definida en nuestros CSS’s.
Veamos un ejemplo de su uso:

CSS


<style>
	body:after {
		content: 'mobile';
		display: none;
	}
	@media screen and (min-width: 35em) {
		body:after {
			content: 'skinny'
		}
	}

	@media screen and (min-width: 56em) {
		body:after {
			content: 'wide-screen'
		}
	}

</style>

En nuestro CSS deberemos indicar que cada una de las queries va a tener un nombre único que usaremos desde nuestro javascript para controlarlos por separado.

JS


<script type="text/javascript" src="js/onmediaquery.min.js"></script>
<script>
var queries = [
    {
        context: 'mobile',
        callback: function() {
            console.log('Mobile callback.');
            // Lógica que se ejecutará cuando se detecte un móvil
        }
    },
    {
        context: 'skinny',
        callback: function() {
            console.log('skinny callback! ');
            //Lógica específica para tablets
        }
    },
    {
        context: 'wide-screen',
        callback: function() {
            console.log('wide-screen callback .');
            // Pantallas panorámicas
        }
    }
];
// Go!
MQ.init(queries);


// Añadimos una query
var my_query = MQ.addQuery({
    context: 'skinny', 
    callback: function() { 
        console.log( 'second skinny callback!' )
    }
});

// Borrar queries
MQ.removeQuery( my_query );
</script>

Y ya en Javascript, informamos la funcionalidad correspondiente para cada una de las media queries que disponemos.

Harvey, domina las CSS media queries con javascript

28 may

+ 2

Condicionar el CSS de tu aplicación dependiendo del dispositivo o del tamaño de la pantalla del mismo, es mucho más fácil desde que existen las CSS’s media queries. Estas condiciones del CSS nos permiten especificar condiciones necesarias para ejecutar cierto CSS directamente en nuestro código.

Harvey nos intenta hacer más fácil aún la tarea de gestionar estas condiciones y permitirnos trabajar con ellas permitiéndonos añadir funcionalidades cuando estas cambian en función de las redimensiones o cambios de posición de nuestros dispositivos.


Harvey.attach('screen and (min-width:600px) and (max-width:900px)', {
  setup: setup_function, // se llama cuando inicialmente se cumple la condición.
  on: on_function, // Se llama cuando la condición se activa.
  off: off_function // Se ejecuta cuando se desactiva.
}); 

Añadime una capa más de control para condicionar al milímetro el estilo de nuestras páginas.
[Descargar]

SASS vs LESS, ¿cual es mejor?

18 may

+ 2

Hace unos días hablamos de SASS y de LESS, metalenguajes CSS que permiten añadir capacidades programáticas a un lenguaje de marcado, pero ¿cual es mejor? Los chicos de css-tricks se han hecho esta misma pregunta y aunque os anticipo que el ganador ha sido SASS, lo han detallado perfectamente. Os recomiendo que le echéis un vistazo si os interesa el tema.

LESS, CSS enriquecido en el cliente

15 may

+ 6

Hace unos días vimos SASS, una herramienta pensada para agilizar la maquetación CSS de nuestros proyectos. Vimos que ofrecía una serie de herramientas que nos permitía trabajar con una versión enriquecida de CSS con variables, funciones, anidamiento de selectores,…

LESS

Pues LESS, nos ofrece más de lo mismo, usando una sintaxis similar a que vimos con SASS, y nos ofrece las mismas maravillas que ya hemos visto.

Variables

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

Mixins

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Anidamiento de selectores

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Funciones y operaciones

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

Como podemos ver, nuestros CSS’s cogen una aspecto de lenguaje de programación que permite dinamizarlas fácilmente.

Compilación en el cliente

A diferencia de SASS, LESS permite compilar las hojas de estilos dinámicas (.less) directamente en el navegador mediante una librería JS que cargaremos en nuestras páginas (para Chrome, Safari y Firefox).

<head>
	<link rel="stylesheet/less" type="text/css" href="styles.less">
	<script src="less.js" type="text/javascript"></script>
</head>

Es importante poner las hojas de estilos antes de añadir la librería javascript e indicar que mediante el atributo rel que el tipo de stylesheet del que se trata es uno de los que se han de compilar.

Además, nos añade la capacidad de refrescar los estilos mediante el Watch Mode, que podremos activarlo mediante un parámetro en la URL a la que accedemos (#!watch) o desde la consola de Firebug ejecutando less.watch().

cssSandpaper, unifica transformaciones CSS3 en todos los navegadores

15 may

+ 0

cssSandpaper es otra librería javascript que pretende hacernos la vida más fácil haciendo que dispongamos de transformaciones CSS3 en nuestros navegadores de forma estandarizada, omitiendo las versiones personalizadas de cada navegador e incluso dotando a Internet Explorer de ellas.

Pie Menu, añade un menú circular a tu página con jQuery y CSS3

14 may

+ 2

Pie Menu, es un plugin jQuery que se aprovecha de las animaciones CSS3 para generar curioso menu circular desplegable.

piemenucss3
(Ver Imagen)

Además usarlo es muy sencillo, ya que solo tendremos que definir un listado de opciones e indicar que el elemento contenedor debe comportarse como un Pie Menu.


  <div id='outer_container' class="outer_container" >
        <a class="menu_button" href="#" title="Toggle"><span>Menu Toggle</span></a>
        <ul class="menu_option">
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
        </ul>
    </div>

Una vez definidas las opciones del menu, activamos el menú:


$('#outer_container').PieMenu({
	'starting_angel':0(Starting Angle in degree),
	'angel_difference' : 90(Displacement angle in degree),
	'radius':100 (circle radius in px),
}); 

Siempre que veo menus de estos, me recuerdan a aquellos del juego Secret of Mana de la Super NES:D