How can I convert following IE conditional statements in JADE language :
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
I have tried following but it is not working:
//if IE 8
html lang="en" class="ie8"
//if IE 9
html lang="en" class="ie9"
//if !IE
html lang="en"
// <![endif]
It is showing following output :
<!--if IE 8html lang="en" class="ie8"
-->
<!--if IE 9html lang="en" class="ie9"
-->
<!--if !IEhtml lang="en"
-->
<!-- <![endif]-->
Can some one guide me how it can be rectified.
Support for the //if IE 8 conditional comment syntax was removed few months ago: Git Commit
Version 0.35 was the last version to support them; v1.0 is the first release after the removal.
I've been using the literal style #Jayram uses; only differences being conditional logic à la h5bp and the closing html tag:
| <!--[if IE 8]> <html lang="en" class="lt-ie9"> <![endif]-->
| <!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
Note: Remember to close the document with | </html> since the initial html tag is not Jade's self-closing syntax.
This code should work as expected. It works with Jade version up to 0.35.0.
Please note that the last html element needs to be proper Jade element (that's why attributes are inside parentheses (...)). The first two elements are parts of comments and therefore should be formated as formatted HTML elements.
//if IE 8
<html lang="en" class="ie8">
//if IE 9
<html lang="en" class="ie9">
//[if !IE]><!
html(lang="en")
//<![endif]
Output in a page is as follows:
<!--[if IE 8]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie9"><![endif]-->
<!--[if !IE]><!--><html lang="en"><!--<![endif]-->
EDIT
As of version 1.0.0 (released on 22 December 2013) Jade does not parse comments content any more and dropped support for IE conditional comments.
The new approach is to use well formatted IE conditional comments. It is safe to do so as now Jade ignores any line beginning with <.
Your code can be as follows:
<!--[if IE 8]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie9"><![endif]-->
<!--[if !IE]><!-->
html(lang="en")
<!--<![endif]-->
Note that html element will be handled by Jade (with all its features e.g. set class name from a request handling method) so you should NOT append | </html> at the end of your Jade file.
You can also refer to IE Conditional Comments in Jade Template Engine post for alternative of using Jade mixing with IE conditional comments.
I hope that will help.
Use it like this. This works for me.
| <!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
| <!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
| <!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
Related
I just installed Emmet, and when I type html TAB I only get
<html></html>
Before then, when I did so, Sublimetext would create all the default tags:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Is there a setting or something I can update in Emmet, or Sublime text so that when I have Emmet enabled, I can get the "full" tags?
The file is a .html file, and it's set to HTML in Sublime.
Here's a quick .gif - I start with Emmet diabled:
In Sublime Text 3 it's
html:5 + tab
Returns:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
In Sublime Text 3 you can type <h, and you will get
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Also you should make document type HTML
on mine, html + TAB gives me what you're getting, but if I do html + ENTER, then I get the entire boilerplate.
I was just trying to make some snippets but I can't get any of them to work. Can anyone see what's wrong with this? I read their docs and thumbed some examples off the web but they don't work either. I've got it in my /sublime text 3/packages/user folder and it's named using convention myTest.sublime.snippet.
The snippet is:
<snippet>
<content>
<![CDATA[
<!DOCTYPE html lang="en">
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>${1:test1|test2|test3} | $2</title>
<meta name="viewport" content="width=device-width">
<meta name="Description" lang="en" content="Description">
<meta name="robots" content="index, follow">
<meta name="robots" content="noodp, noydir">
<!-- Twitter Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
$3
</div>
</body>
</html>
]]>
</content>
<tabTrigger>page</tabTrigger>
<scope>source.html</scope>
<description>HTML5 Base HTML</description>
</snippet>
You should use text.html instead of source.html in scope block.
Sublime 3 needs snippets to have .sublime-snippet endings in file name.
Step1. For html snippet, please change
<scope>source.html</scope>
to
<scope>text.html</scope>
Step2. If you want sublime to show tooltips after you input the keywords, add this line
"auto_complete_selector": true
to your Preferences - Settings User file
You should escape dollar signs in your snippet. $ -> \$.
I had the same problem and what I did was :
Just remove <scope>source.html</scope> line present at the bottom of the snippet.
This is clearly an old thread, but it came up when I was searching on creating sublime snippets. The initial issue might be that you are typing in "page" as your tab trigger without first setting your syntax to html. You can do this quickly with shift + command/control + p then type sshtml then enter. Try your tab trigger again. Worked for me. Cheers.
Remove:
<description>HTML5 Base HTML</description>
Yes, this line comes from the official documentation, but at least in my instance (Sublime 3, Build 3114), it breaks the snippet. When I remove that line, the snippet works.
Also, as Jinglong above answered, add the following to your user preferences:
"auto_complete_selector": true
solved by..
removing <scope>source.html</scope>
adding "auto_complete_selector": true, to user settings
Background
My js/ snippets worked fine with <scope>source.html</scope> but for whatever reason, that line caused issues in my html/ snippets not.
I found the solution to my problem! I have been using the unicode setting for my keyboard for another project. When I changed my keyboard back to US, my problem was resolved. I'm sure this is an unusual issue, but in case anyone else is having this problem:
changing the keyboard back to US also reactivated some of the code navigation shortcuts (e.g., jumping word-to-word on a line by holding down option + arrow keys)
I have made a sample webpage in hindi. The code is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
हिन्दिमेबदलना
</body>
</html>
But I want the source code to appear in hindi as well (just like the BBC hindi website) and not in unicode. I mean ह instead of ह
How can I do this?
You can get Devanagari characters in your HTML source by not using HTML entities when creating the file. The following lines are equivalent.
<p>अ आ इ ई</p>
<p>अ आ इ ई</p>
If you are generating your HTML from a database, you might be applying an HTML entity conversion function at the time of generating the markup (such as htmlentities() in PHP). You'll have to remove that function call or apply it selectively.
My jade file is as follows:
!!! 5
html(lang="en")
head
title test page
body
h1 hello world
But it renders as:
!!! 5
<html lang="en">
<head>
<title>test page</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
I've tried just !!! as well as doctype - all render as text. Any ideas?
Check if your file has a byte order mark in the beginning, if it does - remove it.
Some windows editors add it in order to distinguish endiannes.
I use Dreamweaver to develop Web sites. I use the templates feature extensively as it helps to make things easier maintaining conformance.
However, I notice that Dreamweaver adds the following code before the doctype:
<!-- InstanceBegin template="/templates/web-public-user-home.dwt" codeOutsideHTMLIsLocked="false" -->
This is throwing my IE into Quirks mode for obvious reasons (i.e. comment before the doctype). Is there a way of dealing with this?! Below is my doctype.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Regards,
Ok, I figured this out.
Because of the extensive IE-compliance tweaking I'm doing, I was using conditional comments. However, I was using them on the html tag. There's nothing wrong with this in principle but Dreamweaver won't handle your live template updates properly when you do this (It will place the Dreamweaver-specific template lock code first before the doctype, thereby ensuring that your pages will throw Quirks mode in IE).
So what I did was move my conditional comment system away from the html tag, instead using them immediately after your opening body tag and immediately before your closing body tag like so:
<body>
<!--[if IE 6 ]> <div id="ie" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <div id="ie" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <div id="ie" class="ie8"> <![endif]-->
<!--[if gt IE 8 ]> <div id="ie"> <![endif]-->
<!--[if !IE]><div id="not-ie"> <![endif]-->
{YOUR HTML CODE}
</div>
</body>
This way, Dreamweaver places the doctype and html tag before the template lock code, and your resulting pages will appear in standards mode on IE (all things being normal).
Cheers.
Dreamweaver (incl. CS6) places the <!-- InstanceBegin template="... comment in front of the doctype tag only if it is unable to locate the opening <html> tag in your template! This happens when you forgot that tag altogether, but also when that tag is placed within conditional comments like this:
<!--[if IE 8]> <html class="ie8"> <![endif]-->
To avoid this you have to refrain from enclosing the <html> tag within conditional comments. When you use a normal undisguised <html> tag in your template code, Dreamweaver will automatically place the <!-- InstanceBegin template="... after that <html> tag in all files derived from that template and IE will not fall into quirks mode.