index - Etiqueta HTML condicional en HAML
html slim (2)
¿Cómo formatearía HAML para generar un estilo similar a las etiquetas HTML condicionales utilizadas para la orientación entre navegadores?
<!doctype html>
<!--[if lt IE 8]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
Si agrego un condicional, también ajusta la página completa en el condicional. Pensé en usar HAML :plain
filtro :plain
en la parte superior y agregar manualmente </html>
en la parte inferior, pero esto no me parece lo ideal.
Los tres primeros son bastante simples, ya que son simplemente comentarios en HTML y puedes usar el soporte de Haml para comentarios condicionales :
/[if lt IE 8] <html class="no-js ie7 oldie" lang="en">
/[if IE 8] <html class="no-js ie8 oldie" lang="en">
/[if IE 9] <html class="no-js ie9 oldie" lang="en">
El último es un poco diferente . En resumen, lo que desea son dos comentarios que rodean la etiqueta de apertura html
, por lo que el segundo comentario es el primer contenido del elemento html
. Además, no puedes usar la sintaxis de Haml para los comentarios condicionales, tendrás que usar un comentario literal. En Haml esto se vería así:
<!--[if gt IE 9]><!-->
%html{:class => ''no-js'', :lang => ''en''}
<!--<![endif]-->
Esto producirá HTML como este:
<!--[if gt IE 9]><!-->
<html class=''no-js'' lang=''en''>
<!--<![endif]-->
Si quisiera, podría usar la sintaxis de eliminación de espacios en blanco para hacer que el HTML generado se parezca más a su ejemplo:
<!--[if gt IE 9]><!-->
%html{:class => ''no-js'', :lang => ''en''}<>
<!--<![endif]-->
Poniendolo todo junto:
!!!
/[if lt IE 8] <html class="no-js ie7 oldie" lang="en">
/[if IE 8] <html class="no-js ie8 oldie" lang="en">
/[if IE 9] <html class="no-js ie9 oldie" lang="en">
<!--[if gt IE 9]><!-->
%html{:class => ''no-js'', :lang => ''en''}<>
<!--<![endif]-->
content here
que produce:
<!DOCTYPE html>
<!--[if lt IE 8]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class=''no-js'' lang=''en''><!--<![endif]-->
content here</html>
Una técnica alternativa sería utilizar el ayudante envolvente de Haml :
= surround "<!--[if gt IE 9]><!--><html class=''no-js'' lang=''en''><!--<![endif]-->", "</html>" do
content here
<!doctype html>
/[if lt IE 8] <html class="no-js ie7 oldie" lang="en">
/[if IE 8] <html class="no-js ie8 oldie" lang="en">
/[if IE 9] <html class="no-js ie9 oldie" lang="en">
/ [if gt IE 9]><!
%html.no-js{:lang => "en"}
/ <![endif]