if else en CSS

[Nateskin]

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.alphaimageloader( src='images/markup.png', sizingmethod='scale');
}
</style>
<!--[else]> 
<style type="text/css">
#markUp {
    background: url(images/markup.png) no-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.alphaimageloader( src='images/markup.png', sizingmethod='scale');
}
</style>
<!--[else]> 
<style type="text/css">
#markUp {
    background: url(images/markup.png) no-repeat left top;
}
<![endif]-->
algo parecido.
 
¿alguien sabria como?
 
gracias! ^^
} 
   

[man0l0]

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!

[Nateskin]

pues que pregunto claramente que si ha alguna manera para incluir dentro del CSS (del estilo que edito) cual va para cada navegador.

[webosiris]

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"

[frijolerou]

Exacto, tal como te menciona Webosiris, el primer ejemplo que has puesto tiene equivocada su descripción:

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]-->

[webosiris]

Iniciado por frijolerou

una version SUPERIOR a internet explorer 6.

no vi el lte ...

[furoya]

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.

[bantuito]

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.

[jomaruro]

Hola:

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

Saludos.

[furoya]

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

[luckystrikede11]

no uses el else..

ya que el valor contenido dentro del if se superpondrá al estilo del sitio (puedes usar !important)

[kseso?]

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:

<!--[if lte IE 6]>
<?php include ("pagina.html");?>
<![endif]-->

Y lo mismo para cualquier otro lenguaje/recurso:

<!--[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