Как поставить HTML-тег условно в Jade? - PullRequest
Новая
       3

Как поставить HTML-тег условно в Jade?

26 голосов
/ 13 октября 2011

В jade , я хочу поместить условный тег html согласно этому методу , который вставляет 

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

в начало HTMLfile.

Я пытался 

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

, но Jade игнорирует тег html и не записывает в конец тег </html>.Это недопустимый HTML, и в результате IE вообще ничего не отображает.

Есть ли способ сделать это?

Я думаю, что я просто воспользуюсь решением javascript, еслиэто не так.

Ответы [ 7 ]

21 голосов
/ 07 мая 2012

Этот метод работает с закрывающим тегом html: 

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

от: https://gist.github.com/kmiyashiro/1140425#comment-675550

Обновление:

Как указывает kumar-harsh , это поведение теперь не рекомендуется, если вам нужна эта функциональность, теперь вы должны использовать обычный html: 

<!--[if IE]>
  <html class="ie">
<![endif]-->
<![if !IE]>
  <html class="not-ie">
<![endif]>
</html>

от: https://github.com/visionmedia/jade/issues/1345?source=cc#issuecomment-31920732

17 голосов
/ 07 января 2013

Это то, что вы ищете, и он также даст закрывающий тег html. 

!!! 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
11 голосов
/ 25 октября 2011

Просто используйте этот синтаксис, помните различные отступы: 

!!! 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
  …
8 голосов
/ 22 января 2014

В версии 1.0.0 (выпущено 22 декабря 2013 ) Jade больше не анализирует содержимое комментариев, и поддержка условных комментариев IE была удалена (//if lt IE 7 не будет работать, как в версии 0.35.0 и ниже).

Новый подход заключается в использовании хорошо отформатированных условных комментариев IE. Таким образом, чтобы генерировать выше условные комментарии IE, шаблон Jade должен быть следующим: 

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

Обратите внимание, что первые четыре элемента html являются хорошо отформатированными элементами HTML. Последний использует синтаксис Jade. Также последний комментарий <!--<![endif]--> должен иметь отступ.

С версией Jade 1.0.0 и выше можно безопасно использовать комментарии HTML, поскольку Jade будет игнорировать любую строку, начинающуюся с символа <.

Вы также можете посетить этот пост в условных комментариях IE в Jade, где говорится о разнице между версией Jade 0.35.0 и 1.0.0. Также показан альтернативный подход использования механизма Jade mixins для условных комментариев.

3 голосов
/ 06 июня 2014

Начиная с версии 1.0.0, конструкция // if больше не волшебна . Либо отредактируйте HTML дословно (любая строка, начинающаяся с <, передается Jade как есть), либо используйте mixin, как указано в <a href="http://blog.tompawlak.org/ie-conditional-comments-jade" rel="nofollow"> блоге Тома , цитируемом в другом ответе: 

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')
1 голос
/ 04 сентября 2015

Очень просто.

Пример:

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]
0 голосов
/ 13 октября 2011

Насколько я знаю, вы не можете поместить HTML-теги, как это в Jade.для этого либо вам нужно включить html, либо использовать конечные символы (.) в тегах, которые поддерживают текст, такой как: 

p. <html><script></script>....

Так что тег html не поддерживает текст, поэтому вы не можете это сделать.другое решение: 

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