CSS3 high-level attributes that are not known

Turn from Cool

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" means a browser using the WebKit kernel (Safari, Chrome, IPhone, IPad, Android, etc.), "Gecko "refers to browsers that use the Gecko kernel (Firefox, etc.). Then there are attributes that are part of the official CSS 2.1. specification, which means that 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 unique attribute-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:

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

Example

Gradient Mask:

1234	. 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)));}

extended reading : Safari Developer Library

-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

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

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

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

Create a red skeleton font:

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

extended reading : Safari Developer Library

-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.

extended reading : Safari Developer Library

-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:

1	-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

extended reading : Safari Developer Library

-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.

extended reading : Safari Developer Library

-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:

1	-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)):

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

extended reading : Safari Developer Library

-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

12345678

. 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.

Note: Although HTML marquee tags in XHTML are discarded, but the browser is still supported, but there is a problem is that the marquee tag may occupy a larger CPU, the big cat in-depth research, the conclusion is marquee speed can not be too fast, and WebKit with the-webkit-marquee attribute is the best--God flies.

extended reading : Safari Developer Library

Gecko Unique Attribute Font-size-adjust

This useful CSS3 property is currently only supported by Firefox. We can use it to set the text size (font-size) of the specified element relative to the height of the lowercase letter (x-height) rather than the height of the upper case (cap height). For example, Verdana is clearer than the same-model times font, and it has a shorter x-height. To compensate for this flaw, we can use the Font-size-adjust attribute to correct the latter.

This property is useful for fonts that have different x-height. Even if you are careful about using the small font, Font-size-adjust can provide a solution when the problem arises.

Example

If for some reason the Verdana is not installed on the user's computer, Arial will be corrected to have the same aspect ratio as the Verdana (0.58).

12345

p {font-family:verdana, Arial, sans-serif;font-size:12px;font-size-adjust:0.58;}

browser support : Gecko.

extended reading : Mozilla Developer Network

Image-rendering

N years ago, images were not displayed in their original size, but were scaled off by designers. Depending on the size and context of the zoom, the picture may appear in a browser that is either not very good or is simply misplaced. Now, the browser has a better algorithm to display the scaled picture, but it's great to control its performance when your image is scaled.

This gecko private property is especially useful if your pictures have sharp lines and want them to hold them after zooming. The associated value is-moz-crisp-edges. The same algorithms are used in optimizespeed, while auto and optimizequality are defined as standard behaviors (scaling elements with the best possible quality). The Image-rendering property can also be used for <video> and <canvas> elements, as well as for background images. This is a CSS3 standard attribute, but currently only Firefox is supported.

It is worth noting that-ms-interpolation-mode:bicubic, although it is an IE proprietary attribute. However, it allows Internet Explorer 7 to render it a higher quality after zooming the picture. This property can be useful because the browser is poorly handled by default.

browser support : Gecko.

extended reading : Mozilla Developer Network

-moz-border-top-colors

This attribute can be categorized as ' eye candy '. It allows you to set a different border color for border widths greater than 1px. Of course-moz-border-bottom-colors,-moz-border-left-colors and-moz-border-right-colors are also available.

The unpleasant is that there is no abbreviated-moz-border-colors abbreviation, so each border must be set separately. At the same time, the border-width to match the number of colors given, otherwise the last color value will be filled to the remaining width.

Example

In this example, the left and right sides of the element border will be the standard orange, and up and down there is a gradient-like color-red, yellow and blue three colors.

12345

div {border:3px solid orange;-moz-border-top-colors:red yellow blue;-moz-border-bottom-colors:red yellow blue;}

browser support : Gecko.

extended reading : Mozilla Developer Network

Mixed attributes-webkit-user-select and-moz-user-select

Perhaps you often don't want users to select text on your site, whether it's for copyright reasons or not. Usually you will have JS to achieve, another option is to set the value of-webkit-user-select and-moz-user-select to none.

Use this attribute with caution: Because most users are looking for information, they can copy and store it for future use, so this method is useless and ineffective. If you disable the copy-and-paste feature, users can still get the content they want by viewing the source files. I don't understand why this attribute is supported by WebKit and Gecko.

browser support : WebKit, Gecko.

extended reading : Safari Developer Library, Mozilla Developer Network

-webkit-appearance and-moz-appearance

Have you ever thought of disguising a picture as a radio button? Or, does an input box look like a check box? So now appearance has appeared. Even if you don't want a link to always look like a button, here's an example of what you can do if you want to:

Example

1234	a {-webkit-appearance:button;-moz-appearance:button;}

browser support : WebKit, Gecko.

extended reading : Safari Developer Library, Mozilla Developer Network, Mozilla Developer NETWORK,CSS3 appearance Introduction

Text-align:-moz-center/-webkit-center

This is an attribute (or, to be precise, a "property value"). To center a block-level element, you typically set it to margin:0 Auto. However, you can now also set the Text-align property of the container for the element to-moz-center and-webkit-center. Alternatively, you can either set the-moz-left,-webkit-left, or-moz-right, and-webkit-right the element to the left or right.

browser support : WebKit, Gecko.

extended reading : Safari Developer Library

CSS 2.1 Properties Counter-increment

Do you often wish you could have an ordered list or all the headings of an article automatically numbered? Unfortunately, the CSS3 attribute is not currently supported. However, in CSS 2.1, Counter-increment provides a solution. This means it has been around for years and has been supported in IE8.

Mates: Before pseudo-element and content attributes, Counter-increment can add automatic numbering for all HTML tags. Even nested encodings are supported.

Example

To encode the title, first reset the calculator:

1	Body {Counter-reset:thecounter}

The following style lets each

1234	. Counter H1:before {counter-increment:thecounter 1;content: "section" Counter (thecounter) ":";}

Example

For a list of nested encodings, re-design the digital device and then turn off <ol> Auto-encode because it is not nested:

1234	OL {Counter-reset:section;list-style-type:none;}

Then, each <li> is set to auto-numbering, and the separator is a dot (.) followed by a space

1234	Li:before {counter-increment:section;content:counters (section, ".") "";

HTML code:

12345678910

<ol><li>item</li> <!--1--><li>item <!--2--><ol><li>item</li > <!--1.1--><li>item</li> <!--1.2--></ol></li><li>item</li> <!--3--><ol>

browser support : CSS 2.1., all modern browsers, IE 7+.

extended reading : w3c,css content, Counter-increment and Counter-reset

Quotes

Do you get tangled up because your CMS doesn't know how to convert the quote symbols correctly? Then start using the Quotes property. This way you can customize any symbol. Then you can use: Before and: After pseudo-elements specify quotation marks for any desired element, and sadly, the WebKit browser does not support this property--after testing, Chrome 11 has started to support this property (previous versions have not been tested).

Example

The preceding two symbols determine the quotation marks for the first-level reference, and the latter two for the two-level reference, and so on:

123	Q {quotes: ' «'» ' "‹" "›";}

The following two lines specify quotation marks for the selected element:

12	Q:before {content:open-quote}q:after {content:close-quote}

In this way, <p><q>this is a very <q>nice</q> quote.</q></p> will appear to be Jiangzi:
«this is a very‹nice›quote.»

browser support : CSS 2.1., except for all modern browsers of Webkit,ie 7 and IE6. But Chrome is a support ...

expanded reading :

question: Do I need to set the CSS document to UTF-8 to add the symbol directly? This is a very tangled problem. Unfortunately, I can't give a definite answer. My experience is that there is no need to set any particular character set, and then the Utf-8 character set can be an error because it displays the wrong characters (such as "»"). Instead of using the iso-8859-1 character set, everything is normal.

"Because the quotation marks defined by ' quotes ' in the previous example are conveniently positioned on a computer keyboard, high-quality characters require a different 10646 character set," he said. ”

You may have heard of it, but you didn't remember it. CSS3 Properties

At the end of the spectrum, let's revisit some of the less popular CSS3 attributes that are not as widely needed as Border-radius and Box-shadow.

Text-overflow

You may often encounter this problem: a container is too small for its text, and then you have to use JavaScript to truncate the string and add the "..." symbol to avoid text overflow.

Forget it! With CSS3 and text-overflow:ellipsis, if the text is longer than the width of its container, you can force the text to end it with "...". The only requirement is to set the Overflow:hidden. Unfortunately, Firefox does not support this property, but it seems to be supported in the most recent version.

Example

1234	div {width:100px;text-overflow:ellipsis;}

browser support : CSS 3, the latest version of all browsers, in addition to Firefox,ie from IE6 start support, it is said that Firefox to 6.0 will also provide support-hope so.

expanded reading :

Word-wrap

When the text is in a narrow container, one of its parts may be too long to wrap correctly. Links, for example, often cause problems. If you don't want to hide the overflow text with Overflow:hidden, you can set Word-wrap to Break-word, which lets the string wrap when it reaches the width limit of the container.

Example

1234	div {Width:50px;word-wrap:break-word;}

browser support : CSS 3, all modern browsers.

expanded reading :

Resize

If you're using Firefox or Chrome, then you must have noticed that the lower-right corner of the text box has a small handle that lets you resize it. The behavior of this standard is implemented by the CSS3 property Resize:both.

But it is not limited to textarea. It can be used with all HTML elements. The horizontal and vertical values are used to control whether the horizontal or vertical direction is adjusted.

Note: For the Display:block element, if the Overflow:visible,resize attribute is set, it will be invalid (this is not an--by of the original description).

browser support : CSS3, in addition to the other latest browsers opera and IE think.

extended reading : Safari Developer Library

Background-attachment

When you specify a background image for an element that has a overflow:auto set, when the scroll bar appears with too much content, drag the scroll bar to find that the background picture is in a fixed position instead of moving along with the scroll bar. If you want the background picture to scroll with the content, you can set the background-attachment:local.

browser support : CSS 3, in addition to all modern browsers except Firefox, Firefox is supported Background-attachment property, but does not support the local value.

expanded reading :

Text-rendering

As more and more websites begin to use @font-face to render text, legibility begins to be watched. Text is more likely to appear on small fonts. Since there are currently no CSS properties to control the subtle details of displaying online fonts, you can use text-rendering to enable kerning and ligatures.

Gecko and WebKit browsers handle this property in very different ways. The former enables this feature by default, and the latter, you need to set it to optimizelegibility.

browser support : CSS3, all WebKit and Firefox browsers.

expanded reading :

Transform:rotatex/transform:rotatey

If you have already started using CSS3, then you may be more familiar with transform:rotate (), which rotates the attributes of the element on the z axis.

But do you also know that it can also be rotated more deeply (for example, around the x-axis and the y-axis)? These variants combined with-webkit-backface-visibility:hidden will be more appropriate.

Example

If your mouse passes through this element, it will rotate 180 ° and reverse over:

123	Div:hover {Transform:rotatey (180deg);}

Tip: If you just map an element, you can set transform to Rotatex (180deg) (corresponding to Rotatey) or set transform to ScaleX (-1) (corresponding to ScaleY).

browser support : CSS3, WebKit, Firefox, Opera and IE9

extended reading : The CSS3 animation technology you need to know

Conclusion

As you would expect to see, there are many useful properties that are unknown. Many of them are still in the experimental stage and may have been this way and may eventually be rejected by the browser. Some are expected to be supported by all browsers in subsequent releases.

However, it is difficult to judge whether some of them are good or bad, WebKit unique attributes are becoming increasingly important with the success of iOS and Android. Of course, some CSS3 properties are more or less ready to use.

If you don't like private properties, you can treat them as experiments until you can implement them in your code to enhance the user experience. At the same time, the CSS validator also supports private properties, and it returns warnings instead of errors.

Wish you a happy experience!

CSS3 high-level attributes that are not known