20 tips for building a modern site and supporting earlier IE versions

After jumping in, you will have the following combination of Chinese, English, and Arabic numerals. Please note that, as a victim of Web Front-end development, I have no reason not to forward this article, saying that the relationship between "all sentient beings" and me is not half a cent, only to make you complain less.

Over the past few years, we have spent a lot of time communicating with Web developers. The most common thing we hear is that it is very difficult to build websites suitable for various browser versions and devices. We personally experienced this difficulty when building code for the jQuery project. To this end, we have compiled the top 20 coding modes and practice lists, which were selected after attending numerous meetings and reading hundreds of tutorials. We hope they will save you some time (and solve the problem) When you build your site ).

Cross-browser Basics

1. The site does not have to be rendered in the same way in all browsers

   A common concern for developers is to ensure that their sites are consistent across all browsers (including non-modern browsers. In fact, this is not necessarily the case. A better way is to provide a practical and smooth user experience to users using non-modern browsers, while providing richer UIS to users using modern browsers, to gradually enhance your site.

2. Start with a reliable template to simplify development.

   Many of these prompts have been built into projects such as HTML5 Boilerplate, which can help you save some time. These rules are equally valid for modern browser-oriented projects and projects that need to be supported by older browsers as low as Internet Explorer 6.

3. Pay attention to stability standards

   Every time a brand-new feature appears, it is always amazing, but some of the features are still in the experimental stage, and their specifications are still under development. It is important to remember that functions in the early stage of standard development may change, which may affect the stability and user experience of your site. By following the stability standards, you will ensure that the customer can get the expected experience, and your site is easier to maintain.

4. Use IE Compat Inspector to help migrate the site to standard-based code

   Standards are the core part of Internet Explorer 10. For the IE engineering team, it is important to help developers migrate their code to take advantage of this advantage. To this end, they created IE Compat Inspector, which can analyze sites in real time, identify common problems, and provide solutions. By adding a simple JavaScript file to your code, you can see the statistics in the upper-right corner of the page. It can also be integrated into the Fiddler HTTP analysis tool.

5. Use polyfill and shim with caution

   If you need to provide the same experience in all browsers, the code and markup provided by polyfill and shim can help mimic standard-based APIs and functions. The key point to remember is that you need to fully check the Code to ensure that the Code meets your use case, and you can support continuous code development.

6. Test in multiple browsers at the same time of development.

   Although modern browsers are closer to a single standard than ever before, there are still differences. The multi-browser health check is performed occasionally during the development process to ensure that serious cross-browser problems do not occur at the last moment, or even suddenly after the full disclosure. Check the console of Each browser (such as the F12 developer tool in IE) to see if any error or warning message is displayed. You can use Firebug Lite to provide the console for old browsers (such as IE7) that do not have a built-in console. Alternatively, you can use a cross-browser hosting test solution, such as BrowserStack.

7. Use tools to check errors and compress files during the build process.

   There is an excellent set of building tools (such as HTML verification programs, CSS verification programs, Uglify and JSHint, or GruntJS) to locate potential problems and enforce project code standards, and reduce the file size to improve performance. These steps are not an obstacle if your IDE or code editor provides support. For example, Visual Studio can run external tools during its build and merge/compress script files.

HTML

8. Always use standard-based document types to avoid the Quirks mode.

   From <! DOCTYPE html>. Modern Web cannot accommodate the Quirks pattern, which was initially designed to make Web pages in the 1990s s available in the "modern" browser (such as IE6 and Firefox 2) that alternate the century. Today, most web pages are accidentally closed in Quirks mode because invalid document types or Redundant text before document types are involved. This may cause strange layout problems that are difficult to debug.

9. Understand the backward compatibility limitations of HTML5 tags.

   The new HTML5 tags (such as <section>,

10. Place the CSS file reference at the top of the HTML file.

    Placing a CSS file in the body may cause the browser to display a blank page before the CSS file is loaded. CSS files should be placed in the HTML document header to allow the browser to read these files as soon as possible.

11. Place the JavaScript file reference at the bottom of the HTML file.

    The browser must search, analyze, and execute the script file represented by HTML tags before continuing to analyze the remaining parts of the file to prevent JavaScript from writing new tags to the page. When the script is at the bottom, the browser can also render the page before the script is complete, so that users will feel that the page loading is faster.

12. Avoid inline JavaScript labels in HTML tags.

    Like external Script Reference, inline scripts require the browser to stop HTML analysis and prevent parallel download of other resources on the page. This may seriously reduce the initial loading speed of the page and give the user a terrible "blank page ". Scripts that mark the surrounding distribution are also more difficult to maintain.

13. Do not use inline JavaScript events in HTML tags.

    The example includes <button onclick = "validate ()"> Validate </button>. This method destroys the complete separation between structures, styles, and actions. In addition, if the script is loaded at the bottom of the file, the user can interact with the page and trigger an attempt to call the event of the script that has not been loaded, resulting in an error.

CSS

14. Understand and use CSS cascading rules.

    Simple IDs and class selectors are very useful, but using them in an exclusive manner means that with unnecessary IDs and classes, tags become more messy and reusable. Combining tags, descendant, child level, peer level, and attribute selector with a small part of IDs and classes makes tag and CSS easier and more common. Avoid "!" in any case. Important rules.

15. Add a prefix to all supplier-specific CSS attributes so that they will not expire.

    As new draft standards continue to evolve, browser vendors sometimes lead standards by adding property support for private prefixes. To ensure that CSS will continue to work in the future, use the names of all vendor prefixes and names without prefixes. This blog article provides an alternative to common JavaScript.

16. Use valid CSS rules instead of CSS hack to solve compatibility issues.

    CSS hack is not reliable because it may cause hack failure after the browser is updated. Instead, try to add a version-specific class to the html or body tag that can be used in style sheet rules. Conditional annotations can also be used to include browser-specific CSS files only in a required version.

JavaScript

17. Always prefer function detection instead of browser (navigator. userAgent) detection.

    The userAgent string cannot effectively indicate whether a specific function (or bug) exists. In addition, most of the userAgent code is not correctly interpreted. For example, a browser probe library requires that the main version be single-digit, so it reports Firefox 15 as Firefox 1 and IE 10 as IE 1! A more reliable method is to directly detect functions or problems and use them as decision criteria for code branches. According to our suggestions, Modernizr is the easiest way to implement function detection.

18. Run as few scripts as possible when the document is ready.

    After the system loads the HTML on the page, such as jQuery's $ (document ). ready () and other technologies make it easy to run scripts, which is usually the earliest time when scripts can run securely. However, running a large number of complex scripts may slow the page display and prevent users from performing real-time interaction with the page. In general, initialization of content such as tooltip or dialog box can be delayed until the project needs to be displayed, without any obvious discontinuous effect.

19. If AJAX requests are critical to the interaction between users and pages, they are initiated as soon as possible.

    Because AJAX requests may take a long time, you do not have to wait until the HTML page is ready to start the request. Instead, you should place the $ (document). ready () call in the AJAX completion function.

20. Delay loading of unnecessary scripts (such as Facebook Like, Google + 1, and Twitter ).

    Everyone wants their pages to become popular on social networks, but social network scripts are often large, which may lead to slow response to users. Wait for the page to load before requesting these scripts, which can make the page response faster. A better way is to reconsider whether these buttons are necessary and whether they can improve the overall experience of the page.

Author:
Dave Methvin
Rey BangoDave Methvin @ davemethvin

Dave Methvin, chairman of the jQuery Foundation and chief developer of the jQuery Core team, joined the jQuery Community in 2006. Since 1996, he has been committed to creating JavaScript and HTML Web solutions.

Http://blog.methvin.com

Rey Bango @ reybango

Rey Bango is a Microsoft technical evangelist for all Web standards. If he is not coding, He will give a speech, write a blog, send a tweet (and so on ). He was a member of the jQuery Core team and created ScriptJunkie and wrote something for Ajaxian.com.

Http://blog.reybango.com/

Share

Article