Css3 compatibility problems

Overflow problem of Android2.3

Browsers in android2.3 and later versions do not support overflow: scroll/auto, that is, if the content in the page element exceeds the height of the parent element or the ancestor element, it cannot be rolled, you can use the transform in css3 to implement scrolling. For example, iscroll.

Android2.3 focus

Android2.3 displays click-focus and a yellow border. You can set css-webkit-tap-highlight-color: rgba (,) for the corresponding elements, in addition, some later versions of the system may also have a yellow border. At this time, try to use outline: none to solve the problem.

Android2.3 position: fixed and input Chinese input bug

In the android2.3 system, if there is an element whose position is fixed on the page, the element at the outer layer of the input is located as relative or its own location is located as relative, a strange phenomenon will occur, it is normal to enter numbers or letters in the input. When the input method is switched to Chinese, it cannot be entered. After the position is set to absolute, everything works normally, in this case, the layout can only be changed.

Android2.3 border-radius Problems

Percentage is not supported. A large value is available, such as 9999px.

Android2.3 animation Problems

@-webkit-keyframes wave1{0%{ opacity:0;}8.33%{ opacity:1;}99%{opacity:1;}100%{}}

100% leave a frame empty. Write the last value 100% before 99%. 2.3.

Android2.3 gradient Problem

The gradient is compatible only when the write speed is 2.3:

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(111,191,7,0.9)));

Linear indicates the gradient mode, and 0 0 indicates the starting direction. 0 0 to 0 100% indicates a gradient from top to bottom. You can specify the percentage and color value for color-stop.

Android4.0 and earlier versions of the System touch event bug

In the android4.0 system, a touch event bug exists in the system of some molecular versions, which indicates that touchstart is normal. touchmove is triggered only once when touchstart is triggered and touchend is not triggered, android2.3 triggers startmove once. When touch ends, the remaining move and end operations are executed. This problem has not been solved in the zepto library. This problem also exists in the android4.2 system. Later, it was found that the browser adjusted the event cancel, the purpose should be to prevent calling when scrolling the page, so add e. preventDefault (). It is found that touchend is triggered, so the solution is processed according to the actual use scenario.

Android4.X placeholder Problems

The placeholder text font is on the top. However, placeholder can only set its color. For example:

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

The Row Height cannot be set. In this case, you can set line-height to normal to center up and down.

Position: fixed supported by various systems

Mobile Safari-iOS5 and later versions support. iOS4 and later versions are not supported and will be treated as static.

Android

• Android 2.1 and earlier versions are not supported.
• Android 2.2 does not keep the fixed position during the rolling process. After the rolling is completed, it returns to the fixed position.
• Android 2.3 supports fixed, but requires page scaling to be disabled.
• Android 3 and 4 support fixed.

Touchstart, click, and tap Event Analysis

Touch events are often used on mobile terminals, and touchstart events are very sensitive. If you want to bind a click event similar to a pc, touchstart operations are often misperformed, such as Page scrolling errors, there are many gesture libraries on the market, encapsulated in terms of tap, and click events on mobile terminals can also be triggered, the click event starts at around ms (the reason is that the browser wants to determine whether it is a double-click ), for the original explanation, refer to google's [Creating Fast Buttons for Mobile Web Applications] (Creating Fast Buttons for Mobile Web Applications). After my experiments, click the page element, there is no obvious difference with the tap effect, so you can use the click function to process users' clicks without the gesture library.

Disable default webkit Style

The default input, button, and select styles on webkit can be disabled through-webkit-appearance: none, and then customized.

Placeholder adaptive bug

A placeholder adaptive bug, used on the page<input>If the tag has the placeholder attribute, the page cannot be adaptive when the screen is switched back to the portrait. This will be applied to both android and ios.

The solution is<input>Overflow: hidden in the outer container

Troubleshoot the problem of refreshing and changing the url of the current page

Problems in Android 2.3:

Overall browser support for popstate events:

* Triggered when the page is forward or backward.
* Triggered during Hashchange
5. How to jump
* If pushState exists in the history stack, it will jump back to the hash page specified by pushState. For example, window. history. pushState ('object', document. title, "# explorer"); # explorer Page
* If no pushState exists, perform rollback and forward based on the history record.

Iscroll plug-in problems

The Iscroll plug-in is used by many webapps to implement list scrolling. Setting the translate attribute makes scrolling smoother. However, if the translate attribute is enabled in iscroll4.0, scrolling cannot be stopped manually, some people in the Q & A community said that iscroll5 will solve this problem. You can try it after iscroll5 is officially released. Iscroll has excellent performance in ios, but in some android phones, especially low-end machines, the performance is not very good, so you should be careful when using it.

Resource Sharing (from network)

We recommend a PPT to give you a comprehensive understanding of HTML5: http://slides.html5rocks.com/

The HTML section includes the well-known HTML4.01 Standard http://www.w3.org/tr/html401/there will also be a standardhtml 5 Candidate Recommendation http://www.w3.org/TR/html5/

HTML5 adds more semantic tags Based on HTML4, such:

<Header>
<Nav>
<Section>
// There are too many, so I will not elaborate on them one by one

In addition, more Tag attributes are extended on the original Tag, such:

<input type="text" required />
<input type="email" value="some@email.com" />

In addition, HTML5 also introduces many new tags and attributes, such as: progress for WebApp development, accessible access to ARIA, and Microdata for SEO optimization.

W3C HTML standard list

The CSS part is the same, and we are familiar with CSS2 Standard.

W3C is the latest CSS Level3 standard. Because CSS3 contains a lot of content and documents are separated, it is impossible to provide all the standard addresses for the moment. First, post some common standards:

W3C CSS standard list

CSS Selector

Transition animation Transition effect

Animation on the Animation page

JS is mainly reflected in Web APIs for HTML5. All APIs are BOM objects. Below I also list some common standard addresses:

W3C JavaScript API standard list

Touch Events Touch gesture event

Geolocation

Web Storage

Through the above content, I have probably understood what HTML5 is. Next I will talk about some resources that HTML5 can use to develop apps. In fact, there is no essential difference between HTML5 development and Web development. The main difference is that some new HTML5 features are not well supported by old class libraries, in this way, we need some more modern class libraries to use HTML5 for development.

JS Library/framework

Lightweight libraries include

Zepto. js is a lightweight library that is easy to use on mobile terminals. It is very small, but its functions are also very simple;

JQuery 2.0 is later than 2.0. It only supports some advanced browsers and uses many HTML5 features. Although development on mobile terminals is relatively larger than zepto, however, as a basic library, it is truly amazing;

App framework (the following framework can only be used for mobile development)

JQuery Mobile and jQuery have the same programming philosophy and are very convenient to use, including Browsing History Management, view navigation rendering, UI components, and other functions;

The App Framework is very similar to jQuery Mobile, and I have never used it. I have read the API and it is basically similar to jQuery Mobile;

Sencha Touch Sencha's products are completely web componentized and used for enterprise application development. However, they also have many disadvantages, such as volume, complexity, and performance;

MVC Framework

The Backbone MVC Framework recommends Backbone, not because of its excellent size. However, for mobile development, Backbone is relatively small in size and has simple functions and is easy to use, angularJS is relatively complicated due to its large size;

UI framework

Boot13c 3 is used to construct HTML/CSS;

Pure CSS is the same as Bootstrap;

Tool Library (when it comes to tools, there are too many tools. I Can't list them one by one. It seems that the problem is close to that of the subject)

IScroll simulates area scrolling and is used in mobile development

Pointer. js Touch gesture tool, used to be compatible with Pointer Event Model and Touch Event Model;

Deeptissue. js touch gesture tool to extend various gesture events

Same as QUO. js

Hammer. js is also a gesture tool, but it is a jQuery plugin;

Animation gadgets loaded by spin. js

Css3patterns use css3 to draw a background

Svgpatterns use svg to draw the background

Textillate. js various text animation Effects

Effeckt.css various CSS3 animation Effects

JPlayer audio/video playback Tool