How can I add conditional CSS classes to the HTML or BODY element in Magento Go? I would like to add this:
<!--[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]-->
to my site.
One of the main features of Magento GO is it's limitations on what can be changed in order to prevent website downtime due to inexperienced people making code edits that they cannot back out of. All the design is exposed in the Magento GO Theme, Layout and Design editor suite.
If it is not available in the Magento GO toolset, then it is not available as a conscious desire on their part to limit the changes that can be made in the Magento GO hosted environment.
See this question in Magento.Stackexchange for more information on Magento Go limitations
Basically, you don't have access to directly edit the templates and layouts files. The <html> opening tag is found in the templates/page folder in 1col, 2col, 3col template files for Magento CE.
Related
I've included in my head section:
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
Everything is fine when I open my site locally, html tag has class ie7(ie8) when I open it in IE7(IE8), but when I upload files on a server (which is on apache), and check it has an empty class. What am I doing wrong?
I would like to utilize boilerplatejs for an upcoming intranet project, however, many of the machines are still WinXP with IE8 (and there's no option in the orginazation for wide-scale Firefox or Chrome deployment).
I've quickly tried incorporating the html5shiv, but that didn't seem to help. It doesn't appear routing or other functionality is working. I'm trying to figure out if this is even worth doing or if someone else has tried to get this working before spending more time on it.
Not really. That's what the code in h5bp is about
<!DOCTYPE html>
<!--[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]-->
Those are conditional clauses for graceful degradation of ie < 9.
If this is a project where many people will be on ie<9, it might be better to use xhtml...just an engineering consideration
In fact, the most difficult problems you'll encounter are not about boilerplatejs but external libraries.
Specific tweaks depend on the features you leverage in your application, but for a start all you need to to is to
add html5shim to support HTML5 elements like <section>
include json2 library for missing json serialization support
[optionally] include explorercanvas to enable flot charting
Put this inside your <head> section:
<!--[if lt IE 9]>
<script type="text/javascript" charset="utf-8" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" charset="utf-8" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript" charset="utf-8" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
<![endif]-->
With this snippet you'll get boilerplatejs example page working, with routing, themes and i18n support.
Then, you'll notice that in the Click Counter example you don't win regardless how many times you click on the button. This is because LOTTERY_ACTIVITY event published by clickCounter/clickme component doesn't reach any listeners due to a bug(?) in pubsub.js library (I even submitted an issue some time ago). To resolve it, patch libs\pubsub\pubsub-20120708.js, changing
params = (args.length > 1) ? Array.prototype.splice.call(args, 1) : []
to IE8-compatible call:
params = (args.length > 1) ? Array.prototype.splice.call(args, 1, args.length-1) : []
Congratulations... You WON!!!
I leave fixing remaining issues in the Backbone TODO module up to you, you may use the original code as a guidance.
To summarize, I would say that boilerplatejs is fully IE8-compatible, with any incompatibilities coming from supporting libraries, not the core code.
BoilerplateJS core is not designed with any HTML5 features. Though I haven't tested it in IE8, I believe this is very much possible with some adjustments. For example, if crossroadsJS, the library used for routing is not compatible with IE8, still you may easily replace that with pathJS or something else that is IE8 compatible.
I have been looking for an explanation of why this part of the html tag conditionals for IE in the HTML5 Boilerplate have this part:
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
I ask just so I have an understanding of how this is working. I understand the conditionals above this one, but why is this one different than those above it? I don't get what this condition is doing compared to those above it.
Thank you in advance for helping me to understand something that I will be using.
Basically, the last part is used for IE versions 9 and up, and all other browsers. However, the syntax is shorter and not as straight-forward as it could be because HTML Boilerplate is heavily concerned with optimization.
I found the article that explains it, I recommend you read the whole thing:
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Here's my proposed solution:
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
This was actually updated afterwards due to issues you can read about in the article.
Apparently part of the weird syntax has to do with a Dreamweaver(!) bug. Here is an excerpt:
Here is the new recommendation, and the one that's in use in the HTML5
Boilerplate.
<!--[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]-->
Basically, the last line is saying "Do this if IE9+ or not IE". Some of the bullet points below are not directly related to your question, but I'll include them anyways.
Why?
This fixes a file blocking issue discovered by Stoyan Stefanov and
Markus Leptien.
It avoids an empty comment that also fixes the above
issue.
CMSes like WordPress and Drupal use the body class more
heavily.
This makes integrating there a touch simpler It doesn't
validate in html4 but is fine in html5. Deal with it.
It plays nicely
with a technique to kick off your page-specific javascript based on
your markup.
It uses the same element as Modernizr (and Dojo). That
feels nice.
I left an empty class in there because you'll probably be
putting a no-js in there or something else. If not, delete.
Also if
the extra comments around that last tag look weird to you, blame
Dreamweaver, which chokes on normal !IE conditional comments.
More discussion about this issue here: https://github.com/h5bp/html5-boilerplate/issues/425/#
I am in need to know which is the current browser my website is being viewed on, because that way I know how to execute specific code for Images and CSS, stuff like that...
Check out Modernizer and Selectivizr
As your comments suggest that you only need IE detection, the best way I've seen of detecting IE for CSS purposes is used in the HTML 5 Boilerplate project, which uses a technique by Paul Irish:
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
I'd recommend using the HTML5BP version:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
There are both PHP and JavaScript classes/functions for this. All you have to do is google for the respective one and then use it to your liking on a per browser basis. You could even go a step higher and do it based on .htaccess but over all depends on what your doing with what where when why etc..
All in all though generally speaking short of some styling issues, or some specific client side scripting issues almost anything you do with just standard html will work fine cross all browsers.
you can check the browser info with javascript embedded into html.
more details can e.g. be found here:
http://www.alanwood.net/demos/browserinfo.html
example code: (now works for sure)
<!DOCTYPE html>
<html>
<head><title>test</title></head>
<body>
<script>
alert(navigator.userAgent);
</script>
</body>
</html>
You'll want to inspect the navigator.userAgent property. There are a few Javascript libraries that you can download that will do this parsing for you. However, you should know that trying to determine the browser type by parsing the user agent string is incredibly unreliable.
If you're trying to toggle behavior based on browser capabilities you should instead check for those specific features and see if they are enabled in the current browser. You can start by reading this post on QuirksMode.
Someone else mentioned Modernizr which is just a library that does the feature detection for you. This is much more reliable than inspecting the browser's user agent.
Use XPath APIs to determine the browser engine:
//Gecko
var gecko = (!!window.XPathExpression === true) && "gecko";
//Trident
var trident = (!!window.XPathEvaluator === false && !!window.XPathExpression === false) && "trident";
//WebKit
var webkit = (!!window.XPathEvaluator === true && !!window.XPathExpression === false) && "webkit";
var browser = (String(gecko)+String(trident)+String(webkit)).replace(/false/g,"");
Use document.documentMode to detect which mode IE is using as well.
References
Windows Internet Explorer Platform APIs
Mozilla Source Code Directory Structure
MDN: Web API Index
WebKitJS
Planet Webkit
Web specifications support in Opera
Details for Document API - Microsoft Edge Development
I'm trying to target the IE browser on Windows Mobile 7.5. Can anyone tell me if the
<!--[if lt IE <mobile browser>]> <include retina display> <[end if]-->
conditional comment syntax style works for targeting Windows Mobile?
EDIT: Thanks to the comment below I was able to find a solution. The <!--[if IEMobile]> <[end if]--> syntax works for Windows mobile 7, but I couldn't get it to work for Windows mobile 7.5. Because I am building a mobile website that isn't required to present well on desktop devices I was able to use a generic <!--[if gt IE 7]> comment that gets around the issue I was having between the two renderings.
If anyone out there has a more elegant solution for when this won't work because of required desktop support, I'd love to hear it.
Just in case anyone experiences this issue. Some points worth knowing:
IE Mobile 7.5 reports false positive for font-face. Therefore, you're out of luck forking that feature with Modernizr.
To confuse matters, it also ignores conditional comments for IE Mobile as suggested above. It actually picks up conditional comments for IE9. The only way I was able to fix was add a conditional comment like this:
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 ieMobile75" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
And then prefix relevant styles with the .ieMobile75 class. If you want to avoid those styles hitting desktop IE, I'd suggest combining them inside a media query.
may be this work for you
<!--[if IEMobile]>
...
<![endif]-->
<pre>
<code>
is this help for you by checking device width?
<!-- [if (min-device-width: 481px)]>
<![endif]—>
</code>
</pre>