CSS: The front-end technology and skills of mobile web development

Web page Production WEBJX article introduction: CSS: Mobile Web Development front-end technology and skills.

We talked about the mobile site in the label, presumably a lot of people also want to know about mobile CSS, this article will be with you to explore the mobile site CSS standards.

Introduced

The standard for Mobile CSS is also somewhat complicated, similar to the one mentioned in the previous article, where the CSS Mobile Profile 1.0 and OMA WAP 1.0, which was developed by the consortium, were in fact a subset of CSS 2.1 and very close to the content, The difference is that WAP CSS 1.0 adds some extensions to mobile devices, and these extensions are implemented by-wap-prefixes.

Later, the consortium consolidated the two, absorbing some of the benefits of WAP CSS1.0, introducing the CSS Mobile Prifile 2.0 specification, which is also a subset of CSS 2.1. We will mainly discuss this specification in this article.

CSS support in CSS Mobile Profile 2.0

Because this is a subset of CSS 2.1, then we should not be unfamiliar with the content of this specification, we can see through this form very intuitive CSS MP support for CSS:

Unsupported supported

Selector	Global Selector (*), type selector (e.g. H1, Div, p, etc.), child selector (p>span), Link pseudo class (: link,:visited), Dynamic Pseudo class (: Active,: Focus), class selector, ID selector, grouping (h1,h2,h3{} ...)	: First-child,: hover,: lang () Pseudo class,: First-letter,: first-line pseudo element, brother selector (such as H1 + P), attribute selector (such as A[href), a[target= "_blank"])
Backgrounds and Borders	Background, Background-color, Background-image, Background-repeat, Background-attachment, Background-position, Border, Border-width, Border-color, Border-style ( Note 1)	No
Positioning	Position, top, right, bottom, left, Z-index	No
List	List-style, List-style-image, List-style-type	List-style-position
The Basic Box model	Display ( Note 2), margin, padding, height, min-height, max-height, Width, min-width, max-width, float, clear, Visibil ity, overflow ( Note 3), Overflow-style ( Note 4)	No
Color	Color	No
Font	Font, font-family, Font-style, Font-variant, Font-weight, font-size ( Note 5)	No
Text	Text-indent, Text-align, text-decoration ( note 6), Text-transform, White-space	Word-spacing, Letter-spacing, Unicode-bidi
Linear	Vertical-align ( note 7)	Line-height
Basic User Interface	Utline, Outline-color, Outline-style, Outline-width	Cursor
Rolling	Marquee-style, Marquee-direction, Marquee-play-count, Marquee-speed	No
@ Rules	@charset, @import, @media ( note 8), @namespace	@page

• Note 1:Border-style only supports the commonly used none, dotted, dashed, solid, and inherit, and the others are not included in the specification.
• NOTE 2:display is limited to inline, block, List-item, none, and inherit, and does not support run-in and Inline-block
• Note 3:overflow only supports auto
• Note 4:Overflow-sytle only supports marquee values
• Note 5:font-size only support the size of keywords, such as small, medium, bigger, PX, pt and percentage are not supported.
• Note 6:text-decoration only supports none, Blink, underline and inherit, Overline, Line-trough are not supported.
• Note 7:vertical-align only supports top, middle, bottom, baseline and inherit. Sub, super, Text-top, Text-bottom, percent and length not supported
• Note 8:@media rule only supports handheld and all media types.

Usage and browser support

As mentioned earlier in the article, the vast majority of mobile phones are currently supported by XHTML Basic 1.0 and XHTML MP 1.0, which means that the html/xhtml code to some extent can be compatible or even identical to the desktop version. Even the mobile version of some websites uses the DTD of HTML 4/5 or XHTML 1.0 directly. This allows mobile web sites to create a CSS file for mobile pages directly through the handheld media type:

1	<link rel= "stylesheet" media= "handheld" "href=" ">

The vast majority of browsers on traditional handsets support handheld media types, including Opera Mini and IE in Windows Mobile.

In fact, considering the limitations of the traditional mobile phone and the speed of the mobile network, it is not advisable to load the external style by media type, which is usually not much used for mobile pages, and the cost of loading an external style is enormous. As a result, most mobile versions of the Web site use a style sheet embedded in the head.

If you must adopt an external style, it is best not to use @import, because some mobile browsers do not support.

Notably,Mobile WebKit (including iphone Safari and Android Chrome Lite) do not support handheld.

And the difference in the visual, mainly the difference in the performance of the font, which is related to the various mobile browsers, want to do pixel perfect, not easy thing.

Summarize

Although the mobile site does not seem to consider too many functions, simple layout, simple function, but the reality is not as simple as imagined. The biggest problem that mobile website faces is the browser multitudinous, handset terminal difference is very big, when develop, encounter this kind of detail problem.

The front-end development of domestic mobile websites is still in its infancy, with the popularity of smartphones such as iphones and Android, web development for high-end smartphone devices will become popular, as @smbey0nd says,mobile web storms, we have a lot of work to do in this relatively new area that is about to sweep across China.

In fact, this article only involves some very basic aspects of mobile CSS, I hope to be a good way to attract more people to study and share the development of mobile Web front-end technology and skills, if you have more in-depth research, welcome through the front-end observation to share with you.

Reference

• http://www.w3.org/TR/css-mobile/
• Mobile STYLE–CSS Mobile Profile 2.0
• Complete CSS Guide Mobile profile