Browser share status quo

In the development process of the major browser manufacturers, they actually have different implementation of the Web standard, because the implementation of the standard is different, so there will be compatibility, early IE is in the browser world, occupy the dominant position. So it implements a lot of things in itself that are different from standard browsers, CSS and JS.

From IE8, IE browser gradually follow the standard, to IE9 after everyone agreed that the standard is very important, can be said to be better in compatibility, but in China, due to the xp share problem, or there are many XP system IE7, 8 browser.
Analysis on the proportion of Operating systems and browsers in China in the fourth quarter of 2018 by China Internet Emergency Response Center (CNCERT) :









Js compatibility problems and solutions

1, js style, currentStyle and getComputedStyle differences

1.1
style: all browsers are compatible, you can set styles and get styles, but you can’t get external styles.
Attr =” value “; ele.style. Attr =” value “;
1.2.
currentStyle: This property is only compatible with Internet Explorer, not Fox and Google
ele.currentStyle.attr;
1.3.
getComputedStyle: This property is compatible with Firefox Google, not IE8 and below
window.getComputedStyle(ele,null).attr
Usually use
getComputedStyleRead the style, pass
element.style Modify the style.
Optional [pseudoElt] attribute: STRING that specifies a pseudoelement to be matched. No pseudo-elements are required to be null
With this attribute you can pull style information from pseudo-elements: for example,
::after, ::before

 getComputedStyle(oDiv, '::after').content;

//

 function getStyle(ele,attr){ 

    if(ele.currentStyle){ 

         return ele.currentStyle[attr] 

    }else{ 

         return getComputedStyle(obj,false)[attr] 

    } 

 }


2. Use event objects

Take Internet Explorer, Google and Firefox as an example:
(1) IE In IE, event is a global variable and there is no scope problem. That is, you can use the event attribute to do anything in an event-bound function. There is no scope limitation, and no other function format requirement.
(2)Chrome Google is also doing well, there is no problem with using it. In Chrome, event is not a global variable. By default, we pass in an event parameter to each event-bound function. Note that the first parameter of the function is the event object, and we do not need to write this parameter. If you want to use an event in an event-bound function, simply use the event. Click on his properties. By default, the event object is passed to the function as a parameter. You don’t have to do anything here, just use it. It’s simple.


Internet Explorer and Chrome may look the same, but there are essential differences, but the browser encapsulates them well.
Firefox is a bit more difficult. Because there’s no event variable in Firefox. But the solution is simple:
1.2.1 No User Parameter Transmission:
To use event, we need to use the following statement
     
var e = arguments.callee.caller.arguments[0] || window.event
     
arguments.callee.caller.arguments[0]:
Function onclick() = function onclick()
   
argument.callee.caller.arguments[0]This is the first parameter event in the pass set.
1.2.2. Pass arguments (event)


3. Get target element:

Compatible writing:
event.srcElement ? event.srcElement : event.target;
SrcElement: ie


4. Of attachEvent and addEventListener

4.1 attachEvent is a method of Internet Explorer that does not follow the W3C standard. Other mainstream browsers that follow the W3C standard, such as FF, use addEventListener, so it needs to be handled separately in actual development.
4.2 The execution sequence varies after multiple binding. AttachEvent is bound first and addEventListener is bound first.
ele.attachEvent('onclick',function(){

console.log('test... ')

})// Ie11 and above are not supported

ele.addEventListener("click",function(){

console.log('ceshi... ')

},false) // Internet Explorer 8 and below are not supported



5. Obtain DOM node:

parentElementGets the parent element in the object hierarchy.
parentNodeGets the parent in the document hierarchy.



In the Dom document structure, each part of the HTML page is composed of nodes, of which there are three types: element node, text node and attribute node. It can be seen from the figure that attribute node belongs to the branch of element node and is generally not considered.


Both under normal circumstances are the same, only because of the containing element node may be element nodes, there may be a misunderstanding here, some people may think whether text node can contain element node, as a parent, there are not enough, the text node is just the text itself, itself is a node, a text node of the parent node is an element node directly.
The only difference:
because
parentElementLooking for the
The element, so when the root document is found, an error is reported with a value of null, and
parentNodeLooking for the
node, of course, you can display it!
bodyDom.parentNode.parentNode.parentNode.parentNode
—#document

bodyDom.parentElement.parentElement.parentElement.parentElement

—null


6. Date function processing

8 the following:
new Date().getFullYear() === new Date().getYear()
: Returns the current year 2019


IE9 standard browser:
new Date().getYear()For the 119
: Yields the difference between the current year (2019) and 1900, 119


7, collection class object problem

Under IE, you can use () or [] to get collection objects. In Firefox, only [] can be used to obtain collection objects.
Solution: uniformly use [] to get collection class objects.


8, compatible mouse button coding

According to W3C standard: 0,1,2 respectively represent left, middle, right three keys;
W3C compliant in IE11 and above + mainstream browsers, but in IE10 and below:
The left, middle and right are 1, 4 and 2 respectively
function but(evt){ 

    var e = evt || window.event;

    if(evt){

       return e.button; 

    } else if (window.event){ 

         switch(e.button){ 

            case 1: return 0; 

            case 4: return 1; 

            case 2: return 2; 

         } 

    }

 }


Other questions raised by 9, 8:

In the ie
window.eventThe difference between a global object and an event access object (the evT argument passed) :


1. The DOM standard describes an Event object that provides information about the element that triggered the Event and allows it to be retrieved in scripts.
2. Event handling in IE
The properties of ie’s global Event object are different from those of the DOM standard Event object, but the data provided is similar.
The difference between:
The main difference between the DOM event model and the IE event model is how the event information is accessed and how the elements that trigger the event are retrieved.
DOM is the need to transmit event reference to the handler function, IE directly through the global event access;
DOM gets the element object that raises the event through the TARfet property, IE through
srcElementProperties.

CSS Compatibility Problems

The first is
is located on the first line of the HTML document, before the < HTML > tag. Tell the browser’s parser what document to use to parse the document. A non-existent or improperly formatted DOCTYPE will cause the document to be rendered in compatibility mode.
Standard mode typography and JS mode are run to the highest standards supported by the browser. In compatibility mode, pages are displayed in a loosely backward compatible manner, mimicking the behavior of older browsers in case the site doesn’t work.

1, the reset

The most important and the most common, is that the browser default support for tags is different, so we want to unify, will be CSS reset. But don’t reset just for reset’s sake:

There are two main problems with CSS reset:

1.1 The default attributes of elements are set to one side, such as div padding and margin 0, which is not necessary

The CSS reset system also writes the Settings for some of the most unusual elements.



2. Overlap between upper and lower margins

Two adjacent divs margin-left margin-right will not overlap, but adjacent margin-top margin-bottom will.


3, TD height problem

Td width in table does not contain the width of border, but TD height in oprea and FF contains the height of border.

Fix: Set line-height to the same as height. In IE if there is no content in TD, the border will not be displayed.


4, compatible with IE8 or IE9 or any VERSION of IE browser

4. 1. Conditional comment (IE10+ no longer supports conditional comment)
Is greater than the gt | | greater than or equal to gte | | less than lt | | less than or equal to lte (
<! --[if gte IE 8]><! [endif]-->)
Use Internet Explorer’s unique way of commenting the document. Like this:
<! DOCTYPE html>

<! --[if IE 8 ]> <html class="ie8" lang="en"> <! [endif]-->

<! --[if IE 9 ]> <html class="ie9" lang="en"> <! [endif]-->

<! --[if (gt IE 9)|!(IE)]><! -->

<html lang="en"> <! - <! [endif]-->

You can maintain and handle ie8 compatible style sheets independently without drowning in a bunch of CSS hacks, just apply style rules to IE8 independently


4.2. Non-ie (IE10+ can also recognize), here the extra <–>, in IE is treated as an internal comment, and in non-IE browsers will close the previous comment (<! –[if !IE]><–><! [endif]–>)
<! --[if !IE]><-->

<div class="box" id="box"></div> 

<! [endif]-->



5. For the 360 dual-core browser

You can add the following header meta information to render a web page with a WebKit kernel:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
IE=edge: Display content in the highest level mode;
Chrome =1: Google chrome Frame plug-in (Google embedded browser Frame GCF). When browsing web pages using Internet Explorer, you actually use chrome core rendering. The minimum support is Internet Explorer 6, but the premise is that GCF has been installed on the client.


But this meta is actually recognized by Internet Explorer and is not an accepted standard, so sometimes you will find that 360 does not always render your web pages in the Chrome kernel to modern standards.


Try this by adding:
<meta name="renderer" content="webkit">
This meta is implemented by 360 itself (details: meta.html), which means that 360 browsers are forced to render web pages using chrome’s kernel. Se. 360. Cn/v6 / help/met…


6, IE8 CSS compatibility

     
6.1 Using meta Tags to Adjust the Browser Rendering Mode:
There is a concept called “compatibility view” in IE8. When IE8 was released, it was a big improvement over IE6/7, but many older sites were only optimized for IE6/7 and rendering with IE8 was a mess. The compatibility View feature was added to IE8 so that pages can be rendered using the IE6 or IE7 kernel. This is certainly not what we want, so we need to use the meta tag to force IE8 to use the latest kernel to render the page as follows:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
IE=edge indicates that the latest KERNEL of IE is forcibly used.
Chrome =1 indicates that if you have installed the Google Chrome Frame plug-in for IE6/7/8, the user can still look like the Menu and interface of IE, but actually use the core of Chrome when browsing the web. Then use Chrome kernel to render.
Compared to 360:
<meta name="renderer" content="webkit">
   

6.2 Some CSS in Internet Explorer 8 are not supported

6.2.1 Internet Explorer 8 supports:
first-child, but not supported:
last-child. Because the former is the CSS2.1 standard, the latter is the CSS3 standard.
The recommended approach is not to use last-child, but to give the last element a.last class and then style it so that it’s all compatible.


            6.2.2
html5shiv.js
IE8 does not support new HTML5 tags such as
<header>,
<nav>Such tags cannot be rendered in IE8. Html5shiv.js helps ie6-8 browsers to be compatible with HTML5 semantic tags.
Use method: reference html5shiv.js file in the page. Must be added to the element of the page, because Internet Explorer must know about the element before it is parsed, so the js file cannot be referenced at the bottom of the page.


            6.2.3.
Respond.js
IE8 does not support CSS media query, which is detrimental to responsive design. Responding.js helps Respond to Internet Explorer 6-8 compatibility
min/max-width“Media search criteria.
How to use it: Reference it after the location of all CSS files on the page
Respond.js. and
Respond.jsThe earlier the page is referenced, the less likely the user will see the page flicker.


6.2.4. CSS3 Font unit “REM” Compatible scheme:
rem.js
CSS3 introduced a new font size unit rem, which is different from EM’s function of “setting font size relative to its parent element”. Rem is a font size ratio unit relative to the root element < HTML >, which has become one of the mainstream units at present. When IE9+ started supporting it, IE8 could only support it by introducing JS libraries.
How to use: Reference rem.js file in the page. References are required at the footer, at the end of , after all CSS file references and DOM elements.




6.2.5. Some other unsupported properties:
Border – radius rounded corners
Box-shadow Box shadow
CSS3 Background gradient


7, placeholder

Versions below IE10 – are not supported (the prompt can be simulated by using a SPAN tag.)


About CSS optimization:

1. Don’t use wildcards like *{}

While this method is simple to write, rendering is inefficient because the browser engine has to traverse all the tags. To be browser-friendly, you can reset your frequently used tabs.


2. Minimize the use of high performance attributes such as absolute positioning and floating

Although absolute positioning can be very simple to achieve a great effect, but due to the rendering mechanism of the browser, if too much absolute positioning in the web page, it will make the web page load speed becomes slow.


Use CSS inheritance to reduce the amount of code

We know that some CSS code can be inherited, and if the parent element has already set the style, the child element does not need to set the style, which is also an effective way to improve performance.
Common inheritable attributes are:
Color, font-size, font-family, text-align, line-height, etc
Uninheritable such as:
Position display float display background. Width, etc.


CSS Sprites reduce HTTP requests

The small icon is requested by controlling background-position with a Sprite image


5, co-write CSS:

font
background
padding
margin


6. Don’t restrict ID rules with tags or classes

Many people write selectors like #test.info or div#test, which is just icing on the cake. Id is already a unique and fastest way to locate an element


7. Avoid wildcard selectors

The performance impact of CSS selectors comes from the time it takes for the browser to match the selectors and document elements, so the principle of optimizing selectors is to avoid selectors that consume more matching time. Before we can do this we need to understand the mechanism of CSS selector matching, such as the child selector rule for example:
#header a {font-weight:blod; }
Most of us read from left to right and probably programmed our browsers to match rules from left to right as well, presumably because it’s not too expensive. Let’s pretend that the browser works like this: find the unique element with the ID header, and apply the style rule to the A element in the immediate child element. We know that there is only one element with id header in the document, and that it has only a few child nodes of type A, so this CSS selector should be pretty efficient.
In fact, on the contrary, CSS selectors match rules from right to left. Knowing this mechanism, the seemingly efficient selector in the example is expensive to match in practice, and the browser must traverse all the A elements in the page and determine whether the parent element’s ID is header.
It would be more expensive to change the example’s child selector to a descendant selector, traversing all the A elements in the page up to the root node.
#header a {font-weight:blod; }
Now that we understand how CSS selectors match from right to left, we can understand that the right-most rule in the selectors often determines how much work the browser does to move to left. We call the right-most rule a key selector.
The wildcard selector uses the * match representation to match every element in the document. Here’s an example rule that sets the font size for all elements to 20px:
* { font-size:20px; }
Wildcard selectors apply to all elements, such as wildcards on the far right of the rule:
.selected * {color: red; }
The browser matches all the elements in the document and then matches the element with class selected up to the root node of the document. Therefore, the matching overhead is very high, usually 1 to 3 orders of magnitude higher than the least expensive ID selector, so avoid the rule that the key selector is a wildcard selector.

Avoid single-rule property selectors

Attribute selectors match elements based on the presence or absence of an attribute or its attribute value. The following rule sets link elements whose HERf attribute value equals “#index” to red:
. Selected [href = “# index”] {color: red; }
The browser matches all elements with the href attribute and herf value equal to “#index”, and then matches elements with class selected up to the root of the document. So avoid rules where the key selector is a single-rule attribute selector.


Avoid property selectors for regular classes

CSS3 adds sophisticated attribute selectors that match element attribute values in a regular express-like manner. Of course, these types of selectors certainly affect performance, and regular expression matching can be much slower than class-based matching. In most cases we should try to avoid using * = | =, ^ =, $=, and ~ = grammatical attribute selectors.


10. Remove unmatched styles:

Removing unmatched styles has two benefits:
First, deleting unnecessary styles can reduce the size of style files and speed up the download of resources.
Second, as far as the browser is concerned, all style rules are parsed and indexed, even if there is no match on the current page. Remove unmatched rules to reduce index entries and speed up browser search.