Re: [Ovillo] A vueltas con los em´s
Un solución para no utilizar hoja condicional es utilizar en el body
{font-size: x-small}... lo que te asegura que el tamaño base será más o
menos el mismo en todos los navegadores
Jeffrey Zeldman dixit ;-)
- Original Message -
From: Maikel Naigt [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Monday, September 15, 2008 1:00 PM
Subject: Re: [Ovillo] A vueltas con los em´s
Hola Rafa.
2008/9/11 Rafa Artacho [EMAIL PROTECTED]:
Buenos días:
Se esta modificando la hoja de estilos del site de mi empresa, y uno de
los
temas es pasar los tamaños de las fuentes de unidades absolutas (px) a
unidades relativas (em's).
He leído varios artículos en uno se recomienda usar un font-size para el
body del 62.5% para tomar como base 10px = 1em.
...
Por otra parte, el asignar un tamaño en % en el font-size del body ¿a qué
motivos responde? Las pruebas que estamos haciendo sin asignar en el body
ningún font-size por defecto son satisfactorias, y en todo caso si se
desea
cambiar en algún momento la proporción de los em's del resto de elementos
bastaría con asignar en ese momento un font-size en % al body, ¿es así?
La recomendación de usar un tamaño para la fuente del 62.5% en el
body (atención, NO en Mac) es por la presunta facilidad que nos da
después en la maquetación de nuestra página, ya que, al ser el tamaño
de fuente del navegador por defecto, -en sistemas Windows- de 16px, al
hacer la operación 16x0,625 nos arroja una valor para la fuente base
de 10px. Veamos por qué esa facilidad:
· El tamaño de fuente definido en el body es el tamaño base para todos
los elementos hijos y se corresponde a 1em.
· Todos los elementos cuyo tamaño (width o height) se exprese en 'em'
serán susceptibles de ser escalados cuando el usuario, en su
navegador, aumente o disminuya el tamaño de letra.
· También es probable que deseemos un cambio de tamaño de letra exacto
en algún elemento interno, por ejemplo una cabecera a 18px, pero
expresado en em (para que sea escalable por el usuario). Si nuestra
correspondencia base es 16px=1em entonces tendríamos que 18px=1,125em;
es decir, tendríamos que tirar de calculadora cada vez que queramos un
tamaño distinto de 16px. En el caso de que nuestra correspondencia
base sea 10px=1em lo tenemos más sencillo, ya que 18px=1,8em.
De esta manera conseguimos que definir el ancho o alto de un
contenedor o imagen de manera exacta en píxeles (y de definir
distintos tamaños de fuente para distintos elementos), y _que sea
escalable_, es una tarea trivial, al ser 1em=10px. Es decir, podremos
realizar diseños líquidos con medidas más exactas con respecto a la
maqueta original que nuestro diseñador nos haya fabricado en
Photoshop/Fireworks/GIMP (etc.).
Un par de peros:
· Como hemos apuntado, el tamaño por defecto en los navegadores para
Windows (y FF de Linux) es de 16px, pero no es así para Macintosh ni
para Konqueror de Linux (si no recuerdo mal su tamaño base por defecto
es 12px).
· Tampoco sabemos si el usuario ha cambiado el tamaño por defecto de la
fuente.
...y si esto es así, ¿por qué no definir directamente en el body un
tamaño de letra de 10px en vez del porcentaje y nos quitamos de
problemas? Pues porque IE lo entendería como una medida absoluta para
todos los elementos de la página web y no permitiría que el usuario
pudiera variar su tamaño mediante el navegador.
Así que la solución pasa por definir dentro del body un tamaño base
para las fuentes de 10px para todos los navegadores menos para IE, al
que le tendremos que dar media solución con el tamaño de fuente al
62.5%. Esto se puede lograr mediante los comentarios condicionales de
IE, asignándolo en una hoja de estilos particular suya, o mediante un
hack que valide (como por ejemplo el star hack)
Gracias
Espero no haberte liado más con la explicación.
Un saludo,
David Merino Ogando
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] A vueltas con los em´s
Buenos días: Se esta modificando la hoja de estilos del site de mi empresa, y uno de los temas es pasar los tamaños de las fuentes de unidades absolutas (px) a unidades relativas (em's). He leído varios artículos en uno se recomienda usar un font-size para el body del 62.5% para tomar como base 10px = 1em. http://www.clagnut.com/blog/348/ En el otro método se aboga por utilizar un font-size para el body de 76% para lograr que en IE, con un tamaño de texto Muy pequeño, definido por el usuario, se vea el texto de modo aceptable. La verdad es que he hecho la prueba en IE7 y yo lo veo bien con 62.5%... http://www.thenoodleincident.com/tutorials/box_lesson/font/ http://www.thenoodleincident.com/tutorials/typography/index.html ¿Cuál me recomendais y por qué? Por otra parte, el asignar un tamaño en % en el font-size del body ¿a qué motivos responde? Las pruebas que estamos haciendo sin asignar en el body ningún font-size por defecto son satisfactorias, y en todo caso si se desea cambiar en algún momento la proporción de los em's del resto de elementos bastaría con asignar en ese momento un font-size en % al body, ¿es así? Gracias ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] A vueltas con los em´s
Yo uso de base 76%, que es igual a 12px y tiene una mayor consistencia cross-browser que el 62.5%. 2008/9/11 Victoria Gracia [EMAIL PROTECTED] Hola Rafa, el tema de las medidas y correspondencias entre ems y pixeles se ha debatido ya en la lista con anterioridad. Las unidades relativas (% y em) no pueden darte una medida absoluta en pixeles sino que te la dan relativa a las medidas por defecto establecidas en los navegadores. Si un usuario tiene definidos 16px como medida base, esa es la cantidad de pixeles de 1em, pero si tiene definidos 36 entonces para él 1em = 36px (si ha hecho eso seguramente es porque tiene problemas de visión y detesta las páginas con letra pequeña, por lo que deberíamos respetarlo). Con el porcentaje pasa lo mismo, es relativo a las preferencias en el navegador (y por supuesto cada navegador y plataforma OS trae unas distintas por defecto). Yo actualmente utilizo el 100% o 1em como base. ¿Porqué? pues porque los que pasamos de los 40 agradecemos que las pantallas nos muestren más grande lo que en ellas cabe y no que nos muestren más cosas en pequeño, pero es un gusto personal (aunque a mis clientes parece gustarles también, porque lo primero que dicen todos es qué bien se ve!, jejeje) Si quieres más información sobre ems y % puedes revisar los archivos de la lista. Un saludo Victoria Rafa Artacho escribió: Buenos días: Se esta modificando la hoja de estilos del site de mi empresa, y uno de los temas es pasar los tamaños de las fuentes de unidades absolutas (px) a unidades relativas (em's). He leído varios artículos en uno se recomienda usar un font-size para el body del 62.5% para tomar como base 10px = 1em. http://www.clagnut.com/blog/348/ En el otro método se aboga por utilizar un font-size para el body de 76% para lograr que en IE, con un tamaño de texto Muy pequeño, definido por el usuario, se vea el texto de modo aceptable. La verdad es que he hecho la prueba en IE7 y yo lo veo bien con 62.5%... http://www.thenoodleincident.com/tutorials/box_lesson/font/ http://www.thenoodleincident.com/tutorials/typography/index.html ¿Cuál me recomendais y por qué? Por otra parte, el asignar un tamaño en % en el font-size del body ¿a qué motivos responde? Las pruebas que estamos haciendo sin asignar en el body ningún font-size por defecto son satisfactorias, y en todo caso si se desea cambiar en algún momento la proporción de los em's del resto de elementos bastaría con asignar en ese momento un font-size en % al body, ¿es así? Gracias ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo -- ↓ Ignacio Ricci www.ignacioricci.com ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] A vueltas con los em´s
Hola, On Thu, Sep 11, 2008 at 10:22:54AM -0300, Ignacio Ricci wrote: Yo uso de base 76%, que es igual a 12px y tiene una mayor consistencia cross-browser que el 62.5%. Al igual que Victoria, yo abogo por usar como base 1em. Los porcentajes no equivalen a ningún número de pixels, pero 1em corresponderá, siempre, al tamaño de letra que el usuario tenga establecido (por decisión propia, de la persona que le ha instalado y configurado su sistema, o del fabricante de su navegador, en eso no entro) en su navegador. Un saludo, Ángel ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] A vueltas con los em´s
-> Re: [Ovillo] A vueltas con los em´s ovillo -- Por tema -- -- Por fecha -- <!-- google_ad_client = "pub-7266757337600734"; google_alternate_ad_url = "http://www.mail-archive.com/blank.png"; google_ad_width = 160; google_ad_height = 600; google_ad_format = "160x600_as"; google_ad_channel = "8427791634"; google_color_border = "FF"; google_color_bg = "FF"; google_color_link = "006792"; google_color_url = "006792"; google_color_text = "000000"; //--> [Ovillo] A vueltas con los em´s Rafa Artacho Re: [Ovillo] A vueltas con los em´s Victoria Gracia Re: [Ovillo] A vueltas con los em´s Ignacio Ricci Re: [Ovillo] A vueltas con los em´s Angel Martin Alganza Re: [Ovillo] A vueltas con los em´s Maikel Naigt Re: [Ovillo] A vueltas con los em´s Juan Rebollo Responder a <!-- google_ad_client = "pub-7266757337600734"; google_alternate_ad_url = "http://www.mail-archive.com/blank.png"; google_ad_width = 160; google_ad_height = 600; google_ad_format = "160x600_as"; google_ad_channel = "8427791634"; google_color_border = "FFFFFF"; google_color_bg = "FF"; google_color_link = "006792"; google_color_url = "006792"; google_color_text = "000000"; //--> [Ovillo] A vueltas con los em´s Rafa Artacho Re: [Ovillo] A vueltas con los em´s Victoria Gracia Re: [Ovillo] A vueltas con los em´s Ignacio Ricci Re: [Ovillo] A vueltas con los em´s Angel Martin Alganza Re: [Ovillo] A vueltas con los em´s Maikel Naigt Re: [Ovillo] A vueltas con los em´s Juan Rebollo [Ovillo] ¿IE pasa de dar estilo a los elem entos creados dinámicamente? Rodrigo Álvarez Virgós Responder a <!-- google_ad_client = "pub-7266757337600734"; google_alternate_ad_url = "http://www.mail-archive.com/blank.png"; google_ad_width = 160; google_ad_height = 600; google_ad_format = "160x600_as"; google_ad_channel = "8427791634"; google_color_border = "FF"; google_color_bg = "FF"; google_color_link = "006792"; google_color_url = "006792"; google_color_text = "00"; //--> [Ovillo] A vueltas con los em´s Rafa Artacho Re: [Ovillo] A vueltas con los em´s Victoria Gracia Re: [Ovillo] A vueltas con los em´s Ignacio Ricci Re: [Ovillo] A vueltas con los em´s Angel Martin Alganza Re: [Ovillo] A vueltas con los em´s Maikel Naigt Re: [Ovillo] A vueltas con los em´s Juan Rebollo [Ovillo] ¿IE pasa de dar estilo a los elem entos creados dinámicamente? Rodrigo Álvarez Virgós Re: [Ovillo] ¿IE pasa de dar estilo a los elemen tos creados dinámicamente? Tei Responder a
