Web Front end Development Specification manual

I. Normative purposes

1.1 Overview ......................................................................................................................... ............ 1

II. Specification of documents

2.1 File Naming conventions ......................................................................................................................... 1
2.2 File storage location ......................................................................................................................... .2
2.3 CSS Writing specification ......................................................................................................................... .3
2.4 HTML Writing specification ......................................................................................................................... 7
2.5 JavaScript Writing specification ..... ..... ..... ..... ..... ..... ..... ..... ..... ...... ....... ....... ..... ..... ..... ..... ..... ..... ..... ..... ..... ..... ....... ....... 11
2.6 Picture Specifications ......................................................................................................................... .......... 12
2.7 Annotation Specifications ......................................................................................................................... .......... 13
2.8 CSS Browser compatible ....................................................................................................................... 13

I. Normative purposes
1.1 Overview

In order to improve the efficiency of team collaboration, it is convenient for background staff to add functions and post-end optimization maintenance, output high-quality documents, developed this document. Once this specification document is confirmed, front-end developers must follow this document specification for foreground page development. If this document is incorrect or inappropriate, please submit it in a timely manner and you can change it after the discussion has been decided.

II. Specification of documents

2.1 File Naming conventions

The file name is a combination of lowercase English letters, numbers, and underscores, which must not contain Chinese characters, spaces, and special characters; The guiding principle of nomenclature is to make it easy for you and each member of your team to understand the meaning of each file, and second, when we use the "Sort by name" command in a folder, The same large class of files can be arranged together, so that we find, modify, replace, calculate the amount of load and so on.

A. Naming principles for HTML
index.htm index.html index.asp file name (lowercase) for unified use of primers
The principle of naming each sub-page should first be the name of a single word in the English translation of the column name. For example:
About US \ AboutUs
Feedback \ Feedback
Products \ Product
If the column name is many and complex is not good to the English word name, then unified use of the column name Pinyin or pinyin of the first letter expression;
Each directory should contain a default HTML file, the file name is unified with index.htm index.html index.asp;

B. Naming principles for pictures
The name of the picture is divided into two parts, separated by an underscore, and the head part represents the large class nature of the picture.
For example: ads, logos, menus, buttons, and so on.
The image of a rectangle placed at the top of the page, such as an advertisement, a decorative pattern, is named: Banner
The iconic image is named: Logo
A small picture with a link on the page that is not fixed, and we are named button
In a position on the page in succession, the same nature of the link column picture we named: Menu
Decorative photos We name: pic
A picture without a link to represent a title we name: Title
Example: Banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic _people.jpg
The mouse sensor name specification is "picture name +_+on/off".
Example: Menu1_on.gif menu1_off.gif

C. Naming principles for JavaScript
For example: The JavaScript file named Ad.js Pop-up window for the ad strip is named Pop.js

D. Dynamic language file naming principles
By Nature _ Description, description can have more than one word, separated by "_", the nature is generally the outline of the page.
Example: register_form.asp register_post.asp topic_lock.asp

2.2 File Storage Location specification

_root
CN store Chinese HTML files
En store English HTML files
Flash store Flash files
Images storing picture files
Imagestudio storing PSD source files
Flashstudio storing Flash source files
inc Storage Include files
Library Storage DW Library file
Media Storage for multimedia files
Project Storage Project Information
Temp Store Customer Raw material
JS to store JavaScript scripts
CSS to store CSS files

2.3 CSS Writing Specification

Basic principles:

CSS styles can be subdivided into 3 categories: custom styles, redefining HTML styles, and link state styles.
1. The style is a new CSS style customized by the designer, affecting the area used in this style, to complete the local style settings in the page. Style name "." + "The word or abbreviation described by the corresponding style effect" example: ". Shadow"
Text style style name ". No" + "Font size" + "line spacing" + "color abbreviation" Example: ". No12", ". no12-24"
2. Semantic HTML style for designers to redefine the existing HTML tag style, affecting the entire set of label style, used to unify a page of a label's style definition. Style name "HTML Tag" example: hr {border:1px dotted #333333}
3. State style for designers to link different states to set special styles, affect the use of links in this style area.
There are 2 types of styles: A.nav:link Nav.a:link The first can only be modified <a> tags, the second can be decorated with all other tags containing <a> tags.
The style loading within the page must be linked <link rel= "stylesheet" type= "Text/css" href= "Style/style.css" >

Note the details:

1. Collaborative development and division of labor: I will be based on each module, at the same time according to the page similar procedures, written in advance of the general framework documents, assigned to the front-end personnel to achieve internal structure & performance & behavior; Common CSS file base.css by I writing, collaborative development process, each page must be introduced, this file contains reset and the bottom of the head style, this file can not be arbitrarily modified;
2.class and ID use: ID is unique and is a parent, class is repeatable and child, so the ID is only used on large modules, class can be used in high repetition rate and children; The ID is, in principle, named when I distribute the framework file, except for the hooks that are reserved for JavaScript;
3. For JavaScript to reserve the name of the hook, please start with js_, such as: Js_hide, js_show;
4.class and ID naming: Large frame naming such as Header/footer/wrapper/left/right and so on in 2 by the I unified name. Other style names are named by lowercase English & numeric & _, such as I_comment, Fontred, width200; Avoid the use of Chinese pinyin, try to use a simple combination of words; In short, the naming should be semantic and concise.
5. Avoid class and ID name (this article is important, if you do not understand, please communicate with me in time):
A, through the subordinate writing evasion, example see D;
B, take the parent element Id/class named part of the name, example see D;
C, the high repetition rate of the name, please use their own code to underline the beginning, such as I_clear;
D, a, B, two, applies to pages that have already been framed in 2, for example, to add a new div element to the page code <div id= "Mainnav" in 2 that has already been built,
According to the law of a nomenclature: <div id= "Mainnav" ><div class= "Firstnav" &GT;...&LT;/DIV&GT;&LT;/DIV&GT;
Style: #mainnav. firstnav{...}
Press B to name the law: <div id= "Mainnav" ><div class= "Main_firstnav" &GT;...&LT;/DIV&GT;&LT;/DIV&GT;
Style:. main_firstnav{...}
6.CSS attribute Writing order, it is recommended that you follow the layout positioning properties--Self-properties--Text properties--other properties. This article can be written according to its own habits, but as far as possible to ensure that similar attributes are written together. Attribute enumeration: Layout positioning properties include: margin, padding, float (including clear), position (corresponding top,right,bottom,left), display, visibility, overflow, etc. The main properties include: Width & height & background & border; Text attributes mainly include: font, color, text-align, Text-decoration, Text-indent, and so on; other properties include: List-style (List style), vertical-vlign, cursor, Z-index (stacking order), zoom, and so on. The attributes I have listed are only the most commonly used, and do not represent all of them;
7. Before writing the code, consider and improve the style reuse rate;
8. Take advantage of HTML's own attributes and style inheritance principles to reduce the amount of code, such as:
<ul class= "List" ><li> here is the title list <span>2010-09-15</span></ul>
Definition ul.list li{position:relative} ul.list li Span{position:absolute; right:0}
You can achieve the right display of the date
9. The Chinese font name in the style sheet, be sure to transcode to Unicode code, to avoid coding errors when garbled;
10. Background picture Please use the Sprite technology as much as possible, reduce the HTTP request, considering the multi-person collaborative development, the sprite is made by module;
11. When using table tags (avoid using table tags as much as possible), do not use table attributes such as width/height/cellspacing/cellpadding to define the performance directly, and should use the table's own private properties to separate the structure and performance as much as possible. such as Thead,tr,th,td,tbody,tfoot,colgroup,scope; (CSS control methods for Cellspaing and cellpadding: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;}, I will initialize the table style in the Base.css file)
12. Eliminate the use of <meta http-equiv= "x-ua-compatible" content= "ie=7"/> compatible IE8;
13. When using PNG images to make pictures, request the picture format as png-8 format, if png-8 really affect the picture quality or translucent effect, please define the background for IE6 separately:
Background:none;_filter:progid:dximagetransform.microsoft.alphaimageloader (Sizingmethod=crop, src= ' img/bg.png ') ;
14. Avoid the use of compatibility attributes, such as Text-shadow | | The related attributes of CSS3;
15. Reduce the use of properties that affect performance, such as Position:absolute | | float;
16. You must add a comment for the large block style, and a small amount of cell block comment;
17. Code indentation and format: suggested single-line writing, according to their own habits, post-optimization I will be unified processing;

Naming rules:

Head: Header
Content: Content/container
Tail: Footer
Navigation: Nav
Sidebar: Sidebar
Column: Column
Page perimeter control overall layout width: Wrapper
Middle: Left Right center
Login Strip: Loginbar
Logo: Logo
Ad: Banner
Page body: Main
Hotspot: Hot
Press: News
Download: Download
Sub-navigation: Subnav
Menus: Menu
Sub-menu: submenu
Searches: Search
Links: Friendlink
Footer: Footer
Copyrights: Copyright
Scrolling: Scroll
Contents: Content
Tabs page: Tab
Article List: List
Hint Message: MSG
Tip: Tips
Column Title: Title
Join: Joinus
Guide: Guild
Services: Service
Registration: Regsiter
State: Status
Vote: Vote
PARTNER: Partner
(b) The wording of the note:
/* Footer */
Content Area
/* End Footer */
(c) The name of the ID:
(1) Page structure
Container: Container
Page Header: Header
Content: Content/container
Page body: Main
Page End: Footer
Navigation: Nav
Sidebar: Sidebar
Column: Column
Page perimeter control overall layout width: Wrapper
Middle: Left Right center

(2) Navigation
Navigation: Nav
Main navigation: MAINBAV
Sub-navigation: Subnav
Top Navigation: Topnav
Side navigation: Sidebar
Left navigation: Leftsidebar
Right navigation: Rightsidebar
Menus: Menu
Sub-menu: submenu
Caption: Title
Abstract: Summary

(3) function
Logo: Logo
Ad: Banner
Login: Login
Login Strip: Loginbar
Registration: Regsiter
Searches: Search
Functional area: Shop
Caption: Title
Join: Joinus
State: Status
Button: BTN
Scrolling: Scroll
Tabs page: Tab
Article List: List
Hint Message: MSG
Present: Current
Tip: Tips
Icons: Icon
Note: note
Guide: Guild
Services: Service
Hotspot: Hot
Press: News
Download: Download
Vote: Vote
PARTNER: Partner
Links: Link
Copyright: copyright\

Basic style:

/* CSS Document */
body {margin:0; padding:0; font:12px "\5b8b\4f53", San-serif;background: #fff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
table,td,tr,th{font-size:12px;}
Li{list-style-type:none;}
img{vertical-align:top;border:0;}
Ol,ul {list-style:none;}
H1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}
. Fb{font-weight:bold;}
. f12px{font-size:12px;}
. f14px{font-size:14px;}
. Left{float:left;}
. Right{float:right;}

A {color: #2b2b2b; text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {color: #ba2636; text-decoration:underline;}
a:active {color: #ba2636;}

Redefine first, pseudo class second, customize finally, easy for yourself and others to read!

The font size is consistent on different browsers, the font size is recommended in points pt and Pixel px to define, PT generally use Chinese arial 9pt? And 11pt,px generally use the Chinese song Body 12px? and 14.7px? This is optimized font size, bold or italicized word, generally choose 11pt? And 14.7px, the font size is more appropriate. When we mix English and Chinese, we define English and numerals as Verdana and Arial.

2.4 HTML Writing specification

1. Web page Authoring details----Head Area code specification
The head area refers to the content between Tags that must be added
A) Company copyright Note <!---The site is designed by Ehm,inc 07/2005--->
b) Web page display character set
Simplified Chinese: <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
Traditional Chinese: <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
English: <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
c) Web creator information <meta name= "author" content= "[email protected]" >
d) Website profile <meta name= "DESCRIPTION" content= "xxxxxxxxxxxxxxxxxxxxxxxxxx" >
e) search for keywords <meta name= "keywords" content= "xxxx,xxxx,xxx,xxxxx,xxxx," >
f) CSS specification for Web pages <link href= ". /css/style.css "rel=" stylesheet "type=" Text/css ">
g) Page Title <title>xxxxxxxxxxxxxxxxxx</title>
The option to add a label
A) Set the expiration time of the webpage. Once the page expires, it must be re-accessed on the server.
<meta http-equiv= "Expires" Content= "Wed, 1997 08:21:57 GMT" >
b) Prevent the browser from accessing the contents of the page from the local machine's cache.
<meta http-equiv= "Pragma" content= "No-cache" >
c) to prevent others from calling your page in the frame.
<meta http-equiv= "Window-target" content= "_top" >
d) automatic jump.
<meta http-equiv= "Refresh" content= "5; Url=http://www.yahoo.com "> 5 means time stay for 5 seconds
e) Web Search Robot Wizard. Used to tell the search robot which pages need to be indexed, and which pages do not need indexes.
<meta name= "Robots" content= "None" >
The content parameters are all,none,index,noindex,follow,nofollow. The default is all.
f) Favorite icon <link rel = "Shortcut icon" href= "Favicon.ico" >
g) All JavaScript calls try to take external calls.
<script language= "JavaScript" src= "Script/xxxxx.js" ></SCRIPT>
h) attached <body> tags:
<body> tags do not belong to the head area, it is emphasized that in order to ensure browser compatibility, you must set the page background <body bgcolor= "#FFFFFF" >

2. Web page Authoring Details----fonts
1. You must use a CSS style sheet for text font style and line spacing when setting font styles. Suppresses the <font size=?> tag from appearing on the page.

2. In the Web page Chinese should be preferred to use the song body. English and digital preferred to use Verdana? and Arial? Two fonts. 9pt and 11pt or 12px? and 14.7px? This is the optimized font size, bold or italicized word, the general use of 11pt, and 14.7px, the font size is more appropriate.

3. In order to maximize the function of browser automatic typesetting, in a complete text please try not to use <br> to manually intervene in segments.

4. There should be a half-width space between the words in different languages, except for the signs before and after the avoidance of the head, and punctuation between the Chinese characters with full-width punctuation, and the brackets around the letters and numbers should use half-width brackets.

5. Please do not appear in the Web page more than one and try to use less full-width space (the English character set, the full-width space will be garbled), white space should try to use text-indent, padding, margin, hspace, vspace and transparent GIF pictures to achieve.

6. The line spacing is defined as a percentage, and the value of the two leading lines commonly used is line-height:120%/150%.

7. In typesetting we often encounter the need to do the first line indentation, do not use or full-width space to achieve the effect, the standard practice is to define p {text-indent:2em in the style sheet;} then add <p> tags to each paragraph, note that, in general, do not omit < /p> end tag.

3. Web page making details----links
1. The link path in the Web site is all relative paths, and the link path to the default file that is generally linked to a directory does not have to write the full name, as we do not have to: <a href= "aboutus/index.htm" > instead: <a href= "AboutUs /", all the links in the page to the homepage are written <a href="/">

2. In the browser, when we click on the empty link, it will automatically reset the current page to the first end, thus affecting the user's normal reading content, we use the code "javascript:void (NULL)" Instead of the original "#" tag

4. Web page making details----form
1px table style= "Border-collapse:collapse"
Examples are as follows:
<table border= "1" cellspacing= "0" width= "+" height= "+" style= "Border-collapse:collapse"
Bordercolor= "#000000" cellpadding= "0" >
<tr>
<td></td>
</tr>
</table>
Set bright, Dark border color
Table with bright border (bordercolorlight) and Dark border (Bordercolordark) two properties can be set on a table style.
<table border= "1" width= "bordercolorlight=" #000000 "bordercolordark=" #FFFFFF ">

When writing <table> nesting each other, strictly according to the specification, for a single <table> for the,<table><tr> alignment,<td> indent two half-width spaces,<td> If there are nested table,<table> also indent two half-width spaces, if <td> does not have any nested table,</td> end tag should be in the same line as <td>, do not wrap,
As we note, there should be no such code in the source code:
<td>
</td>
And that should be the case:
<td></td>
This is because the browser thinks that the line is equivalent to a half-width space, the above is not the canonical way to inadvertently add a half-width space, if it is necessary to add a half-width space, you should also write:
<td> </td>

A Web page to try to avoid using the entire table, all the content is nested in this large table, because the browser in the interpretation of the elements of the page is displayed in a table, if a page is nested in a large table, then it is likely that the result is when the viewer typed the URL, He had to face a blank for a long time before all the Web content appeared at the same time. If you have to do this, use the <tbody> tag so that you can make this large table chunk display

5. Web page Authoring details----download speed
Home Flash page size should be limited to 200K below, as far as possible using vector graphics and action to reduce the size of the animation. Non-homepage static page with picture size should be limited to about 70K, as far as possible to use the background color to replace large pieces of the same color picture.

6. Web Authoring details----include
ASP standard notation <!--#include file= "inc/index_top.asp"--
JSP standard notation <%@ include file= ". /inc/index_top. JSP "%>

7. Web page Authoring details----ALT and title
are prompt language tags, notice the difference between them.
When we browse the Web, when the mouse hovers over a picture object or text link, a prompt message box sometimes appears in the lower-right corner of the mouse. Make some comment on the target. On some occasions, its role is very important.
Alt is used to prompt a picture. The title is used to give the link text or ordinary text hint.
Use the following:
<p title= "Give link text tips" > Text </p>
<a href= "#" title= "Give link text tip" > Text </a>

8. Web Authoring Details----cache
Web pages are not cached
HTM Web page
<meta http-equiv= "Pragma" content= "No-cache" >
<meta http-equiv= "Cache-control" content= "No-cache, must-revalidate" >
<meta http-equiv= "Expires" content= "0" >
ASP Web page
Response.Expires =-1
Response.ExpiresAbsolute = Now ()-1
Response.CacheControl = "No-cache"

9. Web page Authoring details----Browser compatibility
When you create a site, you should understand that visitors may use a variety of Web browsers. As much as possible, design the site to have maximum browser compatibility under other known design constraints.
There are more than 20 Web browsers currently in use, most of which have been released in more than one version. Even if you are targeting only most Web users who use Netscape Navigator and Microsoft Internet Explorer, you should be clear that not everyone is using the latest versions of both browsers.
The more complex your site (in terms of layout, animation, multimedia content, and interactivity), the less likely it is to be compatible across browsers. For example, not all browsers can run JavaScript. Plain text pages that do not use special characters might be able to display correctly in any browser, but such pages may be much less aesthetically pleasing than pages that use graphics, layout, and interactivity effectively. Therefore, you should try to strike a balance between best-effort design and maximum browser compatibility design.
All HTML tag attributes are enclosed in single or double quotes, i.e. we should write <a href= "url" > instead of <a href=url>

10. Picture Processing details----Banner
The full-size banner is 468x60px, half-size banner is 234x60px, and the small banner is 88x31px.
In addition 120x90,120x60 is also the standard size of small icons. Full size banner no more than 14K.
Universal Banner Size 760x100,750x120,468x60,468x95,728x90,585x140
Pip size for sub-page 360x300,336x280
Cursors: 100x100 or 120x120

11. Image processing details----Logo International Standard specification
To facilitate the dissemination of information on the Internet, a unified international standard is needed. In fact, this set of standards is already in effect. There are three kinds of specifications for the logo of the website:
88*31 This is the most popular logo specification on the Internet.
120*60 This specification for general-size logos.
120*90 This specification is used for large logos.

12. Image processing Details----page retouching image processing
The picture has been optimized to speed up the download, has a better visual space effect, with the page style, page content to match, beautifully crafted, the details are handled properly.

2.5 JavaScript Writing specification

1. In the writing process, each line of code ends must have a semicolon; In principle, all functions are developed in accordance with the requirements of the XXX project to avoid the code pollution caused by the down code of the Internet (Shen Redundant code | | Conflicts with existing code | |);
2. Library Introduction: In principle only the introduction of the jquery library, if the need to introduce a third-party library, the team should discuss the decision with other personnel;
3. Name of the variable: camel-named. Native JavaScript variable requirements are plain English letters, the first letter should be lowercase, such as itaolun; jquery variables require the first character to be ' _ ', the other is the same as the native JavaScript rules, such as: _itaolun; In addition, it is required to declare the variables centrally, avoiding global variables.
4. Class naming: First uppercase, hump-named. such as Itaolun;
5. Function naming: First-letter lowercase camel-named. such as Itaolun ();
6. Naming semantics, using English words or their abbreviations as much as possible;
7. Avoid using methods or properties that have compatibility and resource consumption, such as Eval () & InnerText;
8. In the post-optimization, the JavaScript non-comment class Chinese characters must be converted to Unicode encoding to use, to avoid coding errors when garbled display;
9. The code structure is clear, add appropriate comments. Improve the function reuse rate;
10. Focus on separation from HTML, reduce reflow, pay attention to performance.

2.6 Picture Specifications

1. All page element class images are placed in the IMG folder, the test is placed in the Img/demoimg folder;
2. Image format is limited to GIF | | PNG | | jpg
3. Name all lowercase English letters | | Numbers | | A combination of _, which must not contain kanji | | Space | | special characters; Use easy-to-understand vocabulary to make it easier for other members of the team to understand; Another, named two parts, separated by underscores, such as Ad_left01.gif | | Btn_submit.gif;
4. Select the smallest picture format and image quality in case of visual effects to reduce loading time;
5. Avoid using translucent PNG images (if used, refer to the CSS specification for instructions);
6. Use CSS Sprite technology to centralize small background images or icons to reduce page HTTP requests, but note that you must draw a reference line in the corresponding sprite PSD source map and save it to the IMG directory.

2.7 Annotation Specifications

1.html Comment: note Format <!--here is the comment-->, '--' can only be in the beginning and ending of the comment, not placed in the annotation text area;
2.CSS Comment: note Format/* Here is the comment */;
3.JavaScript comments, single-line comments use '//here is a single line of comments ', multi-line comments use/* Here are multiple lines of comments */;

2.8 Browser compatibility CSS hack

First, the identification difference:
Distinguish Ie6,ie7,ie8,ff.
1. IE can recognize *; Standard browsers (such as FF) do not recognize *;
2. IE6 can recognize *, but does not recognize!important; IE6 in front of the style _
3. IE7 can recognize *, can also identify!important;
4. IE8 can identify \ 9 for example: background:red?\9;
5. Firefox does not recognize *, but can identify!important;

1. The difference between IE6 and Firefox:
Background:orange;*background:blue;
It means that the background color of Firefox is orange, and the background color of IE is blue.
2. The difference between IE6 and IE7:
Background:green!important;background:blue;
It means: The background color of IE7 is green, the background color of IE6 is blue
3. The difference between IE7 and FF:
Background:orange; *background:green;
This means: The background color of Firefox is orange, and the background color of IE7 is green
4. The difference between FF,IE7,IE6:
Background:orange;
*background:green!important;
*background:blue;
It means that the background of the Firefox browser is orange, the background color of the IE7 browser is green, and the color of the IE6 browser is blue.

Ii. Practical Suggestions
(1). The choice of the development platform
write CSS on Firefox, compatible with other browsers. This will certainly be easier than in IE do the other browser compatibility, because IE on the old standard support is very good, and some special features of IE family But not support. So it is recommended to use Firefox combined with Firebug extension as a platform.
(2). The order of CSS Hack
use Firefox as a platform, as long as the code is written enough standards, in fact, there is not a lot of Hack, IE browser is almost no problem, so you can temporarily ignore the
order as follows: Firefox IE6, IE7, other
(3). Hack methods
There are two ways to do this, one for different files, the other for the same file. In fact, the function is the same, but the starting point is not the same.
1. Processing in the same file.
such as: id= "bgcolor" control to show Blue in IE6, IE7 in Green, Firefox and other browsers display red.

IE6 do not recognize!important, also do not recognize *+html. So IE6 can only be blue.
IE7 recognized!important, also recognized *+html, priority: (*+html +!important) >!important > +html. IE7 can be red, blue and green, but Green has the highest priority.
Firefox and other browsers all recognize!important. !important priority, Firefox can be red and blue, but Red has a high priority. The above-mentioned priority symbols are allowed by the CSS3 standard, other browsers also have other hack methods, but I have not yet encountered Firefox normal, Browsers other than IE are not normal, so there is no sharing. As long as the code specification, it is believed that the occurrence of this situation should be very rare (except JavaScript).
2. Processing in different files.
Why the same file can be processed and written in multiple files for different browsers? This is to deceive the web of the verification tool, in fact, only need two files, one for all browsers, and one for IE services only. Write all of the code in one place, and some IE must, It cannot be put into another file by the code (e.g. Cursor:hand;), and then imported in the following way.

2016/11/27 20:00

Web Front end Development Specification manual