CSS (10)


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;
}



HTML5: Editar el css de Placeholder

Hace poco fui a una conferéncia sobre HTML5 en la que se explicaban los cambios, las novedades y la actitud de los pesos pesados en estos temas. La parte que me pareció más interesante fue la de formularios.

Una de las cosas que explicaron fué el uso de placeholder, un atributo para los campos de texto que lo que hace es mostrar un texto cuando el input no tiene valor, pero ese texto no representa ningún valor y es sólo para ayudar al usuario. Por si no me explico, una captura:




Quitar el borde de los input con foco en Safari y Chrome

Cuando se utiliza por primera vez un navegador como Chrome o Safari, estoy seguro de que una de las cosas que más se notan es el resplandor / borde. La primera impresión es que ayuda a la accesibilidad, que es un efecto lógico y muchas veces necesario, y que a mucha gente con poca experiéncia le hará un favor.
Pero si tu eres quien maqueta la página y optas por aplicar un efecto propio con css, al mezclarse con el propio del navegador puede que parezca algo extraño y quede mal, pero ese efecto se puede evitar con el atributo outline de CSS.

 

focos

 

Igual que se hacía para evitar el punteado de los enlaces que se implementó en nosecual versión de Firefox (3.1 creo).

#signup .text:focus{
	outline:0px;
}