Can you tell me what is supposed to happen for IE browsers?
<!DOCTYPE html><!--[if lt IE 9]><html class="no-js lt-ie9" lang="en" dir="ltr"><![endif]--><!--[if gt IE 8]><!-->
<html class="no-js" lang="en" dir="ltr">
<!--<![endif]-->
<head>
...
I can understand that non-IE browsers would only interpret:
<html class="no-js" lang="en" dir="ltr">
but the condition for greater than IE8 isn't making a lot of sense:
<!--[if lt IE 9]> ... <!--[if gt IE 8]><!-->
<html class="no-js" lang="en" dir="ltr">
<!--<![endif]-->
Is this a hack? The notations for opening and closing comments don't match.
The extra !-- bits are there to make it a valid HTML comment so that validators don't complain about bogus comments. More on that here and here. What non-IE browsers really see are two regular HTML comments containing [if gt IE 8]><! and <![endif] respectively.
The conditional comments allow greater than IE8 to see that <html> tag. As you've correctly pointed out, non-IE browsers will also consume that same <html> tag — the !-- bits are what allow them to do so. I wouldn't call it a hack, but then again, conditional comments themselves might be a hack depending on whom you ask (I certainly don't think so).
Related
I know this is a old problem, and there are alot of fixes for this. I have applied the following, but still some of my users get the quirks mode. And its only users that run IE 8.
<!doctype html>
and
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
It seems like this is not enough, the page is still rendering in quirksmode in IE 8.
Since this is an umbraco/c# site, the first row in the source is empty. This is because of the Master directive in the top. You cannot move above it. See picture.
This is some code from the site.
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[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]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="sv">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/b/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
The source is like this.
<%# Master Language="C#" AutoEventWireup="true" %>
<!doctype html>
<%# Import Namespace="System.Web.Configuration" %>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[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]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="sv">
The "Master" creates the empty line in the top.
Installing Google Chrome Frame fixes the problem, but due to citrix environments some of our users don't have the full control to install plugins.
Check out Henri Sivonen’s page Activating Browser Modes with Doctype, which discusses the IE 8/9 specialties as well and (despite the page name) also factors other than doctype declaration that may affect browser mode.
Is the page on an intranet? I believe IE8 defaults to quirks mode in that case. You could set a group policy to get around this though.
i seen lot of website have specific code for ie6, ie7,ie8.
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
and i seem html have specific class like this
<html class=" js no-flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
any one just tell what is the use this codes
This is instruction for Moderniz. If JavaScript in your browser is enabled, Modernizr changes no-js to js class, so you can define CSS styles for JavaScript-enabled browsers and for JavaScript-disabled browsers
It's put there so that if there IS Javascript support, then you can use JS to remove the no-js class.
You use the no-js class to style CSS for your webpage if you normally require JS for your site to function properly.
This provides a degraded but functional format, if you want to serve enough HTML and enough forms to make the page work without JS, but then hide the ghetto-version and replace it with the shiny and fancy stuff, later.
<!--[if IE]><![endif]--> is Microsoft's conditional comment.
So for IE version < 7 ([if lt IE 7]), <html lang="en" class="no-js ie6"> is used;
For IE version 7 ([if IE 7]), <html lang="en" class="no-js ie7"> is used;
and so on.
Finally, for IE version > 9([if gt IE 9]), <html lang="en" class="no-js"> is used.
And since it is a Microsoft specific comment, all non-IE browsers will treat it as normal comment, so only <html lang="en" class="no-js"> (the only un-commented part) is used.
For a Mobile first responsive site. I'm combining HTML5 Boiler plate and Mobile Boilerplate
I have one little question.
How to combine these 2 IE conditional statements into one?
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
Did you try this one:
<!--[if (gt IE 8)|((gt IEMobile 7)|!(IEMobile))]><!-->
<html class="no-js">
<!--<![endif]-->
As far I know it should be possible to add another pair of brackets and combine them with an or operator.
By the way I don't think that it is a good idea to manipulate in this way the html tag.
See for http://en.wikipedia.org/wiki/Conditional_comment for details.
You can combine logical expressions with ands and ors (& and | respectively).
So try:
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
<!--[if gt IE 8 |((gt IEMobile 7)|!(IEMobile))]><!--> <html class="no-js"> <!--<![endif]-->
Source:
http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
I've never come across something like this, but it looks a bit odd.. I'm used to seeing it more in this format (the previous line in Columnal):
<!--[if IE 9 ]> <html lang="en-us" class="no-js ie9"> <![endif]-->
Firstly, what does the first code sample do? And do I need to worry about the format of it? Thanks
The first basically says: if the browser is greater than IE 9 or not an IE browser, that snipper of code will be used.
I have never seen such formatting before though.
For downlevel-hidden one should use <!--[if expression]> HTML <![endif]-->
For downlevel-revealed this one: <![if expression]> HTML <![endif]>
For more on this, check Microsoft's 'About'.
Can anyone tell me what this is:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js iframe" lang="en"> <!--<![endif]-->
I have seen this on so many pages but there is no JavaScript link on some of the pages to support the document declaration.
It seems to be snippet from html5 Boilerplate's standard format for 'browser detection' , see http://html5boilerplate.com/
The section that you have highlighted allows for only one section of the <html> tag to be parsed depending upon the flavour of browser that the site visitor is using.
Read more about this method at the authors website > http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
This is the doctype for HTML5 pages
<!DOCTYPE html>
The following lines means that the code between the commented tags is IE specific (first one is for browsers less than IE7 (IE6, IE5, etc...), second one for IE7, third one for IE8 and the last one for >= IE9)
<!--[if lt IE 7]> <html class="no-js ie ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js iframe" lang="en"> <!--<![endif]-->
<!--[if lt IE 7]>
That means that code inside the <!--[if lt IE 7]>...<![endif]--> will work only in IE 7 browser
and <!--[if lt IE 8]>...<![endif]--> only in IE8 browsers
This hint working only in IE browsers. For example you can write <!--[if lt IE 7]><style .../><![endif]--> and this style will work only in IE 7. Than on the next line you can write <!--[if lt IE 8]><style .../><![endif]--> and this styles will work only in IE8
Those are only checks for compatibility with older browsers
<!DOCTYPE html> usually refers to HTML5, browsers below IE9 don't support HTML5 at all, so tweaks are needed. That's why there are HTML if-clauses that check if you use IE and which version. The HTML element gets a special class for that browser version so that CSS can see if it's IE and in which version (e.g. for fixing the box model of IE6)
The no-js class probably gets removed by JavaScript so that CSS can access specific elements only if JavaScript is on/off
You should use this as your Doctype: <!DOCTYPE html>
The rest is not relevant for the doctype, and is IE-specific.