The latest CSS technology learned today

Background: Image-set ()

The image-set in the css4-images specification can achieve Retina screen display, mainly used to solve the design challenges of Apple Retina screen.

• • In a browser that does not support image-set, it supports background-image images, that is, it does not support image-set browsers, and they parse background images in background-image;
  • Supports image-set: If your browser supports image-sete and is on a normal display screen, the browser selects @ 1x background image in image-set;
  • Image-set on the Retina screen: If your browser supports image-set and is on the Retina screen, the browser selects @ 2x background image in image-set.

Note: currently, image-set can only run under "Safari6" and "Chrome21" using the private attribute "-webkit" of the webkit browser. IOS 6 is also supported. However, it is a pity that other browsers still do not support image-set. Currently, it is only a draft of CSS4 and should be noted when using it.

Related Articles:

Image-set for Retina screen display

W3C specifications

The Webket project recently added support for CSS Level 4 image-set specifications.

 

Background: element ()

-Moz-element (): For background-image extensions, any other element can be used as the background of the current element. The usage is as follows:

<Div style = "width: 400px; Height: 100px; Background:-moz-element (# mybackground2);"> some text </div> <Div style = "overflow: hidden; Height: 0; "> <button id =" mybackground2 "type =" button "> edevil button! </Button> </div>

Effect:

Note: Currently, this CSS attribute is only supported by firefox4 + and is not supported by other browsers. Please use it with caution!

Related Articles:

Firefox 4 Beta 9 developer features

MDN Problems

Example

W3C specifications

 

Background: canvas ()

Use the generated canvas as the background of the element. Usage:

Effect:

Related Articles:
Example
CSS canvas drawing
Canvas-driven background images