Reset CSS: line-height, vertical-align y outline

[cristian_cena]

Hola, resulta que ando creando mi reset y para ello he estado mirando varios reset clásicos.

En el de Eric Meyer’s pude notar lo siguiente:

Código:

body {line-height: 1; ...}

y en el reset universal básico pude ver que hacen uso de:

Código:

*{ vertical-align: baseline; outline: 0; ...}

Bien, ¿porque utilizan estas propiedades?

Ah, podrían orientarme sobre como trabajar con haslayout en un reset? es decir, identificar los elementos que no tienen layout y aplicarles layout.
Veo que la opción recomendada es height:1%; pero ¿esto me obliga luego a dar altura a todos los elementos html que incluya en mi sitio?

Desde ya muchas gracias. Saludos!

[daPhyre]

Veo que tu tema pasó algo inadvertido... Desafortunadamente yo tampoco conozco respuesta a lo que buscas :S

[cristian_cena]

Gracias por rescatarlo del olvido jeje. ahora a lo mejor nos ayudan a ambos. saludos!

[alexk]

bueno...

Código CSS:

body {line-height: 1;}
 

es el espacio entre linea y linea en este caso 1em, por defecto cada navegador tiene 1.2, 1.4, 1.6... varia mucho y al establecerlo en el "reset" pues deja parejo a todos....

Código CSS:

vertical-align: baseline;
 

es el valor por defecto de todo navegador para el alineamiento (asi se dice? da igual jeje) a los elementos en linea.... es como poner position:static; al reset.... esta de mas? si... pero en algunas ocaciones no, para el alineamiento (de nuevo mi palabra jeje) de texto cuando tenemos una imagen junto, o en formulario el fck label, etc.

Código CSS:

outline: 0;
 

es el bordesito que deja en FF y otros navegadores cuando tienen el foco (:focus), normalmente a cualquier enlace o <input> y aveces es un poco desagradable que se vea esta "decoracion" aun que no es necesario ponerlo en el reset universal ya que un <p> no le veo mucho caso o a un <span>, etc...

ahora haslayout en un reset? wow es muy atrevido asegurar algo pero bueno... no creo que sea posible mas quelos viejos reset, y el resto los elementos bien flotados...
habia una manera que solia usar y era *{position:relative;} si me saco de mucho apuro, pero igual me metio en mucho aprieto, asi que pase de el, me respetaba mas las posiciones en ie, espacios, etc. pero luego se generaba un lio, pero bueno.
height:1% aplicarlo en el reset es peligroso ami parecer...
tienes otra propiedad que puso hace poco en HTML un sujeto la de zoom: pero no valida ya que es de MS, pero si "arregla" varios problemas de visualizasion. enfin un reset seria, poner todo elemento con valores por defecto.

Código CSS:

*{
    float:none;
    height:auto;
    margin:0;
    padding:0;
    position:static;
    vertical-align:baseline;
    width:auto;
    zoom:1;
}
 

height:1%; a div contenedores prefiero usar mi favorito overflow:hidden; jeje pero vamos mucho mas peligro para agregarlo al reset.... al igual que height:1%; debemos usarlo cuando se necesite y no en un reset, aun que claro que no hay linea de CSS magica para el crossbrowsing, la mejor tecnica es usar las propiedades y valores correctamente y con estandares no hay mas...

PD: esta interesante el hilo no lo vi jeje aver que pasa...

[cristian_cena]

Excelente explicación alex, se necesitaba tu presencia en el hilo!!

Iniciado por alexk

height:1%; a div contenedores prefiero usar mi favorito overflow:hidden;

Claro, veo que height:1%; es utilizado para limpiar los float (¿verdad?), tarea que se lleva a cabo incluyendo overflow:hidden; al elemento padre de los elementos flotados. Con lo que logramos que nuestro documento valide.

Respecto de vertical-align: baseline; dices que es lo mismo que aplicar position:static; ? ¿o es mejor aplicar las dos propiedades?

A cerca de haslayout, ¿es cierta la siguiente afirmación?: ciertos elementos html en IE no tienen layout y esto significa que su tamaño y posicion pasan a depender de su elemento padre y solo si asignamos layout al elemento carente de layout este pasa a tener posición y tamaño propio.

Leí aquí que para dar layout a los elementos que no tienen layout por defecto basta con incluir zoom:1;

Esto daría la pauta para crear un reset solo para ie al cual llamaríamos con su respectivo comentario condicional. Por ejemplo:

Código:

/*RESET para IE*/
/*damos layout a todos los elementos*/

 *{zoom:1;}

/*quitamos el añadido de layout a los elementos que incluyen layout por defecto*/

html, body, table, tr, th, td, img, hr, input, button, select, textarea, 
fieldset, legend, iframe, embed, object, applet, marquee {zoom:normal;}

/*ya que la propiedad zoom con valor normal no activa layout según este
artículo http://librosweb.es/css_avanzado/capitulo1/la_propiedad_haslayout_de_internet_explorer.html*/

Comparto este artículo, a ver que les parece.

Bueno, es cierto lo que dice alexk respecto de que no hay una línea mágica crossbrowsing. Pero si al menos podemos resetear basicamente a IE en todas sus versiones ya nos sacaremos gran peso de encima.

[alexk]

Respecto de vertical-align: baseline; dices que es lo mismo que aplicar position:static; ? ¿o es mejor aplicar las dos propiedades?

digo que es lo mismo aplicarlas... por que son propiedades por defecto, no es que hagan lo mismo, pero hay navegadores que hay que recordarselos y ya sabemos cuales son esos jeje...
y la informacion que citas pues si es "correcta"; ya que invalida el CSS...
almenos ami no me gusta usarla por esa razon... seria mi ultimo ultimo muy ultimo recurso.