Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Reset CSS: line-height, vertical-align y outline en el foro de CSS en Foros del Web. 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: ...
  #1 (permalink)  
Antiguo 26/02/2010, 16:21
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Pregunta Reset CSS: line-height, vertical-align y outline

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!
  #2 (permalink)  
Antiguo 28/02/2010, 23:33
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Reset CSS: line-height, vertical-align y outline

Veo que tu tema pasó algo inadvertido... Desafortunadamente yo tampoco conozco respuesta a lo que buscas :S
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #3 (permalink)  
Antiguo 01/03/2010, 00:16
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Reset CSS: line-height, vertical-align y outline

Gracias por rescatarlo del olvido jeje. ahora a lo mejor nos ayudan a ambos. saludos!
  #4 (permalink)  
Antiguo 01/03/2010, 07:59
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Reset CSS: line-height, vertical-align y outline

bueno...
Código CSS:
Ver original
  1. 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:
Ver original
  1. 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:
Ver original
  1. 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:
Ver original
  1. *{
  2.     float:none;
  3.     height:auto;
  4.     margin:0;
  5.     padding:0;
  6.     position:static;
  7.     vertical-align:baseline;
  8.     width:auto;
  9.     zoom:1;
  10. }
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...
  #5 (permalink)  
Antiguo 01/03/2010, 15:25
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Reset CSS: line-height, vertical-align y outline

Excelente explicación alex, se necesitaba tu presencia en el hilo!!
Cita:
Iniciado por alexk Ver Mensaje
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.

Última edición por cristian_cena; 01/03/2010 a las 15:56
  #6 (permalink)  
Antiguo 01/03/2010, 17:08
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Reset CSS: line-height, vertical-align y outline

Cita:
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.

Etiquetas: reset
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:50.