CSS3 Some of the hidden advanced properties of WebKit specific property usage

Although modern browsers already support many of the CSS3 properties, most designers and developers seem to be focusing on some of the most "mainstream" attributes, such as Border-radius, Box-shadow, or transform. They have good documentation, good testing and are most commonly used, so if you've been designing websites recently, it's hard to get out of them.

However, hidden in the large repositories of browsers are some of the advanced, severely underestimated attributes, but they don't get much attention. Perhaps some of them should be (ignored), but other attributes should be more recognized. The greatest riches are hidden beneath the WebKit, and in the era of the iphone, ipad and Android apps, it's often useful to get to know them. Even the Gecko engine, which is used by Firefox, also offers some unique properties. In this article, we'll look at the little-known CSS 2.1 and CSS3 properties and their support in modern browsers.

Note: For each attribute, we stipulate here: "WebKit" refers to the browser using the WebKit kernel (Safari, Chrome, IPhone, IPad, Android, etc.), "Gecko" refers to the browser using the Gecko kernel (Firefox, etc. )。 Then some attributes are official CSS 2.1. Part of the specification, which means more browsers and even some old browsers will support them. Finally, a CSS3 label indicates adherence to this standard and is supported by the latest browser versions-such as Firefox 4, Chrome 10, Safari 5, Opera 11.10, and IE9.

-webkit-mask

This property is quite powerful, so the detailed introduction is beyond the scope of this article, and it is well worth digging into because it can save you a lot of time in practical applications.

-webkit-mask makes it possible to add masks to an element so you can create patterns of any shape. The mask can be a CSS3 gradient or a translucent PNG image. When the alpha value of the mask element is 0, the following element is overwritten, and the following is fully displayed for 1. The associated properties are-webkit-mask-clip,-webkit-mask-position, and-webkit-mask-repeat, and are heavily dependent on the syntax from background. For more information, please see the WebKit blog and the links below.

Example

Picture mask:

. Element{background:url (img/image.jpg) Repeat;-webkit-mask:url (img/mask.png);}

Example

Gradient Mask:

. element2 {Background:url (img/image.jpg) Repeat;-webkit-mask:-webkit-gradient (linear, left top, left bottom, from ( RGBA (0,0,0,1)), to (Rgba (0,0,0,0)));}

-webkit-text-stroke

One disadvantage of CSS borders is that only the elements of the rectangle can be used. -webkit-text-stroke you can add a border to text. It can not only set the width of the text border, but also set its color. And, with the Color:transparent property, you can also create a skeleton font!

Example

Set a 2px wide blue border for all

h1 {-webkit-text-stroke:2px Blue}

Another feature is that by setting a transparent border of 1px, you can make the text smooth:

H2 {-webkit-text-stroke:1px Transparent}

Create a red skeleton font:

h3 {color:transparent;-webkit-text-stroke:4px red;}

-webkit-nbsp-mode

Wrapping is sometimes tricky: sometimes you want words to line up in the right place (instead of wrapping), and sometimes you don't want to. A property that controls this is-webkit-nbsp-mode, which allows you to change the behavior of the   whitespace character, forcing the word to break in the place it was used. This can be done by setting the value to space.

-webkit-tap-highlight-color

This property is only available for iOS (iphone and ipad). When you click on a link or a clickable element defined by JavaScript, it will appear with a translucent gray background. To reset this performance, you can set-webkit-tap-highlight-color to any color.

To disable this highlight, set the color's alpha value to 0.

Example

Set the high bright color to 50% transparent red:

   -webkit-tap-highlight-color:rgba (255,0,0,0.5);

Browser support: Only iOS (iphone and ipad).

Extended reading: Safari Developer Library

Zoom:reset

Generally speaking, zoom is an IE-specific attribute. But WebKit is also starting to support it, and using value Reset,webkit can do a good job (interestingly, IE does not support this value). It allows you to reset the normal indentation in the browser--if an element is declared Zoom:reset, the other elements on the page will be magnified when the user enlarges the page.

Note: In fact, we used to disable chrome to enforce the font size of the use of the-webkit-text-size-adjust:none, but also can achieve similar effects, the difference is that the element setting this property is not magnified/reduced, But the other elements on the page will change--God flies

-webkit-margin-collapse

This attribute is at the limit level, but it is still very interesting. Typically, the margin of two adjacent elements is collapsed (collapse). This means that the bottom margin of the first element and the head margin of the second element are merged together.

The most common example is that two adjacent <p> elements share their margin value. To control this performance, we can use-webkit-margin-collapse and its split-webkit-margin-top-collapse,-webkit-margin-bottom-collapse, and so on. The default value is collapse, and the value separate stops sharing the margin value, that is, the bottom margin of the first element and the head margin of the second element are stacked correctly.

-webkit-box-reflect

Do you remember the age when almost every website made a reflection of their logo or the text of their head? Thankfully, that era has passed, but-webkit-box-reflect is a better choice if you want to use this technique better on buttons, navigation, or other UI elements.

This property accepts above, below, left, and right four keywords, which set the direction of the reflection, and they are used with a set element and a number that is the distance the reflection is built. At the same time, the mask picture is also supported (see the-webkit-mask section above, do not confuse the ha). The reflection is automatically generated and has no effect on the layout. The following elements use only CSS, and the second button uses the-webkit-box-reflect property.

Example

This reflection appears below its parent element and has a spacing of 5px:

  -webkit-box-reflect:below 5px;

This reflection will be projected to the right of the element without spacing. Then, a mask will be applied (URL (mask.png)):

-webkit-box-reflect:right 0 url (mask.png);

-webkit-marquee

Another attribute allows us to return to the good past: the time of the Marquee (marquee). The interesting thing is that the already abandoned label is now very useful, for example, we switch content on a smaller phone screen, and the text will not be fully displayed if you continue to do so.

OZPDA created this weather application very well using it. (If you see the changed text in the wood, you can try a different city to experience.) Need to use WebKit kernel browser)

Example

. marquee {white-space:nowrap;overflow:-webkit-marquee;width:70px;-webkit-marquee-direction:forwards;- Webkit-marquee-speed:slow;-webkit-marquee-style:alternate;}

Some prerequisites are required for marquee to work. First, the white-space must be set to nowrap so that the text does not wrap, and secondly, the overflow must be set to-webkit-marquee, and the width should be set to a value that is smaller than the actual length of the text.

The remaining attributes ensure that the text scrolls from the left to the right (-webkit-marquee-direction), Back and forth (-webkit-marquee-style), and moves at a lower speed (-webkit-marquee-speed). Other properties are-webkit-marquee-repetition, which define the number of repetitions of the marquee,-webkit-marquee-increment, and define the speed change per increment.