I recently build an responsive website. I use Zurb Foundation because some advice and article its the best solution for make responsive website more efficient. But the problem, the new version of Foundation don't support for IE 7+, as you can see here, but I want my website support for all of IE version. Some suggest advice to use old Foundation (i.e. vers 3). But I think the newest version is the best.
My question, any solution to make new Foundation (vers. 4) support for IE?
I need the advice because I'm stack here. Thank you
The problem with IE7 and IE8 is that they don't have built in support for media queries.
There are some options which may help you though, cross-browser polyfills that add media query support to old browsers.
The two most popular are respond.js and css3-mediaqueries.js . I've had success with both.
In the head of your page, you test the browser and load one of these scripts if necessary.
Ways I've done this in the past are either with conditional comments:
<!--[if (lt IE 9) & (!IEMobile)]>
<script src="path-to/respond.js"></script>
<![endif]-->
or by using modernizr
Modernizr.load([
{
// The test: does the browser understand Media Queries?
test : Modernizr.mq('only all'),
// If not, load the respond.js file
nope : '/js/respond.js'
}
]);
Both methods are easy enough to try, and even if though don't help you this specific case, you'll probably get the opportunity to try them again on another site.
Good luck!
I wrote this http://justthisguy.co.uk/responsive-sass-and-ie/ that looks at using bootstrap and having sass generate an ie7 stylesheet that defaults to the desktop view. I'm going to work on a foundation version of it at some point. It results in some duplication of css rules but something like https://github.com/addyosmani/grunt-uncss could be used to remove that duplication
Related
I am using yui2 (I know it is archived now but I had hands on experience with this version and did not have time to learn yui3 due to tight deadline) in some of the pages of my project.The pages without yui listing are made responsive for mobile view using responsive css.But now the pages with yui2 design are not responsive.I want to know if I can add lines of code so that it can become responsive.Please help.
YUI or not, you can use Pure CSS grids: http://purecss.io/grids/#pure-responsive-grids
I found the solution:
follow steps given here:https://css-tricks.com/responsive-data-tables/
in the css provided replace table,td etc with #uryuidivname table,#urdivname td
I know HTML and CSS really well but responsive and continually messing around with css media queries is just a pain in the butt. What do you recommend to make my workflow of making my sites responsive less cumbersome? What can I learn to make my job easier?
I see some sites out there where the responsiveness is so dynamic and perfect. CSS media queries don't seem to create this fluidity.
http://getbootstrap.com/getting-started/
Bootstrap is compatible with the latest versions of all major browsers. It gracefully degrades when used on older browsers such as Internet Explorer 8.
Since version 2.0 it also supports responsive web design. This means the layout of web pages adjusts dynamically, taking into account the characteristics of the device used (desktop, tablet, mobile phone).
Starting with version 3.0, Bootstrap adopted a mobile first design philosophy, emphasizing responsive design by default.
Bootstrap is open source and available on GitHub. Developers are encouraged to participate in the project and make their own contributions to the platform.
Recently, community members have translated Bootstrap's documentation into various languages, including Chinese, Spanish and Russian.[6]
Is it possible to run AngularJS in a Durandal project? We are using Durandal now but want to move to AngularJS while still keep the site operational. Is it even a good idea to attempt this?
Any suggestion would be greatly appreciated.
You could run them side-by-side, but then you would just have two separate SPAs hosted on the same site. The doesn't seem like a good upgrade strategy to me. I think you would be better off to fully develop the new version and then replace the site altogether.
I would also advise that you wait for the release of AngularJS 2.0 (if possible). Rob Eisenberg has announced that he is currently working with the AngularJS team to provide core changes and plugins that will make Angular 2.0 more familiar to developers with Durandal experience, as well as to provide a migration path from Durandal to Angular 2.0.
The other answer isn't exactly correct. I have an example that proves it wrong.
Durandal is a module loader that can load any view / view model pair. If you choose to load an angular application and leave out the router portion it works just fine. It really isn't that difficult to get it set up.
Wrap your Angular.js application initialization code in an AMD module (view model) with a matching view and it just works.
I have to check if the browser being used supports my site which uses AngularJS version 1.2.12. The goal is to show a message saying to 'update/change your browser' for old versions of Chrome/Safari/IE. Feature detection is recommended in general but for issues like this: https://github.com/angular/angular.js/issues/4749 where select elements don't refresh their values, as well as some other IE8 issues, feature detection doesn't seem relevant so I'm planning to use:
<!--[if IE]>
less than IE10
<![endif]-->
Is there an AngularJS way of detecting support for its features? Should I be checking for old versions of Chrome/Safari at all?
In our project we use html conditional comment to detect which version of IE is running. Something among the lines:
<!--[if IE 8]><html class="lt-ie9"><![endif]-->
You can also use Modernizr which has feature detection.
In terms of other browsers you should be fine, since they update themselves regularly and we haven't find any particular issue related only to one specific version.
I'm working on an Angular project that will be included in a HTML page I don't have control on.
Actually I only have access to what is inside the <body> element.
There are many constraints which are not the easiest to deal with:
1- I can't change the doctype:
2- I can't remove this meta tag:
3- The app has to load an XML file
I managed to overcome points 1 and 3 but point 2 gives me a headache !
Here is the error I get when I test on IE8+ (it works fine on IE7 and other browsers):
[$sce:iequirks] http://errors.angularjs.org/1.2.12/$sce/iequirks
IE8 in quirks mode is unsupported
error in component $sce
Strict Contextual Escaping does not support Internet Explorer version < 9 in quirks mode. You can fix this by adding the text to the top of your HTML document. See http://docs.angularjs.org/api/ng.$sce for more information.
I found many solutions on forums but no one has worked so far...
Especially hoped that disabling $sceProvider (code below) would make the app work on IE8+ but it didn't:
angular.module('ie7support', []).config(function($sceProvider) {
// Completely disable SCE to support IE7.
$sceProvider.enabled(false);`
});
I even tried to add <!doctype html> to the top of my HTML document, which I am not allowed to but which I did just for the test, and it doesn't solve the problem.
Any help or suggestions greatly appreciated cause I'm really stuck right now...
Thanks
Got it !!
I simply needed to give the name of my app instead of silly "ie7support" in the code below:
angular.module('ie7support', []).config(function($sceProvider) {
// Completely disable SCE to support IE7.
$sceProvider.enabled(false);
});
Found thanks to a deeper look at this article:
http://docs.angularjs.org/api/ng.$sce
Hope it can help some of you !
IE in quirks mode is not supported by AngularJS
Thanks for your answer Adam but according to these messages, disabling $sce completely helps AngularJS to support IE in quirks mode...
https://github.com/angular/angular.js/issues/3633
[$sce:iequirks] Strict Contextual Escaping does not support Internet Explorer version < 9 in quirks mode