CSS (13)


Sticky footer con jQuery (2)

Hace más o menos un año publiqué la primera versión de este post. Hoy estaba reutilizando el código que publiqué y he encontrado algún que otro problema tanto de funcionalidad como de optimización, así que publico el código nuevo, que no tiene los problemas detectados y funciona mejor.




Bootstrap: Tamaño de columna entre -sm y -xs

No es la primera vez que me pasa. Maquetando un portal responsive con contenido modular he notado que necesitaba un tamaño intermedio entre el pequeño (sm – 768px) y el muy pequeño (xs – 480px).

La situación es esta: en XS normalmente el contenido se mostrará en una columna, pero SM es demasiado grande para mostrar sólo una, así que muestra 2. El problema es que el salto de SM a XS se hace a los 768px y es demasiado grande para empezar a mostrar una sóla columna.




HTML: Evitar selección de texto con CSS

Antes de nada, esto no sirve para Internet explorer. Y no me gustan esas páginas que vas a copiar un texto y no puedes, creo que esa actitud choca de forma directa con la filosofía intrínseca de la propia web; además de ser un par de puertas mal puestas en medio del campo ya que, si publicas un contenido sea en el formato que sea, se puede copiar y distribuir sin tu permiso, es mejor tenerlo asumido.

Por otro lado a veces por temas de interfaz y experiencia de usuario puede ser necesario, por ejemplo para botones usando la etiqueta A con , para eso existen estos atributos CSS. Un ejemplo de para qué puede ser util, se puede ver en la demo de mi plugin para jQuery: emm-select.

span.no_selection {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select:none;
}



Evitar rebote del scroll en Chrome y Safari para Lion

Lo encontré ayer. Hay que tener en cuenta que lo que hace es evitar el scroll en general, no el rebote. Es útil cuando tenemos aplicaciones de tamaño fijo (por ejemplo cuando se está compilando html para una aplicación de smartphone) o cuando la estructura del diseño se adapta al tamaño (como Gmail con el último rediseño).

El CSS:

body{
   overflow:hidden;
}

El Javascript (jQuery):

$(function(){
   $(document).bind('touchmove',function(e){
      e.preventDefault();
   });
});