Etiqueta HTML condicional en HAML

¿Cómo formatearía HAML para generar un estilo similar a las etiquetas HTML condicionales utilizadas para la segmentación entre navegadores?Etiqueta HTML condicional en HAML

<!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, envuelve toda la página en el condicional también. Pensé en usar el filtro :plain de HAML en la parte superior y agregar manualmente </html> en la parte inferior, pero esto parece menos que ideal para mí.

Fuente

2012-10-13 typeoneerror

Los tres primeros de estos son bastante simple, ya que son simplemente comentarios a la versión HTML y se puede utilizar el Haml support for conditional comments:

/[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 last one is a bit different. Para descifrarlo, lo que desea son dos comentarios sobre 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 comentarios condicionales, tendrás que usar un comentario literal. En Haml este sería el resultado:

<!--[if gt IE 9]><!--> 
%html{:class => 'no-js', :lang => 'en'} 
    <!--<![endif]-->

Esto producirá HTML así:

<!--[if gt IE 9]><!--> 
<html class='no-js' lang='en'> 
    <!--<![endif]-->

Si quieres puedes utilizar el whitespace removal syntax para hacer el HTML generado más como tu ejemplo:

<!--[if gt IE 9]><!--> 
%html{:class => 'no-js', :lang => 'en'}<> 
    <!--<![endif]-->

Poniendo 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 Haml’s surround helper:

= surround "<!--[if gt IE 9]><!--><html class='no-js' lang='en'><!--<![endif]-->", "</html>" do 
    content here

Fuente

2012-10-15 17:01:57 matt

maravillosa respuesta. accesorios para la alternativa de sonido envolvente también. – typeoneerror

@matt No debería ser el último bit: ''? – Noz

@nozpheratu ¿Quiere decir que debería tener la parte '! (IE)'? No necesariamente: los navegadores que no sean de IE ignorarán la condición de todos modos y representarán el contenido, y los navegadores de IE estarán cubiertos por la cláusula existente. Podrías agregarlo para la documentación, supongo. – matt

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

Fuente

2012-10-13 02:10:20

muy cerca! aunque la última línea es un poco diferente. Sin embargo, probablemente todavía funcione? – typeoneerror

Probado; el resultado es exactamente el mismo que el HTML que quería (excepto obviamente el s no están alineados, no es gran cosa) y tiene la ventaja de la consistencia de la sintaxis. Si usa Sublime Text, definitivamente querrá el complemento HTML2Haml - analizó perfectamente toda la página de diseño, incluyendo este ejemplo exacto que quería (yo también estaba usando Boilerplate). Para una versión web, http://html2haml.heroku.com/ – iono

Etiqueta HTML condicional en HAML

Respuesta

Cuestiones relacionadas