My website uses a variety of technologies, such as JQuery, new CSS definitions (e.g., moz-selection, -webkit-user-select), etc.
The site works perfectly with Google Chrome and Safari, but has some quirkiness in Firefox, IE, and some of the other browsers.
I want to write a script to check for necessary browser features but, with several thousand lines of code and CSS definitions, I'm not certain which features I should be looking for.
Is there some sort of online analysis (similar to how JSLint operates) that would tell me which features my script and CSS files need? Are there tools (like FireBug) that provide this info?
I don't think ull ever find that fabulous script.
As an alternative Modernizr and IE7 JS will probably satisfy most of your needs for now.
Related
MDN defines 'progressive' in progressive web apps as -
Modern web apps can be developed to provide a super cool experience to
fully capable browsers, and an acceptable (although not quite as
shiny) experience to less capable browsers. We've been doing this for
years with best practices such as progressive enhancement, so let's
keep up the good work.
I understand that in terms of javascript features, we can use if-else conditions to check for existence of feature and handle it appropriately.
But what are best ways to do this for HTML/CSS ?
The google / MDN documentation lay strong emphasis on checking for JS features, but have no documentation for html/css.
My use case is to build a web app that has modern features, but still works on all kinds of browsers (including proxy browsers like Opera Mini and UC Browser).
By using a script library called Modernizr you can add checks for different HTML5/CSS3 features into your pages with a minimal amount of code,
To generate a production script, the site provides a custom script generation tool rather than providing a single script that has everything for HTML5/CSS3 feature detection. Using the script generation tool you can pick the specific test functionality that you need and ignore everything that you don’t need.
Here is great article on how to use Modernizr
If you want to go beyond modernizr, you can start using new CSS rule #supports for feature detection. This rule is part of the CSS3 Conditional Rules Module. Thanks to this rule, you can selectively apply CSS styles only when browser supports them. Otherwise, the browser will ignore these styles. It’s syntax is very similar to CSS media queries.
In case you need to check the availability of CSS features for expample backdrop-filter within Javascript you can use:
CSS.supports("backdrop-filter", "blur(10px)")
In a condition:
if (CSS.supports("backdrop-filter", "blur(10px)")) {
// some code when supported
} else {
// some code when not supported
}
This works not for Internet Explorer so if there is a fallback it's better.
I intend to modify the display of existing websites.
For example, when Google returns search results, can I customize the web page displaying (such as adding some bubble visualizations onto that page's blank places) ? Could it be done using browser plug-in or extension?
Based on my knowledge, a browser extension, such as firefox or chrome extension, is usually for adding tiny icons to the address bar.
Could it be done using browser plug-in or extension?
Yes. But you don't want to write a browser plug-in. They're fairly complicated to write and users are reticent to install them (with good reason) Further, you'd have to write two, as Mozilla and Google can't agree on a format (Chrome is removing the venerable NPAPI, but Mozilla won't implement Google's PPAPI, claiming that it's a moving target with inadequate documentation).
Based on my knowledge, a browser extension, such as firefox or chrome extension, is usually for adding tiny icons to the address bar.
No. Firefox add-ins and Chrome extensions can do a lot more than that, including modifying the page once it's rendered.
So you'll probably want to write a Firefox add-in and a Chrome extension. (Sadly, yes, that's two codebases to maintain, although they use similar technologies — HTML, CSS, JavaScript — so you can share a bit between them.)
With respect to HTML/web .... The_principles_of_unobtrusive_JavaScript
points out that in some cases there won't be any JavaScript support.
Do such environment - without JavaScript still exist or this is an old article ?
The article you posted is long. It does cover many practices that are good to use today. I wanted to address a few statements the article made on assumptions.
Assumption: everybody’s browser supports JavaScript. Not true: In
order to be unobtrusive to users, taking away the script should not
preclude them from using your site, even though their interaction will
be far less rich than that of users whose browser does support
JavaScript.
All major browsers such as Chrome, Safari, IE, Firefox, and Opera support Javascript. Users may manually disable it, but you can assume most of your users will have Javascript. However, you can use a <noscript> tag as a precaution for users that do not have Javascript running. The data in The <noscript> tag will only be displayed if javascript is not running.
Assumption: all browsers work the same. Not true: In order to be
unobtrusive to browsers, your script should steer clear of plain
errors and compatibility problems, and take special devices such as
speech browsers or mobile phones into account.
All browsers do not work the same. You need to be careful with Javascript and CSS (style) to support all the major browsers. Certain functions may be depreciated or unsupported in some browsers.
Assumption: everybody else will understand my code. Not true: In order
to be unobtrusive to fellow programmers, your script should consist of
clear, clean code and feature a lot of comments to say what your code
is (supposed to be) doing.
You should always try to make your code affective and clear.
I'm developing a web application that uses lots of Javascript and CSS, both of my own creation and through third-party libraries. These include jQuery and Google Maps & Visualization JS APIs.
I've been testing everything in Firefox 3. Things are peachy until it turns out the main target of this webapp is (cue sad trombone) IE7. I'm looking for caveats, advice, libraries, or other references to help make this transition as easy as possible (not that it's actually going to be easy).
I've already tried IE7.js though it hasn't yet shown itself to be the silver bullet I was hoping for. I'm sure that it works as advertised, I think it's just not as all-encompassing as I'd like (example: colors like #4684EE and #DC3912, which are correctly rendered in FF3, are rendered as black in IE7, with or without IE7.js). Are there other libraries out there to help bring IE7 (more) in line with FF3?
A corollary question: what debugger would you recommend for IE7? I'm currently using Firebug Lite, but it runs painfully slowly. Is there anything out there with similar features that I might have missed?
As far as libraries go, jQuery is compatible across all major browsers, so at least you've got that going for you. Without knowing exactly which plugins/modules/libraries you're using, I can't recommend alternatives that are cross-browser compatible.
You could take a look at the Internet Explorer Developer Toolbar. It isn't nearly as good as Firebug, but it's better than nothing.
Get the IETab add-on for Firefox so that you can fire up IE right inside the same tab you test Firefox in. Get the FULL version of Firebug. It will be perfect for you to deal with HTML, CSS, and scripting. HTMLValidator for validating your HTML and CSS. The Web Developer toolbar is a MUST if you don't have it. I can't even go into a fraction of the benefits it has, from images to source viewing to validating scripts it has a lot.
I use a separate stylesheet for IE7. It doesn't have many changes from the original stylesheet, but enough to make viewing in IE7 close to FF. I try not to do ANYTHING for IE6. In fact I encourage the "downfall" of IE6. It's almost ten years old, and full of bugs, and unsupported now!
Unfortunately, Microsoft doesn't really want to be on the same page as the W3C and developers that want web standards so that you don't have deal with what you're going through right now. Regardless of what they SAY, they're still "competing" against the other browsers for control, and it's hurting the developers.
Writing cross browser code is a big topic - you can't really generalize it into "don't float left and padding-left" statements and be done.
Separate stylesheets for ie are messy and not needed IMO.
Generally speaking, firefox fixes broken code in a good bit of cases, so there is a chance that at least some of your stuff looks bad in IE because of open tags that firefox is fixing for you.
Re-slicing a site that's already done might be your easiest way. You should be able to completely redo the CSS from scratch in a few hours tops.
But all this is advice that may not apply - it would be easier to see the code you're talking about.
I have developed a html file. It is working fine in IE6 and IE7. When I run the same html file in IE8, the design is not the same and the Javascript is not working properly. It is showing browser's "Compatibility view"?
How do I fix this?
It is difficult to really help you as you are not giving us enough information. Your question is very broad in the sense that getting your website to display the same in all browsers is a lot of work and the reasons why a particular layout is not working in a particular browser are just about infinite.
A few important things to get you started on your journey, though:
Use a DOCTYPE or you'll throw browsers into quirks mode.
Reset your CSS so you can apply the styles you want to elements.
Use a Javascript library - the popular one around these parts is jQuery, and it is the one I personally recommend. However, it doesn't really matter which one you go with as long as you use one. A lot of smart guys have put a lot of hours into taking care of all the incompatibilities between browsers. Trying to do a lot of dynamic stuff on your website with pure Javascript is bordering on masochistic.
Once I started doing these things, making my site work the same across browsers got a whole lot easier.
Give this a read, it details the things that cause IE8 to switch to compatibility mode, and how to fix them.
http://blogs.msdn.com/ie/archive/2009/03/12/site-compatibility-and-ie8.aspx
You must give us some example codes (or even working website) and do something like:
Website validation (html markup, css and javascript)
Test it on another modern browser (opera, firefox, chrome, safari, etc)
Do you adhere to web standard when building web?
Do you rely on CSS hacks?
Did you know that Trident rendering engine on IE6 & IE7 didn't even pass ACID 2 test? which mean have a lot troubles with CSS implementation...
Then we might be can help you