Summary of some hidden advanced property usage in css2

counter-increment

Have you often wished you could have an ordered list or all the titles of an article automatically numbered? Unfortunately, there is no CSS3 property support yet. But in CSS 2.1, counter-increment provides a solution. This means it has been around for several years and is supported in IE8.

With the :before pseudo element and the content attribute, counter-increment can add automatic numbers to all HTML tags. Even nested encodings are supported.

Example

To code headings, reset the calculator first:

   body {counter-reset: thecounter}

The following style allows each

heading to have a "Section" prefix, and then the number after it 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 encoding List, reset the counter, and then turn off the automatic encoding of

because it is non-nested:

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

Then, each

1. is set to automatic 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

   Are you struggling because your CMS doesn’t know how to convert reference symbols correctly? So start using the quotes attribute. This way you can customize any symbol. You can then use the :before and :after pseudo-elements to specify quotes for any desired element. Sadly, webkit browsers do not support this attribute - after testing, Chrome 11 has begun to support this attribute (previous versions did not test).

   Example

   The first two symbols determine the quotation marks for the first-level quotation content, the next two symbols are used for the second-level quotation, and so on:

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

   The following two symbols Lines are used to specify quotes for selected elements:

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

   This is a very nice quote.It will look purple:
   «This is a very ‹nice› quote.»

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

   Question: To add symbols directly, does the CSS document have to be set to UTF-8? This is a very tangled question. Unfortunately, I can't give a clear answer. My experience is that it is not necessary to set any specific character set, and then the utf-8 character set may be wrong because it displays the wrong characters (such as "»"). Instead, use the iso-8859-1 character set and everything will be normal.

   W3C describes it this way: "Because the quotation marks defined by 'quotes' in the previous example are conveniently positioned on the computer keyboard, high-quality characters require a different 10646 character set."

   CSS3 properties you may have heard of but not remembered

   Towards the end, let’s revisit some CSS3 properties that are less popular and not as widely required as border-radius and box-shadow.

   text-overflow

   Perhaps you will often encounter this problem: a container is too small for the text inside, and then you have to use javascript to truncate the string and add " ..." symbol to avoid text overflow.

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

   Example

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

   Browser support: CSS 3, the latest version of all browsers, except Firefox, IE supports it starting from IE6, and it is said that Firefox will also provide support to 6.0 - I hope so Bar.

   word-wrap

   When text is in a narrow container, some parts of it may be too long to wrap correctly. Links, for example, often cause problems. If you don't want to hide overflow text with overflow: hidden, then you can set word-wrap to break-word, which allows the string to 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 are using Firefox or Chrome, then you must have noticed that by default, text boxes have small handles in the lower right corner that allow you to resize them. This standard behavior is implemented by the CSS3 property resize: both.

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

   Please note: For the display:block element, if overflow:visible is set, the resize attribute will be invalid (the original description of this is unknown - by Shenfei).

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

   background-attachment

   当你为一个设置了overflow:auto的元素指定背景图片的时候，当内容太多而出现滚动条后，拖动滚动条就会发现背景图片的位置是固定的，而不是随着滚动条移动。如果你想要背景图片随着内容而滚动，可以设置background-attachment:local。

   浏览器支持: CSS 3，除了Firefox以外的所有现代浏览器，Firefox是支持background-attachment属性的，只是不支持local值.

   text-rendering

   随着越来越多的网站开始用@font-face来渲染文字，易读性开始被关注了。小号字体上，文字会更容易出现。由于目前还没有CSS属性控制显示在线字体的微妙细节，你可以利用text-rendering来启用kerning 和 ligatures。

   Gecko 和WebKit 浏览器处理这个属性的方式很不一样。前者默认启用这个特性，而后者，你需要将其设置为optimizeLegibility。

   浏览器支持: CSS3, 所有WebKit 和Firefox浏览器.

   transform: rotateX/transform: rotateY

   如果你已经开始使用CSS3，那么你可能会比较熟悉transform: rotate()，这个在z轴上旋转元素的属性。

   但是你是否也知道，它也可以更深入的旋转的(比如，围绕x轴和y轴)？ 这些变形结合-webkit-backface-visibility: hidden会更合适。

   示例

   如果你鼠标经过这个元素，它将会旋转180°，倒转过来:

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

   小技巧:如果只是映射一个元素，你可以设置transform为rotateX(180deg) (对应rotateY)或者设置transform 为scaleX(-1) (对应scaleY).

   浏览器支持: CSS3, WebKit、firefox、Opera以及IE9

   The above is the detailed content of Summary of some hidden advanced property usage in css2. For more information, please follow other related articles on the PHP Chinese website!