I want to know how can I add an asset only for IE9 in yii2 assets bundle? I mean like
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
and another thing is how can add a js library like jquery in top of page not in the end?
You have to specify the options for your jsOptions property.
In your case, it should be something like:
public $jsOptions = ['condition' => 'lte IE9'];
Further reading:
http://www.yiiframework.com/doc-2.0/yii-web-assetbundle.html#$jsOptions-detail
and
http://www.yiiframework.com/doc-2.0/guide-structure-assets.html#asset-options
Regarding to the jQuery question, you just configure the AssetBundle's accordingly, or you can just register it in your head or wherever you want in the template inserting the normal script tag.
Related
How to add script in comment on Pug ?
I have two script to include on my web page :
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
See this page in the pug docs
Pug does not have any special syntax for conditional comments. But since all lines beginning with < are treated as plain text, normal HTML style conditional comments will do fine.
So you can just use standard html for your conditional comments
I am using this code to make HTML5 tags available to older browsers:
<script>
'header nav aside article footer section'.replace(/\w+/g, function (n) { document.createElement(n) })
</script>
Some sources say to place the code in the head section of the HTML document, and some in the body. Which way is correct?
This script needs to run before IE tries to style the elements in question to avoid the flash of unstyled content. Put it at the bottom of the head tag. See also http://en.wikipedia.org/wiki/Flash_of_unstyled_content and http://modernizr.com/docs/#installing
The most popular way to polyfill this behavior is to use the HTML5Shiv. It recommends the following:
Insert minified distribution shiv in <head> element (after or before your CSS):
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
I’d recommend this shiv rather than rolling your own, as it is kept up to date with new HTML features, such as the fairly recent main element.
I would like to use a different font that is not from the usual font-family.
To include this font in my site, I have a two-line JavaScript code from typekit.com which needs to be put into the pages of my website where this font needs to be applied.
But since I would like to apply this font thru out my website, where should I put this JavaScript code so that the font gets applied thru throughout the site.
I am using Magento 1.6.2.0 version and have created my own theme which sits in app/design/frontend/default/mytheme and skin/frontend/default/mytheme
If some one could tell me where to put the following JavaScript code,
<script type="text/javascript" src="http://use.typekit.com/ysw8aaa.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
I would be really grateful to them.
Thanks
According to the knowledge-base and these blogs
<default>
<action method="addJs"><script type="text/javascript" src="http://use.typekit.com/ysw8aaa.js"></script></action>
<action method="addJs"><script type="text/javascript">try{Typekit.load();}catch(e){}</script></action>
</default>
or, more reliably, combine them into a single custom script file and use:
<action method="addJs"><script>yourdir/yourscriptname.js</script></action>
Go to /app/design/frontend/base/default/template/page/html/head.html (or whichever template path u are using)
Right above:
<!--[if lt IE 7]>
Add:
<script type="text/javascript" src="http://use.typekit.com/ysw8aaa.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
Something to keep in mind this is a external link so it slows down your site.
I'm justing sorting and optimizing my Magento 1.5.1.0 theme and I'm asking myself, for what purpose this code snippet is and whether I can safely remove it.
Talking about this one:
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
//]]>
</script>
<![endif]-->
Any advice is appreciated.
Thanks!
BLANK_URL is part of a IE6 fix, to make the browser show iframe backgrounds transparently, when being hovered.
BLANK_IMG is part of another IE6 fix, to make the browser show PNG images correctly, when used as background images.
Whether you can remove them, solely depends on which browsers you want to support.
If you want to remove them, be aware though, that you also should remove the proper .js includes, iehover-fix.js for BLANK_URL and/or ds-sleight.js for BLANK_IMG, too.
<!--[if lt IE 7]>
<script type="text/javascript" src="http://example.com/js/lib/ds-sleight.js"></script>
<script type="text/javascript" src="http://example.com/js/varien/iehover-fix.js"></script>
<![endif]-->
Is there an easy way to serve a whole stylesheet to every modern Browser but IE7 and IE8? Some kind of inverted conditional comments?
The following should work per Microsoft's documentation:
<!--[if !((IE 7)|(IE 8))]><!--><link rel="stylesheet" type="text/css" href="ie.css" /><!--<![endif]-->
I don't know much about web coding... but this looks like what you are looking for.
Check out this site.
If you are simply trying to exclude browsers older than IE9, it is simpler to use
<!--[if gte IE 9]>
<link ...
<![end if]-->
Otherwise, you will need to use other operators to fit a specific subset, as others have already provided.
The MSDN docs are very useful here: http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
Note that you can use "!" to denote "not". So you could use something like this:
<!-- [if !(IE 7) & !(IE 8)]>
<link href="modern.css" />
<![endif]-->
Pretty straight forward.
Updated
Since IE's quirky conditionals don't get respected in other browsers. You could easily add jQuery to the page and do something like this:
<script src="jquery.js"></script>
<!-- add jquery first for browser sniffing -->
<script>
// if broswer is IE and less than version 9 write out the nice CSS
if($.browser.msie && parseInt($.browser.version) < 9){
document.write("<link href='modern.css'/>");
}
</script>
jQuery docs on browser sniffing: http://api.jquery.com/jQuery.browser/