Warunkowe znaczniki HTML w HAML

Jak sformatować HAML, aby wyprowadzać styl podobny do warunkowych znaczników HTML używanych w kierowaniu na różne przeglądarki?Warunkowe znaczniki HTML w 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]-->

Dodanie warunku powoduje również zawijanie całej strony w warunku. Pomyślałem o użyciu filtra HAML :plain na górze i ręcznego dodania na dole </html>, ale wydaje mi się to mniej idealne niż dla mnie.

Źródło

2012-10-13 typeoneerror

Pierwsze trzy z nich są dość proste, ponieważ są one po prostu komentarze HTML i można użyć 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">

last one is a bit different. Rozbicie to, czego potrzebujesz, to dwa komentarze otaczające tag otwierający html, więc drugi komentarz jest pierwszą treścią elementu html. Ponadto nie możesz używać składni Haml do komentowania warunkowego, musisz użyć dosłownego komentarza. W haml miałoby to wyglądać tak:

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

To będzie produkować HTML tak:

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

Jeśli chciałeś można użyć whitespace removal syntax aby wygenerowany HTML bardziej jak twój przykład:

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

Składając wszystko razem:

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

która produkuje:

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

Alternatywną techniką byłoby użyć Haml’s surround helper:

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

Źródło

2012-10-15 17:01:57 matt

wspaniała odpowiedź. rekwizyty również dla alternatywy dźwięku przestrzennego. – typeoneerror

@matt Nie powinien to być ostatni bit: ''? – Noz

@nozpheratu Czy masz na myśli, że powinien on mieć część "! (IE)"? Niekoniecznie - przeglądarki innych niż IE zignorują ten warunek i zrenderują zawartość, a przeglądarki IE będą objęte istniejącą klauzulą. Możesz dodać to do dokumentacji, którą przypuszczam. – 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]

Źródło

2012-10-13 02:10:20

całkiem blisko! chociaż ostatnia linia jest nieco inna. prawdopodobnie nadal będzie działać? – typeoneerror

Testowany; wynik jest dokładnie taki sam jak HTML, który chciałeś (z wyjątkiem oczywiście, że s nie są wyrównane, nie ma biggie) i ma pozytywną stronę spójności składni. Jeśli użyjesz Sublime Text, to na pewno będziesz chciał wtyczki HTML2Haml - idealnie przeanalizuje całą stronę układu, włączając w to dokładnie ten przykład, który chciałeś (ja też używałam Boilerplate). Dla wersji internetowej, http://html2haml.heroku.com/ – iono

Warunkowe znaczniki HTML w HAML

Odpowiedz

Powiązane problemy