Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about what are the attributes of the experimental CSS, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following contents for you. I hope you can get something according to this article.

However, hidden in the browser's treasure trove are some advanced, seriously undervalued properties, but they don't get much attention. Maybe some of them should be like this (ignored), but other attributes should be more recognized. The greatest wealth is hidden beneath Webkit, and in the age of iPhone, iPad, and Android apps, it is often useful to begin to understand them. Even the Gecko engine used by Firefox and others provides some unique properties. We'll take a look at the little-known CSS 2.1and CSS3 properties and their support in modern browsers.

Note: for each attribute, we specify here that "WebKit" refers to browsers using Webkit kernel (Safari, Chrome, iPhone, iPad, Android, etc.), and "Gecko" refers to browsers with Gecko kernel (Firefox, etc.). Then some attributes are official CSS 2. 1. Part of the specification, which means that more browsers and even some older browsers will support them. Finally, a CSS3 tag indicates compliance with this standard and is supported by the latest browser versions such as Firefox 4, Chrome 10, Safari 5, Opera 11.10, and IE9.

WebKit-specific properties

-webkit-mask

This attribute is quite powerful, so a detailed introduction is beyond the scope of this article, and it is worthy of in-depth study, because it can save you a lot of time in practical application.

-webkit-mask makes it possible to add a mask to an element so that you can create patterns of any shape. The mask can be a CSS3 gradient or a translucent PNG picture. When the alpha value of the mask element is 0, the following element is overwritten, and when it is 1, the following content is fully displayed. Related attributes are-webkit-mask-clip,-webkit-mask-position,-webkit-mask-repeat, and so on, which rely heavily on syntax from background. For more information, see webkit's blog and the link 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), to (rgba));}

-webkit-text-stroke

One drawback of CSS borders is that only rectangular elements can be used. -webkit-text-stroke can add borders to text. It can set not only the width of the text border, but also its color. Also, with the color: transparent attribute, you can create hollowed-out fonts!

Example

Set a 2px wide blue border for all headings:

1 H2 {- webkit-text-stroke: 2px blue}

Another feature is that text can be smoothed by setting the transparent border of 1px:

1 h3 {- webkit-text-stroke: 1px transparent}

Create a red hollowed-out font:

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

-webkit-nbsp-mode

Line wrapping can be tricky: sometimes you want the text to break (rather than break) in the right place, and sometimes you don't want to. One attribute that controls this is-webkit-nbsp-mode, which allows you to change the behavior of white space characters, forcing text to break lines where it is used. This can be achieved by setting the value to space.

-webkit-tap-highlight-color

This property is only used for iOS (iPhone and iPad). When you click on a link or clickable element defined by Javascript, it appears 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 alpha value of the color to 0.

Example

Set the highlight color to 50% transparent red:

1-webkit-tap-highlight-color: rgba (255pr 0pl 0je 0.5)

Browser support: only iOS (iPhone and iPad).

Zoom: reset

Generally speaking, zoom is an IE-specific attribute. But webkit is starting to support it, and you can achieve good results with the value reset,webkit (interestingly, IE doesn't support this value). It lets you reset the normal zoom behavior in the browser-if an element is declared zoom:reset, other elements on the page will zoom in as the user zooms in.

Note: in fact, we often use-webkit-text-size-adjust:none; to disable chrome mandatory font size to achieve a similar effect, except that the text in the element that sets this attribute will not be zoomed in / out, but other elements on the page will change.

-webkit-margin-collapse

This attribute is restricted, but it is still very noteworthy. Typically, the margin of two adjacent elements is collapse. This means that the bottom margin of the first element and the header margin of the second element are merged.

The most common example is two adjacent ones.

Elements share their margin values. 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 margin values, that is, the bottom margin of the first element and the header margin of the second element are superimposed normally.

-webkit-box-reflect

Do you remember the days when almost every website used their logo or header text as a reflection? Thankfully, those days are over, but if you want to make better use of this technology on buttons, navigation, or other UI elements,-webkit-box-reflect is a better choice.

This property accepts the keywords above, below, left, and right, which set the direction of the reflection, and they are used with a number that sets the distance between the element and its reflection. At the same time, mask images are also supported (see the-webkit-mask section above, don't get confused). The reflection is automatically generated and has no effect on the layout. The following element uses only CSS, and the second button uses the-webkit-box-reflect attribute.

Example

The reflection appears below its parent element with 5px spacing:

1-webkit-box-reflect: below 5px

The reflection is projected to the right of the element with no spacing. Then, a mask will be applied (url (mask.png)):

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

-webkit-marquee

Another attribute brings us back to the good old days: the era of marquee everywhere. Interestingly, this abandoned tag has become very useful now, for example, when we switch content on a smaller mobile phone screen, the text will not be fully displayed if we keep typing.

The weather app created by ozPDA makes good use of it. If you don't see the changed text, you can try to experience it in another city. 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;}

There are some prerequisites for marquee to work. First, white-space must be set to nowrap so that the text does not wrap automatically, and second, overflow must be set to-webkit-marquee and the width must be set to a numeric value smaller than the actual length of the text.

The remaining attributes ensure that the text scrolls from left to right (- webkit-marquee-direction), moves back and forth (- webkit-marquee-style), and moves at a relatively low speed (- webkit-marquee-speed). Other attributes are-webkit-marquee-repetition, which defines the number of marquee repeats, and-webkit-marquee-increment, which defines the rate of change for each increment.

Note: although HTML's marquee tag is discarded in XHTML, but browsers still support it, but there is a problem is that marquee tag may take up a relatively large cpu, big cat conducted in-depth research on it, the conclusion is that the speed of marquee can not be too fast, and webkit uses the-webkit-marquee attribute is the best.

Gecko-specific properties

Font-size-adjust

This useful CSS3 attribute is currently only supported by Firefox. We can use it to set the text size of the specified element (font-size) relative to the height of lowercase letters (x-height) rather than the height of uppercase letters (cap height). For example, the Verdana has a clearer font than the Times of the same model, and it has a shorter x-height. To fix this defect, we can use the font-size-adjust attribute to correct the latter.

This attribute is useful for fonts with different x-height. Even if you are using small fonts carefully, font-size-adjust can provide a solution when problems arise.

Example

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

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

Browser support: Gecko.

Image-rendering

N years ago, pictures were not displayed in their original size, but were zoomed out by designers. Depending on the size and context of the zoom, the image may not display well in the browser or may simply be wrong. Now, browsers have a better algorithm to display scaled images, but it's also great to have complete control over the performance of your images after they are zoomed out.

This Gecko proprietary property is especially useful if your image has sharp lines and you want them to keep it after zooming. The relevant value is-moz-crisp-edges. The same algorithm is used for optimizeSpeed, while auto and optimizeQuality are defined as standard behaviors (scaling elements with the best possible quality). The image-rendering attribute can also be used with elements, just as for background images. This is a CSS3 standard attribute, but currently only Firefox supports it.

It is worth noting that-ms-interpolation-mode: bicubic, although it is an IE proprietary attribute. However, it lets Internet Explorer 7 render the picture to higher quality after zooming it. Because this browser handles poorly by default, this property may be useful.

Browser support: Gecko.

-moz-border-top-colors

This attribute can be classified as' pleasing to the eye'. It allows you to set different border colors for border when its width is greater than 1px. Of course-moz-border-bottom-colors,-moz-border-left-colors and-moz-border-right-colors are also available.

Unfortunately, there is no abbreviated-moz-border-colors acronym, so each border should be set separately. At the same time, the border-width should be consistent with the number of colors given, otherwise, the last color value will be filled to the rest of the width.

Example

In this example, the left and right borders of the element will be standard orange, and the top and bottom will have a gradient-like color-red, yellow and blue.

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

Browser support: Gecko.

Mixed attribut

-webkit-user-select and-moz-user-select

Maybe you often don't want users to select text on your site, whether for copyright reasons or not. Usually you have js to do this, and another solution is to set the values of-webkit-user-select and-moz-user-select to none.

Use this attribute with caution: because most users are here to view information, they can copy it and store it for future use, so this method is neither useful nor effective. If you disable copy and paste, users can still get what they want by looking at the source file. I don't understand why this attribute is supported by webkit and gecko.

Browser support: WebKit, Gecko.

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

A {- webkit-appearance: button;-moz-appearance: button;}

Browser support: WebKit, Gecko.

Extended Reading: introduction to Safari Developer Library, Mozilla Developer Network, Mozilla Developer Network,CSS3 appearance

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

The existence of an attribute (or, to be precise, an "attribute value") is surprising. To center a block-level element, you usually set it to margin:0 auto. However, now you can also set the text-align property of the element's container to-moz-center and-webkit-center. Accordingly, you can set the element to the left or right by setting-moz-left,-webkit-left or-moz-right,-webkit-right.

Browser support: WebKit, Gecko.

CSS 2.1Properties

Counter-increment

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

In conjunction with before pseudo elements and content attributes, counter-increment can add automatic numbering to all HTML tags. Even nested coding is supported.

Example

To encode the title, first reset the calculator:

1 body {counter-reset: thecounter}

The following style gives each title a prefix of "Section", followed by a number that is automatically incremented by 1 (this is the default and can be omitted), where thecounter is the name of the calculator:

.counter h1:before {counter-increment: thecounter 1; content: "Section" counter (thecounter) ":";}

Example

For a nested coded list, redesign the counter, and then turn off the automatic encoding because it is not nested:

Ol {counter-reset: section; list-style-type: none;}

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

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

HTML Code:

Item

Browser support: CSS 2.1, all modern browsers, IE 7.

Quotes

Do you struggle because your CMS doesn't know how to convert reference symbols correctly? So start using the quotes attribute. So you can customize any symbol. Then you can use: before and: after pseudo elements to specify quotation marks for any desired element. Sadly, webkit browsers do not support this attribute-- after testing, chrome 11 has begun to support this attribute (previous versions have not been tested).

Example

The first two symbols determine the quotation marks of the first-level reference content, the last two are used for secondary references, and so on:

Q {quotes:'«'»'< ">";}

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

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

Like this,

This is a very nice quote.

It looks like it's going to be This is a very < nice > quote. »

Browsers support: CSS 2.1, all modern browsers except WebKit,IE 7 and IE6. But chrome supports it.

Question: does the CSS document have to be set to UTF-8 to add symbols directly? This is a very complicated question. Unfortunately, I can't give a definite answer. My experience is that there is no need to set a specific character set, and then the utf-8 character set may go wrong because it displays the wrong characters (such as "»"). Instead, use the iso-8859-1 character set, and everything is fine.

The W3C describes it this way: "since the quotation marks defined by 'quotes' in the previous example are easily located on the computer keyboard, high-quality characters require a different set of 10646 characters."

CSS3 attributes that you may have heard of but do not remember

As we draw to a close, let's review some of the less popular and less widely needed CSS3 attributes like border-radius and box-shadow.

Text-overflow

You may often encounter this problem: a container is too small for the text in it, and then you have to use javascript to truncate the string and add "…" Symbols to avoid text overflow.

forget it! With CSS3 and text-overflow: ellipsis, you can force the text to "…" if the text is longer than the width of its container. End it. The only requirement is to set up overflow:hidden. Unfortunately, Firefox does not support this attribute, but it looks like it will be supported in a recent release.

Example

Div {width: 100px; text-overflow: ellipsis;}

Browser support: CSS 3, the latest version of all browsers, except Firefox,IE, which is supported from IE6, and is said to be supported by Firefox to 6. 0-I hope so.

Word-wrap

When the text is in a narrow container, some part of it may be too long to wrap correctly. Links, for example, often cause problems. If you don't want to hide the overflowed text with overflow: hidden, you can set word-wrap to break-word, which lets strings wrap when they reach the container's width limit.

Example

Div {width: 50px; word-wrap: break-word;}

Browser support: CSS 3, all modern browsers.

Resize

If you are using Firefox or Chrome, you must have noticed that there is a small handle in the lower right corner of the text box by default, which allows you to resize them. This standard behavior is implemented by the CSS3 attribute resize: both.

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

Note that for the display:block element, if the overflow:visible,resize attribute is set, it will have no effect.

Browser support: CSS3, the latest browsers except Opera and IE.

Background-attachment

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

Browser support: CSS 3, all modern browsers except Firefox, Firefox supports the background-attachment attribute, but does not support the local value.

Text-rendering

As more and more websites start to use @ font-face to render text, readability is getting more and more attention. On small fonts, text is more likely to appear. Since there is currently no CSS attribute 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, while in the latter, you need to set it to optimizeLegibility.

Browser support: CSS3, all WebKit and Firefox browsers.

Transform: rotateX/transform: rotateY

If you have started using CSS3, you may be familiar with transform: rotate (), an attribute that rotates the element on the z-axis.

But did you also know that it can also rotate more deeply (for example, around the x-axis and y-axis)? The combination of these deformations-webkit-backface-visibility: hidden would be more appropriate.

Example

Div:hover {transform: rotateY (180deg);}

If you mouse over this element, it will rotate 180 °and reverse it:

Tip: if you are only mapping an element, you can set transform to rotateX (180deg) (corresponding to rotateY) or transform to scaleX (- 1) (corresponding to scaleY).

Browser support: CSS3, WebKit, firefox, Opera and IE9

Conclusion

As you would like to see, there are a lot of unknown and useful attributes. Many of them are still in the experimental stage and may continue to do so or even eventually be abandoned by browsers. Some are expected to be supported by all browsers in subsequent versions.

However, it is difficult to judge whether some of them are good or bad, and WebKit-specific attributes become more and more important with the success of iOS and Android. Of course, some CSS3 attributes are more or less available.

If you don't like private attributes, you can treat them as experiments until they can be implemented in code to enhance the user experience. At the same time, the W3C's CSS validator also supports private attributes, which return warnings instead of errors.

After reading the above, do you have any further understanding of the experimental CSS properties? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.