CSS condicional Opera

[rapuig]

Hola, tengo una web con un reset.css donde se declara entre otras cosas lo sigueinte:

Código:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  font-size:100%;
}

Me pasa que en opera la fuente queda muy grande y quiero bajarle el tamaño únicamente para este browser. Probé creando un nuevo estilo.css solo para opera declarando lo mismo que lo anterior pero bajandole el tamaño a un porcentaje menor, e incluyendo en el html el condicional:

Código:

<!--[if Opera]>
<link rel="stylesheet" href="opera-style.css" type="text/css" />
<![end if]-->

El tema es que no me esta funcionando, no se que estaré haciendo mal. También probé con la propiedad que se declara directamente en el css para Opera y no anduvo.

Sugerencias?

Gracias. :)

[furoya]

Sin ver el código, hay medio que adivinar. Pero en este caso el problema parece evidente : estás reseteando a font-size:100%;.

Revisá la configuración de los navegadores, y asegurate que tengan todos la misma medida default de fuente. Y la misma fuente de referencia.

Te recuerdo que la idea de usar el 100% es que el texto del documento se ajuste a las preferencias del ususario. Que son las que configura en su navegador.

[rapuig]

Hola, disculpen que no puse el código, no quise ser grosero y mandar no se cuántas lineas de código.

Según lo que me dices, es por eso que no me tomaba el estilo para Opera. Entonces, para un reset.css que es lo ideal en cuanto a la fuente? Es decir, que se vea grande ya esta más allá de mi alcance ya que no voy a ser yo quién les diga que tamaño de fuente utilizar. A menos que en el reset.css le asigne una medida absoluta, no? Cuál sería la ideal?

Gracias!

[emprear]

Iniciado por rapuig

Hola, tengo una web con un reset.css donde se declara entre otras cosas lo sigueinte:

Código:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  font-size:100%;
}

Me pasa que en opera la fuente queda muy grande y quiero bajarle el tamaño únicamente para este browser. Probé creando un nuevo estilo.css solo para opera declarando lo mismo que lo anterior pero bajandole el tamaño a un porcentaje menor, e incluyendo en el html el condicional:

Código:

<!--[if Opera]>
<link rel="stylesheet" href="opera-style.css" type="text/css" />
<![end if]-->

El tema es que no me esta funcionando, no se que estaré haciendo mal. También probé con la propiedad que se declara directamente en el css para Opera y no anduvo.

Sugerencias?

Gracias. :)

Más estudio y menos creatividad, esto

<!--[if Opera]>

Es un invento que no te va a funcionar, ese tipo de condicionales en base a la sintáxis de los comentarios html, fue creada por microsoft para funcionar en solo en IE.
Para crear condicionales para otros navegadores necesitas de javascript ó php

[rapuig]

Gracias lo saque de un hilo especial sobre eso en este foro. Saludos.

[furoya]

Sí, yo lo iba a comentar también, pero por las dudas me puse a probarlo antes, porque en una de esas ahora Opera lo aceptaba.
Me gustaría ver ese hilo...

Iniciado por rapuig

Hola, disculpen que no puse el código, no quise ser grosero y mandar no se cuántas lineas de código.

Según lo que me dices, es por eso que no me tomaba el estilo para Opera. Entonces, para un reset.css que es lo ideal en cuanto a la fuente? Es decir, que se vea grande ya esta más allá de mi alcance ya que no voy a ser yo quién les diga que tamaño de fuente utilizar. A menos que en el reset.css le asigne una medida absoluta, no? Cuál sería la ideal?

Es que no hay un "reset ideal para fuentes".
De hecho, ni siquiera debería haber reset. Si aparece alguna diferencia por defaults de navegadores, se corrigen para el caso, y se terminó el problema. Eso de poner "archivos mágicos" sin entender lo que meten en la página, no sirve.

Ese font-size: 100% es en realidad un default, así que ni haría falta. Si vas a usar medidas absolutas en tu documento, lo van a ignorar y muestran las que declarés.

Si vas a usar relativas, entonces sí la van a tomar de referencia, y va a ser la que tenga configurada el navegador. Cuando lo vi en tu reset.css, te hice el comentario porque di por hecho que usabas relativas. Y de alguna manera ese archivo debe (o supongo que debe) pisar otras declaraciones anteriores. Para no tener que adivinar es que exigimos un código completo de ejemplo.
No el código completo de tu página. Con unas pocas líneas para armar un documento básico nos podés mostrar el problema, y nosotros lo vemos en los distintos browsers.

De última, cambiá ese valor a uno en pixeles que muestre bien toda tu página, y pisale el que tenga configurado el navegador. Qué le vas a hacer...

[Jodorem]

Amigo, para que no tengas problemas de compatibilidad con ningun explorador, coloca esto antes del tag <html>

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

Para un reset, yo siempre uso algo como esto:

Código CSS:

html, body, span, applet, object, iframe,
blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption, tbody, tfoot, thead {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
}
/* remember to define focus styles! */
:focus {
        outline: 0;
}
body {
        line-height: 1;
        color: black;
        background-color:#FFFFFF;
        background-repeat: repeat-x;
        z-index: 1;
}
ol, ul {
        list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: separate;
        border-spacing: 0;
        
}
caption {
        text-align: left;
        font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: "";
}
blockquote, q {
        quotes: "" "";
}
 

Con estos códigos jámas he tenido problemas triviales entre los navegadores como en tu caso que resulta ser muy molesto...

[furoya]

En ese último reseteador, le tengo un poco de desconfianza a

Código:

...
line-height: 1;
...
background-repeat: repeat-x;
...

aunque lo del interlineado lo tendría que confirmar.

Ah!, y sigue teniendo un font-size: 100%;.

[Jodorem]

Furoya,

Tienes razon lo del line-height y background-repeat, hay ocaciones en que las elimino XD pero del resto funciona de maravilla... sobre todo colocando antes del tag <html>

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

Esta línea es crítica si quieres una muy buena compatibilidad entre los navegadores.

Lo del font-size:100% creo que en algunos navegadores lo tienen por defecto como 100% y otros no... no lo he comprobado pero por seguridad es mejor ponerlo.

[rapuig]

Gracias chicos!

Acá les dejo el hilo de dónde saqué lo de los condicionales para Opera: http://www.forosdelweb.com/f53/lista...es-css-636689/

Saludos!

[emprear]

Iniciado por rapuig

Gracias chicos!

Acá les dejo el hilo de dónde saqué lo de los condicionales para Opera: http://www.forosdelweb.com/f53/lista...es-css-636689/

Saludos!

Pero no tien gracia leer solo el primer mensaje, hay que leer el post completo
http://www.forosdelweb.com/f53/lista...9/#post2747621

SAludos

[furoya]

Creo que se entiende perfectamente por qué cuando vienen a postear cualquier cosa, después tenemos que andar completando el tema con correcciones y aclaraciones.
Allí Mikmoro, daPhyre, kseso?, zerokilled, fueron demasiado sutiles. Yo le hubiera pateado el traste con botín de puntera de acero.

El problema de los foros es que no postea el que sabe sino que publica cualquiera. Siempre hay que mirar muy bien de quién viene el aserto.
Pero traten de darnos un poco menos de trabajo. No sólo porque nos obligan a desmentir ocupando tiempo que serviría para mejores aportes, sino porque ya esta demostrado que una vez que largan una burrada, ésta se propaga aún cuando la bajemos a bazucazos en el mismo tema.
Lo ideal es que nunca aparezcan. Y punto.

if else en CSS


Estuve mirando lo del interlineado, y sí, no está mal, pero tampoco está bien.
Lo puede confirmar cualquiera mirando las especificaciones, pero ya que pasé por aquí, aprovecho y lo resumo : se supone que la altura de los renglones debería ser un 20% más alta que la de su fuente (va en gustos y necesidades, pero en principio se asume que es así); y resulta que line-height no calcula a partir de una medida de la configuración, sino desde la font-size de su propia fuente.
Ese número lo que hace es multiplicar la altura especificada en el caracter, así que en realidad debería ser 1.2 , para que la altura del renglón sea de un 120%. Al multiplicarlo por 1 nos queda de la misma altura, y las mayúsculas se pegan demasiado entre sí.
Pero -repito- va en gustos.

[Tedel]

¿Te doy un consejo? Olvida la existencia de los reset.css. Son una mala práctica en el diseño web.

(Incluso si 847 webmasters aquí opinan lo contrario)

[emprear]

Iniciado por Tedel

¿Te doy un consejo? Olvida la existencia de los reset.css. Son una mala práctica en el diseño web.

(Incluso si 847 webmasters aquí opinan lo contrario)

Discrepo @Tedel, creo que esa sentencia es una generalización que no se aplica, así como muchas otras técnicas que utilizamos en la maquetación, hay que usar la apropiada y en el escenario apropiado.

un sencillo

Código CSS:

html, body, div{
padding: 0;
margin: 0;
}
 

sigue siendo, técnicamente, un reset, y su uso en muchos casos, necesario.
Por supuesto que desapruebo el uso indicriminado de "resets" que andan dando vueltas por la web, y se presentan como soluciones "mágicas"

Saludos

[rapuig]

Gracias por el consejo! Saludos. :)