A summary of some of the hidden advanced attribute usages in CSS2

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:

   Body {Counter-reset:thecounter}

The following style lets each

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

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

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

HTML code:

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

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:

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

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

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

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

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.

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

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

Browser support: CSS 3, all modern browsers.

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.

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.

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.

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:

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