Main browser kernel features and corresponding browserhacks examples

1. What does the browser kernel refer to?

Simplified browser = user interface + rendering engine +JS parsing engine + data storage + Network parts

The browser kernel , in general, refers to the page rendering engine (rendering engines).

2. Rendering engines the rendering engine

The job of the rendering engine is to render, that is, to display the requested content in a browser window.

By default, the rendering engine can display HTML, XML documents, and pictures, and it can also display other types of data with a plug-in (a browser extension), such as a PDF reader plug-in, which can be displayed in PDF format.

The major manufacturers according to the standards have their own code implementation, the development of many kinds of rendering engine.

Browser kernel	On behalf of the browser
Trident (IE)	Ie4~ie9,maxthon,the world, and many browsers with compatible browsing modes
Gecko (Firefox)	Netscape,mazilla Firefox (Firefox)
Presto (OBSOLETE)	Opera7.0+,ndsbrowser,wii Internet Channle
webkit/Chromium	Apple Safari, Android default browser, Chrome (Google browser) 360, QQ, roaming, Sogou browser, opera now also transferred to WebKit
Blink	Developed by Google based WebKit, Android 4.4+ above built-in browser,/qq/built-in browser

Browser kernel	Kernel features
Gecko (Firefox)	Gecko is characterized by the full disclosure of code, cross-platform
webkit/Chromium	Currently the most widely used kernel. Chromium is the core of Google's further improvement based on WebKit. Chromium supports multi-threaded HTML parsing.
Blink	Blink is an upgraded version of WebKit, Android 4.4+ above built-in browser,/qq/built-in browser is this

The prevailing trend is that the rendering engine based on the open Source engine is becoming more and more prosperous, and showing the status of hundreds of places, and the mobile end due to the performance requirements more stringent, the emergence of more excellent engine.

The future of good engines should have: open source, cross-platform, highly consistent with the characteristics of the standard.

3. Browser css hack and JS hack example

Some browsers do not have the same syntax, different effects, or even support for some of the CSS, and need browserhacks technology for browser compatibility (which is consistent across browsers).

1. /* CSS hack*/

Using hacker I can divide the browser into 3 categories: IE6, IE7 and Roaming, others (IE8 Chrome FF Safari Opera, etc.)

IE6 know Hacker is the underscore _ and the asterisk *

IE7 Hacker is an asterisk *

For example, there is a 3-segment connected CSS setting:

1. height:300px;*height:200px;_height:100px;

IE6 under:height=300px->200px->100px; (CSS covers all the way to the end)

IE7 under:height=300px->200px; (last one does not know)

Other browsers: height:300px; (back two not known)

See this article for more CSS hack

2./* JS hack*/

Use JS to determine the current browser.

1. Using the UserAgent attribute value

1. /* Firefox */  var IsFF =!! Navigator.userAgent.match (/firefox/i);  

   But most browsers offer useragent custom modifications, so they're not trustworthy.

2. Take advantage of browser-specific objects

/*ie<7*/ varIsie = document.all &&!Document.queryselector;/*ie8~10*/varIsie = document.all &&Document.queryselector; /*ieversion*/ varIeversion =/*@cc_on (function () {switch (@_jscript_version) {case 1.0:return 3, Case 3.0:return 4, Case 5.0:return 5, Case 5.1:r Eturn 5; Case 5.5:return 5.5; Case 5.6:return 6; Case 5.7:return 7; Case 5.8:return 8; Case 9:return 9; Case 10:return 10;}}) () || @*/0; /*Firefox*/varIsFF =!!Window.sidebar; /*Chrome, opera≥14, Android 4.0.4*/ varIschromium =!!Window.chrome;/*Webkit*/ varIswebkit = ' webkitappearance 'inchDocument.documentElement.style; /*opera≤9.64*/ varIsopera =/^function \ (/. Test ([].sort);/*Opera*/ varIsopera =!!Window.opera;/*Safari*/ varIssafari =/constructor/i.test (window. HtmlElement);

More JS hack See http://browserhacks.com/

4. There is also media Queries (my understanding is screen fit)

The common syntax is:

1. Write CSS for different screen types, placed in HTML header

<link href= "Css/reset.css" rel= "stylesheet" type= "text/css" media= "screen"/>

<link href= "Css/style.css" rel= "stylesheet" type= "Text/css" media= "All"/>

<link rel= "stylesheet" media= "handheld and (max-width:480px), screen and (min-width:960px)" href= "Small.css"/>

2. use in style files:
@media Screenand and (max-width:600px) {
selector {
Attribute: property value;
}
}

Reference articles

Http://www.iplaysoft.com/browsers-engine.html

Http://www.cnblogs.com/zfc2201/archive/2012/07/14/2591108.html

Http://www.cnblogs.com/asqq/archive/2012/04/13/2445912.html

Main browser kernel features and corresponding browserhacks examples