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
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.
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.
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.
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.
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.
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.
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.
The new HTML5 tags (such as <section>,
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.
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.
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.
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.
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.
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.
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.
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.
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.
Http://blog.methvin.comRey 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.