CSS and HTML5 response pictures

With the gradual popularization of the Retina screen, the adaptation of the pictures in the Web page is becoming more and more demanding. How to let the picture in magnified twice times Retina screen display still clear, once bothered the web developer, fortunately, CSS3 and HTML5 have been focused on changing this situation. So what exactly is a response picture?

What is a response picture?

Response picture refers to: the user agent according to the output device resolution different load different types of pictures, will not cause a waste of bandwidth. At the same time, when the output device type or resolution is changed, the corresponding type of picture can be loaded in time.

CSS3 Response Picture

For many IOS developers, it may be less unfamiliar, in order to fit the Retina screen, the traditional CSS3 implementation is by loading a width of twice times the picture, and then through Media Queries to reduce the background picture size by one times "background-size : 50% 50%;", for example:

. mod. HD h3 {Background-image:url (http://alibuybuy-img11.stor.sinaapp.com/2013/01/ac30_ T10S3JXN4XXXXNBIAN-105-160.PNG)//* Normal screen */}/*-------------Retina-------------*/@media only screens and (- O-MIN-DEVICE-PIXEL-RATIO:2/1),/* Opera/Only screen and (min--moz-device-pixel-ratio:2),/* Firefox 16 before * * * and (-webkit-min-device-pixel-ratio:2),/* WebKit/Only screen and (min-resolution:240dpi),//* standard/Only screen and ( MIN-RESOLUTION:2DPPX)/* Standard */{.mod HD h3{background-image:url (http://alibuybuy-img11.stor.sinaapp.com/2013/01/ A8e5_t1947txmjhxxccfooh-210-320.png); background-size:105px 155px;}

Contrast effect of two pictures:

There are some issues to be aware of when making @2x pictures:

If a picture like the one above is plain text, do not zoom directly from the big picture to the small picture, so the text effect will be somewhat distorted, which is the problem of Photoshop rendering. The font size should be resized and then typeset. Can see directly: a Amoy home effect.

The blue box is the effect of directly scaling the size of the picture, the red box is to change the font size from number 32nd to 16th.

The CSS3 media Queries is used to define the resolution of the device by "resolution", and derives two media features, "min-resolution" and "max-resolution" respectively. The specification stipulates: If the query non-square Pixels (professional term, refers to the height and width of pixels, can be understood as "non-square pixels." The pixels in the computer screen and in the High-definition video signal are square (the pixel aspect ratio is 1:1). The pixels in the standard definition digital video signal are not square. For example, the NTSC format has a pixel height greater than the width, whereas the PAL format has a pixel width greater than the height. Device, the value specified in the "min-resolution" query must be compared to the most sparse size, and the most dense size must be compared in the "max-resolution" query. The Non-square Pixels device is never queried for "resolution" (no "min-" or "max-" prefix). In addition, some units are defined in the CSS image level 3"image-resolution" property, such as "dppx", and the browser support is as follows:

The

feature Chromefirefox (Gecko) Ieoperasafari (WebKit) basic features do not support "1""4"3.5 (1.9.1) "2"99.5 do not support "1""4"dppx"4"16.0 unknown 12.10"3""4"

"1"chrome supports private properties "-webkit-min-device-pixel-ratio" and "-webkit-max-device-pixel-ratio". "2"firefox 8.0 received an integer value (without the unit), and 16 began to support DPPX units. "3"change our implementation of the denotes media query to use CSS units. "4"david Barr implemented the css3"image-resolution" attribute in Webkit, and supported dppx,dpi and DPCM units, which version of the specific Chrome started to support the test itself, believing Media Queries will soon be supported.

Some points to note:

"-o-min-device-pixel-ratio" 's value is fractions such as "2/3",demo, see: Opera Dev's article Firefox 16 before version is "min–moz-device-pixel-ratio",min There are two "-" in the back. 1DPPX is equivalent to 96dpi.

Obviously, the Media Queries to achieve "responsive picture" or very cumbersome, CSS code maintainability is not high, there are some hack flavor. We expect a native syntax to choose a different picture, and thankfully the "image-set" of this native syntax is realized in CSS Image level 4.

"image-set" Syntax:

<image-set> = Image-set ([<image-set-decl>,]* [<image-set-decl> | <color>]) < image-set-decl> = [<image> | <string>] <resolution>

The above example can be read as follows:

Background-image:url (http://alibuybuy-img11.stor.sinaapp.com/2013/01/ac30_T10s3JXn4XXXXnbIAn-105-160.png);/* Normal screen */background-image:-webkit-image-set (http://alibuybuy-img11.stor.sinaapp.com/2013/01/ac30_ t10s3jxn4xxxxnbian-105-160.png) 1x, URL (http://alibuybuy-img11.stor.sinaapp.com/2013/01/a8e5_ T1947txmjhxxccfooh-210-320.png) 2x);/* Retina/

The unit x is equal to "dppx", the future unification still need further discussion. Note that Webkit currently only implements the URL () Form of the value, color, *-gradient () and so on temporarily unsupported, and X to take a negative value seems to be legal.

The following are the "min-device-pixel-ratio" values for some common mobile devices:

-webkit-min-device-pixel-ratio:1.0

all non-Retina mac all non-Retina IOS devices Acer Iconia A500samsung Galaxy Tab 10.1Samsung Galaxy S Other Devices

-webkit-min-device-pixel-ratio:1.3

Google Nexus 7

-webkit-min-device-pixel-ratio:1.5

Google Nexus Ssamsung Galaxy S iihtc desirehtc incredible shtc velocityhtc sensation

-webkit-min-device-pixel-ratio:2.0

IPhone 4iPhone 4SiPhone 5iPad (3rd generation) IPad 4 all Retina displays Macgoogle Galaxy nexusgoogle Nexus 4Google Nexus 10Samsung Galaxy S Iiisamsung Galaxy Note iisony Xperia shtc one XHTML5 response picture

css"image-set" solves the problem of the response of the background picture, but what about the IMG element in HTML? Just when I was out of my way, the November 2011 @brucel presented a HTML5 solution:

<picture alt= "><source src=hires.png media=" min-width:800px "><source src=midres.png media=" min-width:480px "><source src=lores.png><!--Unsupported Browser demotion processing--><img src=midres.png alt=" "></ Picture>

At the same time, other ideas sprang up, so the responsive Images Community Group, the community discussion group, came into being. The latest specification is here: http://picture.responsiveimages.org/. The last update was January 7, 2013, as of the time this article was published, and the specification example:

<picture width= "height=" "><source media=" (min-width:45em) "srcset=" Large-1.jpg 1x, large-2.jpg 2x " ><source media= "(min-width:18em)" srcset= "Med-1.jpg 1x, med-2.jpg 2x" ><source srcset= "Small-1.jpg 1x, Small-2.jpg 2x "><img src=" small-1.jpg "alt=" "><p>accessible text</p></picture>

You can see that the "srcset" property is similar to the "image-set", and typically, the resources inside the "srcset" are fallback, which means that the first picture resource cannot be loaded without skipping the standby resource behind the load.

But Apple's Eoconnor proposal is this:

<img src= "foo-lores.jpg" srcset= "foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x" alt= "decent alt text for foo." >

It is true that any new standard will come up with different sounds, which is a good thing, as the end developer of the web is not really concerned with implementing syntax. If you have any questions, you can also go directly to the HTML5 Chinese interest group for discussion.

Summary

Originally wanted to write the first article of the New Year happy some, but seemingly no slot point. The draft of the HTML5 response picture is just beginning, but the outlook is good. What we can do now is to use the "image-set" attribute value in CSS, because most of the Retina screen devices currently have browsers based on the Webkit kernel, and Media Queries are available if there are special requirements.

Thanks to Kenny for the details of this article 14 suggestions, this article typesetting to follow:

Use Traditional Chinese quotes "instead of Simplified Chinese" "" "quotation marks;

Source: http://ued.taobao.com/blog/2013/01/css-and-html5-adaptive-images/