jade - crear etiquetas en html
¿Cómo coloco una etiqueta html condicional en jade? (7)
En jade , quiero poner una etiqueta html condicional de acuerdo con este método , que pone en
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
en la parte superior de un archivo html.
Lo intenté
//[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]
//[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]
//[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]
//[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]
head
...
pero jade ignora la etiqueta html y no escribe en la etiqueta final </html>
. Esto es html no válido, y los resultados en IE no muestran nada en absoluto.
¿Hay alguna forma de hacerlo?
Estoy pensando que usaré una solución de JavaScript si no hay una forma.
Comenzando en la versión 1.0.0, el constructo // if
https://github.com/visionmedia/jade/issues/1345?source=cc#issuecomment-31920732 . O bien renderice HTML textualmente (cualquier línea que comience con <se transmite tal como está por Jade) o use una mezcla, según el blog de Tom citado en otra respuesta:
mixin ie(condition)
| <!--[!{condition}]>
block
| <![endif]-->
doctype html
html
head
title= My title
+ie(''if IE 8'')
link(rel=''stylesheet'', href=''/stylesheets/style-ie8-1.css'')
En la versión 1.0.0
(publicada el 22 de diciembre de 2013 ), Jade ya no analiza el contenido de los comentarios y se ha eliminado el soporte para los comentarios condicionales de IE ( //if lt IE 7
0.35.0
no funciona como en la versión 0.35.0
o inferior).
El nuevo enfoque es usar comentarios condicional bien formateados de IE. Entonces, para generar comentarios condicionales de IE arriba, la plantilla de Jade tendrá que ser la siguiente:
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
html(class="")
<!--<![endif]-->
...
Tenga en cuenta que los primeros cuatro elementos html
son elementos html
bien formateados. El último usa la sintaxis de Jade. Además, el último comentario <!--<![endif]-->
debe sangrarse.
Con Jade versión 1.0.0 y superior, es seguro usar comentarios HTML ya que Jade ignorará cualquier línea que comience con <
carácter.
También puede visitar esta publicación en IE Conditional Comments en Jade, que habla sobre la diferencia entre Jade versión 0.35.0
y 1.0.0
. También muestra un enfoque alternativo al uso del mecanismo Jade mixins para comentarios condicionales.
Esto es lo que está buscando, y también le dará la etiqueta html de cierre.
!!! 5
//[if lt IE 7]><html lang="en" class="no-js oldie lt-ie9 lt-ie8 lt-ie7"><![endif]
//[if IE 7]><html lang="en" class="no-js oldie lt-ie9 lt-ie8"><![endif]
//[if IE 8]><html lang="en" class="no-js oldie lt-ie9"><![endif]
//[if gt IE 8]><!
html(class=''no-js'', lang=''en'')
//<![endif]
head
Muy simple.
Ejemplo:
HTML
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
JADE
//[if lt IE 7]>
<html class="ie ie6" lang="en"> <![endif]
//[if IE 7]>
<html class="ie ie7" lang="en"> <![endif]
//[if IE 8]>
<html class="ie ie8" lang="en"> <![endif]
Simplemente use esta sintaxis, tenga en cuenta la diferente sangría:
!!! 5
| <!--[if lt IE 7]> <html class="ie6 oldie" lang="en"> <![endif]-->
| <!--[if IE 7]> <html class="ie7 oldie" lang="en"> <![endif]-->
| <!--[if IE 8]> <html class="ie8 oldie" lang="en"> <![endif]-->
| <!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
head
…
por lo que sé, no puedes poner etiquetas html como esta en jade. para esto, debe incluir un html o usar etiquetas finales (.) que admitan texto como:
p. <html><script></script>....
Entonces, la etiqueta html no admite texto, así que no puedes hacerlo. la otra solución es:
-if IE==6
html.ie6
-if IE==7
html.ie7
-if IE==8
html.ie8
-if IE==9
html.ie9
head
body
h1 My sit
Este método funciona, con la etiqueta html de cierre:
!!! 5
//if lt IE 7
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
//if IE 7
<html class="no-js lt-ie9 lt-ie8">
//if IE 8
<html class="no-js lt-ie9">
// [if gt IE 8] <!
html(class="no-js", lang="en")
// <![endif]
head
title= title
body!= body
desde: https://gist.github.com/kmiyashiro/1140425#comment-675550
Actualizar:
Como señaló kumar-harsh este comportamiento ahora se ha depreciado, si necesita esta funcionalidad, ahora debe usar html regular:
<!--[if IE]>
<html class="ie">
<![endif]-->
<![if !IE]>
<html class="not-ie">
<![endif]>
</html>
desde: https://github.com/visionmedia/jade/issues/1345?source=cc#issuecomment-31920732