Foros del Web » Diseño web » CSS »

if else en CSS

Estas en el tema de if else en CSS en el foro de CSS en Foros del Web. hola chicos! pues mirando tutoriales por internet encontre recursos para hacer IF Y ELSE en CSS. que seria asi: Código PHP: <!--[if  lte IE 6 ]>  Esto es para una version igual o inferior a internet explorer 6 ...
  #1 (permalink)  
Antiguo 02/03/2006, 06:55
 
Fecha de Ingreso: junio-2002
Mensajes: 321
Antigüedad: 12 años, 4 meses
Puntos: 3
if else en CSS

hola chicos!

pues mirando tutoriales por internet encontre recursos para hacer IF Y ELSE en CSS.

que seria asi:
Código PHP:
<!--[if lte IE 6]> 
Esto es para una version igual o inferior a internet explorer 6
<!--[else]>
esto es para los demas navegadores.
<![endif]--> 
dentro de estos contenidos (donde los textos explicativos) van las opciones, en mi caso CSS

Código PHP:
<!--[if lte IE 6]> 
<
style type="text/css">
#markUp {
filter:progid:dximagetransform.microsoft.alphaimageloadersrc='images/markup.png'sizingmethod='scale');
}
</
style>
<!--[else]> 
<
style type="text/css">
#markUp {
    
backgroundurl(images/markup.pngno-repeat left top;
}
<![endif]-->
</
style
esto es un ejemplo que estaba haciendo para usar png's transparentes en internet explorer
pero es un poco pesado hacer esto ya que cada vez que incluya un codigo y tenga variante en internet explorer, tengo que abrirlo por separados, y la verdad me gustaria tenerlos todo en una rama
como
Código PHP:
#markUp {
    
position:absolute;
    
visibility:visible;
    
left:0px;
    
top:10px;
    
width:90px;
    
height:128px;
    
z-index:1;
<!--[if 
lte IE 6]> 
<
style type="text/css">
#markUp {
filter:progid:dximagetransform.microsoft.alphaimageloadersrc='images/markup.png'sizingmethod='scale');
}
</
style>
<!--[else]> 
<
style type="text/css">
#markUp {
    
backgroundurl(images/markup.pngno-repeat left top;
}
<![endif]-->
algo parecido.

¿alguien sabria como?

gracias! ^^

  #2 (permalink)  
Antiguo 02/03/2006, 09:05
 
Fecha de Ingreso: febrero-2006
Mensajes: 114
Antigüedad: 8 años, 8 meses
Puntos: 0
Parece que me he pasado de copas , porque no he entendido nada de nada, si usas el behavior para pngs transparentes, funciona bien en IE y en Firefox, no tendrías por qué condicionar tu hoja de estilos.


Saludos!
  #3 (permalink)  
Antiguo 02/03/2006, 10:13
 
Fecha de Ingreso: junio-2002
Mensajes: 321
Antigüedad: 12 años, 4 meses
Puntos: 3
pues que pregunto claramente que si ha alguna manera para incluir dentro del CSS (del estilo que edito) cual va para cada navegador.
  #4 (permalink)  
Antiguo 04/03/2006, 12:26
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.594
Antigüedad: 12 años, 8 meses
Puntos: 934
Cita:
Iniciado por Nateskin
pues que pregunto claramente que si ha alguna manera para incluir dentro del CSS (del estilo que edito) cual va para cada navegador.
No, porque los comentarios condicionales son html, y por lo tanto no pueden ir en archivos css...

PD: los comentarios condicionales funcionan solo para IE... así que donde decis "esto es para los demas navegadores" deberías decir "esto es para los demas navegadores IE"
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #5 (permalink)  
Antiguo 04/03/2006, 19:16
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 10 años, 9 meses
Puntos: 13
Exacto, tal como te menciona Webosiris, el primer ejemplo que has puesto tiene equivocada su descripción:

Cita:
Iniciado por Nateskin
<!--[if lte IE 6]>
Esto es para una version igual o inferior a internet explorer 6
<!--[else]>
esto es para los demas navegadores.
<![endif]-->
En realidad lo correcto sería:

Código:
<!--[if lte IE 6]>  
Esto es para una version igual o inferior a internet explorer 6 
<!--[else]> 
esto es para una version SUPERIOR a internet explorer 6. 
<![endif]-->
__________________
El conocimiento es libre: Movimiento por la Devolución
  #6 (permalink)  
Antiguo 04/03/2006, 19:48
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.594
Antigüedad: 12 años, 8 meses
Puntos: 934
Cita:
Iniciado por frijolerou
una version SUPERIOR a internet explorer 6.
no vi el lte ...
  #7 (permalink)  
Antiguo 06/03/2006, 10:32
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.368
Antigüedad: 11 años, 11 meses
Puntos: 317
Hola todos :

Cada navegador ignora los CSS que no soporta, lo que es una forma de condicionar propiedades. Pero es más dificil si es por versiones de navegador.

No habría que olvidar que en teoría los "comentarios" son para escribir comentarios; aunque en la práctica son el método más popular para hackear validadores y pasar un código propietario sin que lo vean; y también para ejecutar código de manera seleciva, claro.

Para Internet Explorer podría ser

Código:
<!--[if IE]>
 COMENTARIO CONDICIONAL IE
<![endif]-->
para los otros

Código:
<![if !IE]>
 C. C. NO IE
<![endif]>
Me confundió un poco tu mención del behavior , man0l0, después entendí que era una sugerencia. Y es cierto, generalmente son javascripts y allí se puede discriminar otras versiones y otros navegadores (previendo que algún día ellos también acepten behavior ).
Pero creo que se pueden desactivar desde el lado cliente, y el CSS no.

De todas formas, si vamos a usar un escript para CSS, expression() quizá sirva, Firefox ya acepta algunas propiedades del tipo "lenguaje de programación" y sintaxis de expresiones regulares (que ahora no nos sirven porque el problema es IE) y también nos queda el recurso -otro que es usado como hack- de 'escribir' un comentario en los documentos con un *.js externo. También el de detectar la versión y navegador en la página anterior y enviar el dato al servidor, para que un PHP escriba el

Código:
<link href="estilo_que_corresponda.css" rel="stylesheet" rev="stylesheet" type="text/css">
o usar el escript para switchear la hoja de estilos.

En realidad, Nateskin, si hay tantas páginas a corregir, yo replantearía el diseño.

Función "opacity"

Comentarios Condicionales para IE

Constantes en CSS

Que usuario cambie color dominante de la web


¿<!--[if IE 7]> Funcionando?

Saludos.

Última edición por furoya; 07/03/2008 a las 12:59 Razón: agregar otro enlace
  #8 (permalink)  
Antiguo 20/09/2009, 13:38
 
Fecha de Ingreso: mayo-2008
Mensajes: 75
Antigüedad: 6 años, 5 meses
Puntos: 0
Respuesta: if else en CSS

Hola yo estaba queriendo hacer algo asi :

<!--[if lte IE 6]>
<!--#include file="c.htm"-->
<!--[else]>

<p style="font-size:22px">&nbsp;</p>
<p><img src="images/contacto_text.png" /></p>
<![endif]>

Pero no funciona no se por que.
  #9 (permalink)  
Antiguo 20/09/2009, 13:42
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.455
Antigüedad: 12 años, 3 meses
Puntos: 361
Respuesta: if else en CSS

Hola:

Quizá me equivoque pero los includes son php, con lo cual no creo que se puedan incluir en comentarios condicionales.

Saludos.

  #10 (permalink)  
Antiguo 25/10/2009, 09:39
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.368
Antigüedad: 11 años, 11 meses
Puntos: 317
Respuesta: if else en CSS

Me parece que hay algunas objeciones más a ese código. lo primero que me llamó la atención fue ver un comentario dentro de un comentario.

Código:
<!--[if lte IE 6]> 
<!--#include file="c.htm"--> 
<!--[else]> 

<p style="font-size:22px">&nbsp;</p>
<p><img src="images/contacto_text.png" /></p>
<![endif]>  
Ok. En este Foro se han visto cosas más raras; pero ¿tiene algún sentido? ¿sirve para hacer algo?

Otra cosa que no entiendo es

Código:
<!--[else]>
Ése sí sería un verdadero comentario y no un hack, por eso no creo que cambie nada. Se podría eliminar.
El mayor problema debe ser que no sabemos lo que quieres hacer con ese ejemplo, bantuito. Tal vez si nos explicas te podamos ayudar. Aunque es muy probable que termines usando otro tipo de hacks.

http://es.wikipedia.org/w/index.php?..._condicionales
  #11 (permalink)  
Antiguo 25/10/2009, 10:51
Avatar de luckystrikede11  
Fecha de Ingreso: octubre-2009
Ubicación: Concepcion, Chile
Mensajes: 240
Antigüedad: 5 años
Puntos: 17
Respuesta: if else en CSS

no uses el else..

ya que el valor contenido dentro del if se superpondrá al estilo del sitio (puedes usar !important)
  #12 (permalink)  
Antiguo 25/10/2009, 11:28
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.810
Antigüedad: 7 años, 4 meses
Puntos: 537
Respuesta: if else en CSS

Dentro de un comentario condicional puedes alojar lo que quieras, pero siempre respetando el etiquetado y la sintaxis correcta y teniendo en cuenta dónde lo pones (el cc) y lo que puede ri alojado ahí.
Esto es, si colocas el cc en el head, la sensatez indica que no incluirás una página completa para ser mostrada, o si es en el body, no llamarás a una hoja de estilos.

Así que si quieres utilizar un include de php, adelante, pero hazlo correctamente:
Cita:
<!--[if lte IE 6]>
<?php include ("pagina.html");?>
<![endif]-->
Y lo mismo para cualquier otro lenguaje/recurso:
Cita:
<!--[if lte IE 6]>
<script type='text/javascript'>
... ...
</script>
<![endif]-->
O ir un poco más lejos y "devolverle la pelota a ie" y jugar con los no-comentarios condicionales
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 10:47.
SEO by vBSEO 3.3.2