emmgfx

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.

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

Centrar texto en vertical

Normalmente para tener un enlace con el texto centrado en vertical, uso un padding por arriba y por abajo, hasta que queda a la altura que necesito. Pero muchas veces he notado que aunque se vea bien en diferentes navegadores, en OS X se hace un pixel más alto. El pixel de diferéncia es por el clear type que utiliza OS X, que hace a la letra ocupar un pixel más de alto y hace que se puedan descuadrar algunas cosas.

La solución es fijar el alto de los enlaces en pixeles, darle padding a los laterales y centrar el texto verticalmente (sin paddings).

Y eso se hace con este CSS:

vertical-align:middle;
display:table-cell;

Por ejemplo:

#menu-horizontal ul li a{
	color:#FFFFFF;
	text-decoration:none;
	padding:0px 10px 0px 10px;
	border-right:1px solid #5f77af;
	border-left:1px solid #293c69;
	outline:none;
	height:36px;
	vertical-align:middle;
	display:table-cell;
}

EDITO: No es compatible con Internet Explorer 6.

inline-block cross-browser

En Foo Hack publicaron un recurso CSS que a veces utilizo y creo que estaría bien compartir, el problema es que no explican para qué sirve hacer lo que explican, y eso es lo que voy a hacer.

Hay tres valores principales para el atributo display de CSS; normal, block e inline-block.

• El primero no modifica el formato del contenedor al que se aplica, es decir, si es un div y se deja el display normal seguirá ocupando el 100% del ancho que disponga del contenedor padre.
• El segundo si lo modifica, puede usarse por ejemplo para enlaces, para hacer que el enlace ocupe un tamaño determinado y se pueda hacer click en toda la zona que ocupa visualmente, no sólo en el texto. Esto es quizá dificil de entender pero con un par de ejemplos es más fácil: los enlaces de la cabecera de Facebook a día de hoy podrían estar hechos con display:inline-block; por que el enlace ocupa un tamaño determinado y para pulsarlo no hace falta que el click se haga en el mismo texto del enlace. Si el display fuera normal, el enlace sólo serviría desde la zona de texto, si se hace click fuera no serviría de nada.
• display:block sirve para eso, pero puede que no siempre sea lo que se quiere hacer. El valor block posiciona los elementos uno encima del otro, y pocas veces se quiere hacer eso. Lo más normal es que se coloquen uno al lado del otro hasta que llegue al limite de ancho y entonces haga una fila nueva. Para eso se hizo el display:inline-block.

El problema es que en bastantes navegadores el valor inline-block simplemente no existe (en todos los nuevos funciona sin problemas) y ante la duda parece comportarse como un block. Pero hay una forma de que funcione bien en “todos” los navegadores (lo pongo entre comillas por que en Explorer 3, 4.01, 5.01 o 5.55 ni lo he probado). Sólo hay que utilizar estos valores y el hack * para algunos explorers.

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

Aunque yo soy de los que piensa que lo mejor es no dejar acceder a la aplicación a quienes no actualizan su navegador, entiendo que haya quien utiliza navegadores antiguos por razones extrañas; por eso siempre van bien este tipo de “hacks” que ensucian el código y frenan la mejora de la web.