Summary of HTML5+CSS3 compatibility issues

The overflow problem of Android2.3

In android2.3 and the following system versions of the browser does not support Overflow:scroll/auto, that is, the content inside the page element if the height of the parent element or ancestor element is not scrollable, you can scroll through the transform of CSS3, Masterpiece: Iscroll.

The focus problem of Android2.3

Android2.3 will appear in the case of click Focus, a yellow border, by the corresponding element set Css–webkit-tap-highlight-color:rgba (0,0,0,0) resolution, and some of the higher version of the system may also appear with a yellow border case , this time try to use Outline:none to solve.

Android2.3 position:fixed and input Chinese bug

In the android2.3 system, if the page has position as the fixed element, the input outer element is positioned as relative or its own positioning for the relative, it will produce a strange phenomenon, input numbers in input or letters are very normal, when switching the input method to Chinese, send Now can not be entered, when the position set to absolute after everything is normal, all when encountering this situation can only change the layout.

Android2.3 Border-radius Problems

Does not support percentages, a larger value can be used such as: 9999px.

Android2.3 Animation problems

@-webkit -keyframes wave1{0%{< Span class= "PLN" > Opacity:0;} 8.33%{ Opacity:1;} 99%{opacity: 1100%{}}        

100% to leave a frame empty. Write a last value of 99% there before 100%. The animation of the 2.3 system will only move.

Android2.3 gradient Problem

Gradients are 2.3 compatible:

Background:-Webkit-Gradient(Linear,00,0100%,Color-Stop(1%,Rgba(111,191,7,0)),Color-Stop(74%,Rgba(111,191,7,0),  color -stop (75%, rgba (111,191 ,7,0.9),  Color-stop (100%,rgba (111191,7,0.9                

Linear refers to the way the gradient, 0 0 refers to the direction from which to start. 0 0 to 0 100% description is gradient from top to bottom. The following color-stop can specify percentages and color values.

Android4.0 and low-version system touch event bug

In the android4.0 system, there are some sub-version of the system has a touch event bug, the performance of Touchstart is normal, touchmove only when the touchstart triggered when the trigger, Touchend will not be triggered, android2.3 will trigger Startm Ove once, when touch finishes, the remaining move and end are executed. This issue has not been resolved in the Zepto library, This problem also exists in the android4.2 system, and it was later discovered that the browser had the event cancel tuned to prevent it from being called when scrolling the page, so add E.preventdefault () to the Touchmove event, Touchend was found to be triggered, so the solution is handled according to the actual usage scenario.

android4.x placeholder Problems

Placeholder text font will be biased. But placeholder can only set his color. Such as:

Input::-webkit-input-placeholder{color:red;}   

Row height cannot be set. When the line-height is set to normal, it can be centered up and down.

Support for position:fixed for each system

Mobile phone safari–ios5 and later versions are supported. IOS4 and the following versions are not supported and will be treated as static.

Android

• Android 2.1 and the following versions are not supported.
• Android 2.2 does not maintain a fixed position during scrolling and returns to the fixed position when scrolling is complete.
• Android 2.3 supports fixed, but requires the page to disallow zooming.
• Android 3 and 4 support fixed.

Touchstart, click, tap Event Analysis

On the mobile side we will often use the touch event, the Touchstart event is very sensitive, all if you want to bind a PC-like click event, with Touchstart will often mistakenly operation, such as scrolling the page is delayed, all the market has a lot of gesture library, It encapsulates the tap and so on, while the mobile click event can also be triggered, the Click event will start around 300ms (because the browser wants to decide whether to double-click), the original explanation see Google this [Creating Fast Buttons for Mobile Web Applications] (Creating Fast Buttons for mobile Web applications), personal experimentation, page element Click can be considered with click, and tap Effect no significant difference, So in the absence of a gesture library, you can consider using click to handle the user's click behavior.

Disable WebKit browser default style

Input,button on WebKit, and the default style for select can be disabled by –webkit-appearance:none and then customized.

Placeholder Adaptive bug

A placeholder adaptive bug, the use of tags in the page <input> and attributes placeholder, the page screen and then back to the vertical screen, will cause the page can not be self-adaptive, whether it is Android or iOS will be.

The workaround is to <input> add Overflow:hidden to the outer container

No refresh to change the current page URL problem collation

Problems with Android 2.3 system:

1. No refresh changes the current page URL. The Onpopstate method is not supported and can be replaced by the Onhashchange method.
2. Although the Pushstate method and the Window.onpopstate method of the history are supported. However, the Window.onpopstate method is not triggered when you press the fallback key, that is, when history.back () occurs. Only the Hashchange event is triggered.

Browser's overall support for popstate events:

1. The pushstate of history can manipulate the browser histories and change the URL of the current page. Add the corresponding URL to the history record. However, using the Pushstate method produces a history that can be replaced by the Replacestate method and does not generate additional historical records.
2. When the Hashchange and Popstate events are triggered, the hash has changed and the default behavior cannot be blocked. That is, E.preventdefault () does not work.
3. The Pushstate () method never triggers the Hashchange event
4. Trigger conditions for the Popstate method:

* Triggered when the page goes forward or backward.
* Trigger when Hashchange
5. How to jump
* If there is pushstate in the history stack, jump back to the hash page set by Pushstate. such as Window.history.pushState (' object ', Document.title, "#explorer"); #explorer page
* Without pushstate, go back and forward according to the history record.

Iscroll Plugin Issues

Iscroll plug-ins are used in many webapp applications to scroll the list, setting the Translate property can make scrolling smoother, However, when the translate attribute is turned on in iscroll4.0, the scrolling cannot be stopped manually, and some people in the question and answer community say that ISCROLL5 will solve the problem, and ISCROLL5 can try it after the official release. Iscroll on iOS, but in some Android phones, especially low-end machines, performance is not very good, so use should be cautious.

Resource sharing (from the network)

Recommend a PPT can give you a comprehensive understanding of html5:http://slides.html5rocks.com/

The HTML section includes the familiar HTML4.01 standard http://www.w3.org/TR/html401/and the HTML 5 candidate recommendation HTTP that is about to become standard ://www.w3.org/tr/html5/

HTML5 adds more semantic tags to the HTML4 base, such as:

<nav>
<section>
// 这有太多了，就不一一细说

And on the original tag, more markup attributes have been extended, such as:

<input type="text" required />
<input type="email" value="[email protected]" />

HTML5 In addition, there are many new tags and attributes introduced, such as: webapp Development direction of progress, barrier-free browsing aria, SEO optimization microdata and so on.

HTML Standard List

The CSS section is also the same, as you have already known CSS2 standard

The latest is the CSS LEVEL3 standard, because CSS3 contains a lot of content, documents are separate, temporarily no way to give all the standard address, first paste part of the Common standard bar:

CSS Standard list

CSS Selector CSS Picker

Transition Animation Transition Effect

Animation page Animations

JS section for HTML5 mainly reflected in the Web API aspect, all API is BOM object, below I also listed some common standard address:

List of standard JavaScript API standards

Touch Events gestures

Geolocation location

Web Storage Web Storage

With the above content, you probably already know what HTML5 is, and here are some of the resources that HTML5 development app can use. In fact, HTML5 development and the previous web does not have the essential difference, the main difference is reflected in the HTML5 of some new features and is not well supported by the old class library, so you need some more modern class library to use HTML5 to do development.

JS Library/Frame

Lightweight libraries include

Zepto.js, a lightweight library that works well on the mobile side, is very small, but the functionality is simple;

JQuery 2.0 says here is a 2.0 later version, only support some advanced browsers, using a lot of HTML5 features, although the mobile development volume relative zepto larger, but as a basic library is really addictive;

App Framework (the frameworks below are not just for mobile-only development)

jquery Mobile and jquery are the same programming ideas, very convenient to use, including browsing history management, view navigation rendering, UI components and other functions;

The APP framework is a very similar framework to jquery Mobile, and I haven't actually used it, I've seen the API, basically similar to jquery mobile;

Sencha Touch Sencha Products, is a complete Web component of the idea, used to do enterprise application development is very good, but there are many shortcomings, such as volume, complexity, performance and so on;

MVC Framework

Backbone MVC Framework recommended Backbone, not because Backbone how good, but for mobile development, Backbone volume is relatively small, and the function is very simple, easy to get started, angularjs volume larger, relatively complex;

UI Framework

Bootsrap 3, used to build the html/css;

Pure CSS and bootstrap the same stuff;

Tool Library (Speaking of tools, it is too much, I can not list each one, depending on the time when the subject of the subject is closer)

Iscroll Simulation area scrolling, used in mobile development

Pointer.js Touch gesture tool for compatibility with pointer event model and touch event model;

Deeptissue.js Touch gesture tool to extend various gesture events

Quo.js Ibid.

Hammer.js is also a gesture tool, but this is a jquery plugin;

Spin.js animation gadget in Load

Css3patterns drawing the background with CSS3

Svgpatterns Drawing backgrounds using SVG

Textillate.js various text animation effects

Effeckt.css animation effects of various CSS3

Jplayer audio and video playback tools

Summary of HTML5+CSS3 compatibility issues