English original: 20 Tips for Building MODERN sites
In the past few years, with our web developers spent a lot of time exchange, the most listened thing is to create a well various types of sites across a variety of devices and browser version of how hard it is. We write the code for the jQuery project has been time to have this problem. So we've put together 20 coding mode and experience, they are from attending endless meetings and read hundreds of articles in the special report extirpated. We hope to save you some time (and trouble) when you built them.
Cross-browser basis
Sites do not need rendered the same in all browsers
Things are a common concern of developers to ensure that their website is rendered the same in all browsers, including some non-modern. It is generally not required. Better route is to consider gradually increase your site, provide a reliable baseline for the users of the work of non-modern browsers, but users with modern browsers to provide a richer UI.
Template from the solid begins to simplify development
Many techniques have created a template into the project as HTML5 Boilerplate to save you some time. The guidelines for modern browsers targeted projects and need an old browser (has to fall back to IE6) support for project work equally well.
Focus on stable standard
When a cool new feature that appears very easy and exciting, but some may still be in the technical parameters of the experiment, still in development. It is important to remember that in the early development of the specification is very easy to change, which could affect the stability of your site and your user experience. By concern a stable standard , you can ensure that your users can get their desired experience, your website will be easier to maintain.
Polyfills and prudent use of shims (analog standard API)
If you must implement the experience, the system in different browsers polyfills and shims provides code and label to help API functions and analog standards. To keep in mind is to ensure that the code you are introduced to suit your needs, and can be maintained in the future.
The development of multi-browser testing
Despite the relatively Previously, modern browsers are closer to a unified standard , but there are still different. Occasional multi-browser testing avoid big problems will not find at the last minute - or even been on the line. Make sure to review all IE browser debuggers such as the F12 Dev Tools , check there is no warning or error messages. Some older browsers such as IE7 no built-in debugger, you can use Firebug Lite debug. Or use cross-browser solutions such as BrowserStack
Involved in the process of creating a tool to detect errors and reduce file size
There are a good number of creation tools such as HTML validators , CSS validators , Uglify , JSHint , or GruntJS , they can find potential problems, and enhance the standard item code, reduce the file size to improve performance. If your IDE or code editor supports them, these steps will not be a stumbling block. For example, Visual Studio provides the tools to run outside in the creation process and merge / compress script file capability
HTML
Always use the standard mode to avoid quirks mode
Direct use <! DOCTYPE html> it! Modern quirks mode sites do not need, no need to consider the mid-1990s for compatibility with modern browsers such as IE6 and FireFox 2. Most of today's Web page or document declared invalid in quirks mode, or appear unrelated text. Easily lead to structural abnormalities, and difficult to debug.
Limited understanding backward compatible with HTML tags
The new HTML5 tags such as <section>, <header> and <footer> to improve the semantic tags, but require special helper scripts let them know IE6,7 and 8. Page does not HTML5 tag when the browser is too old or Disable script, then use <div> tags are more reliable in these situations solution.
CSS will be introduced at the top of the HTML file
CSS will lead to the introduction of completely empty page in the document body, the CSS load until after the show. CSS file should be placed in the head HTML document , so that the browser read them as soon as possible.
JS will be introduced at the bottom of your HTML file
The browser will first retrieve, parse and execute scripts loaded, and then render the rest of the page content, to prevent the script creates a new element. After the bottom of the script, the browser may have been rendered page until the script is loaded completely, as soon as possible so that the user loads the page is displayed.
Avoid the HTML script tag
Introducing different from the script, the script tag you need to stop rendering (processing script), hinder analysis and follow-up resources to download the file. This led to the initial page load slow down, or even leaving the dreaded "blank page" experience. And dispersed inline script tag is hard to maintain .
Do not use inline script events in an HTML element
E.g. <button onclick = "validate () "> Validate </ button>. This practice violates the principle of refreshing between labels, presentation, and behavior. Moreover, if the relevant documents at the bottom of the script is really loaded, the user may click on the first page of a trigger event so try to call the script , but the script did not actually load - raises an error!
CSS
Familiar with and use CSS cascading rules
Simple id and class selectors is easy to use, but it also means that the label confusion everywhere can not be reused id and class. The label should be sub-element tags, labels and the same column, id, and a small portion of the tag class composition, css make more simple and generic. Avoid using "! Imporant".
For the future use of the prefix specific property
When developing the new draft, some of the browser vendors will implement the standard by adding a prefix to possible support. To ensure CSS tags available later, with a standard prefix and property name use both the best. The article also provides a JavaScript solution.
CSS for compatibility with an elegant, rather than hack
With CSS hack update your browser does not seem reliable. The solution is for the html or body tag add class specific browser , and use css rules. Conditional comments can also use CSS files needed at a particular browser version.
JavaScript
Always take precedence over the function of detecting browser (navigator.userAgent) detection.
It is determined whether there is a particular function (or error), 'userAgent' string is a bad indicator. More seriously, parsing userAgent code is wrong. For example, a browser detection library expect major version number is a single digit, it will be reported as Firefox 15 Firefox 1, the IE 10 is reported as IE 1! More reliable is the direct detection function or problems , and use it as a standard code branches decisions. We recommend Modernizr , it is the easiest way to achieve feature detection.
As the script is executed immediately after Ready
Technologies such as jQuery's $ (document) on .ready () script in the HTML page is loaded immediately after the execution, but also the first time a script can be safely executed. However, the complex script makes the page seem slow and prevents users immediate action page. So, for example, some of the tooltip (balloon), dialog (dialog) when required to initialize the display does not cause the page Caton.
If the relationship between Ajax user interaction, the sooner the better request
Ajax request will take a long time, and do not need to wait for rendering HTML pages can initiate a request. So, the $ (document) .ready () on the Ajax request is completed callback function better.
Unnecessary delay loading of the script (such as Facebook Like, Google + 1, Twitter).
Everyone wants their website popular on social networks, but the script social networks tend to be large, it may cause the user sluggish response. In requesting these scripts to wait before the page is loaded, you can make the page more responsive. Even better, whether it is necessary to reconsider these buttons, and whether they improve the overall experience of your pages.
Reprinted from: http: //www.oschina.net/translate/cross-browser-best-practices
Reproduced in: https: //www.cnblogs.com/JoannaQ/p/3269283.html