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

In this issue, Xiaobian will bring you some useful CSS attributes. The article is rich in content and analyzed and described from a professional perspective. After reading this article, I hope you can gain something.

1. Outline

When debugging CSS problems, I often add a border to a given element to see exactly what happens to that element and help determine the source of the problem. This is often effective because it gives me more visibility on the layout. But if it's a block-level element, something might go wrong-adding a 1px border to any block-level element is likely to affect the layout by adding an extra 2px to the width of that element.

The outline attribute is a perfect substitute because it renders the object without affecting document flow. However, IE 6 and IE 7 do not support the outline attribute, so it cannot be used for debugging in either browser.

2. Inherit (value)

There are many examples in CSS development where you can avoid quite a bit of keyboard typing by setting certain styles on a particular element to tell that element to "inherit" all the added properties of its parent element.

This can easily be done by setting inherit. This could be useful. For example, when overriding the background attribute, there is often a lot of text in that attribute (color, URL address of image, location, etc.). So, instead of rewriting these values, you might want to consider just that the element in has the same background attributes as its parent, and one inherit value will do it all--which obviously saves a lot of keyboard typing.

Unfortunately, inheritance values are not supported in IE6 and IE7 (except for the direction and visibility attributes).

Someone said that code is like a woman's skirt-the shorter the better, it seems IE will prevent us from realizing this wish.

3. Empty-Cells

This property is only used for elements with table or "display" property set to "table-cell." If you dynamically add content to a table, you may encounter a situation where the content of a cell is empty, and then you do not want the border, background color, background image, etc. of the empty cell to be hidden.

This problem can be solved by using empty-cells: hide, which completely hides cells where this is likely to occur.

Internet Explorer does not support empty-cells.

4. Caption-Side

Speaking of table properties, this property is used to declare the table title displayed in the sidebar of the table. It accepts four values: top, bottom, left, and right. Internet Exporter does not support this property, and the table title will always appear at the top of the table in IE 6 and IE 7.

5. Counter-Increment / Counter-Reset

Ordered lists () are convenient because they save you the trouble of adding incremental numbers manually, and they allow you to change the order of the list without changing the numbers.

CSS has counter-increment and counter-reset properties that allow you to automatically generate incrementing numbers on almost any html element, just like an ordered list.

Here's an example:

CSS Code Copy content to clipboard

h3 {countercounter-increment: headers;}

h2:before {content: counter(headers) ". ";}

The style above will automatically add an incremental number to all labels and allow you to do the same thing on h3 labels as li labels.

But IE6, IE7 and even Safari(until version 3.x) don't support these properties. Of course, IE6 does not support:before pseudo-elements either.

6. Min-Height

Sometimes, the design or layout structure of a website requires a content area with a fixed height, otherwise certain visual effects will be lost. This could be because of a gradient background, a unique drop-down list, or maybe it could be because of the cool glow effect that comes out of Photoshop. But sometimes, there is more content in the page, and the page does not expand as expected.

The min-height attribute is needed because it tells the browser the minimum height to render on a particular block-level element, regardless of whether the actual height of the content reaches that minimum height. Then, if the content exceeds the minimum height, the element expands moderately.

The only thing to note about min-height is that it is not supported in IE 6. We all know that IE 6 is on its (slow) way out of history, but some customers may still want their sites to support this damn browser.

Happily though, IE6 renders height values exactly the same way other browsers render "min-height," so you just need an IE6 hack or separate stylesheet to add a specific height to the element, and that problem is solved.

IE6 also ignores min-width, max-height, and max-width, but the above approach works on these properties as well.

7. :hover

Technically,:hover is just a pseudo-class, but it is not supported in IE6 (supported in IE7 and IE8). The hover pseudo-class allows you to add any mouse over style to an element. This is useful to avoid (at least to some extent) the use of javascript.

But if your site needs to fully support IE6, especially in China, then you must consider eliminating this pseudo-class unless the associated tag has a "href" attribute, such as the tag. And if you want to achieve this effect, you may have to resort to javascript and additional styles.

8. Display

Display is usually set to one of three values: block, inline, and none. "Thanks to"IE, other values of Display are rarely used. These values include inline-block, table, inline-table, table-cell, etc. These attributes are useful for solving special layout problems.

So, while IE does support these three basic attributes of Display, it basically doesn't support the others.

In fact, IE8's support for display attributes is quite complete. However, for the inline-block attribute, IE 6/7 only supports elements that are inline themselves.

9. Clip

This is an interesting CSS property that can come in handy in special situations. It may be combined with unpredictable, dynamically generated content. In simple terms, this property allows you to specify hidden areas on a particular element-also understood as clipping the display area of an absolutely positioned element according to certain settings, beyond which content will be hidden. The grammar looks like this:

CSS

div.clipped {

padding: 20px;

width: 400px;

height: 400px;

clip: rect(20px, 300px, 200px, 100px);

position: absolute;

}

Trimming can only be applied to an absolutely positioned element, and only rectangular areas are used. The area marked by the numbers in brackets (size 200px*180px) is the visible area, and the content outside this area is invisible or clipped.

Technically, the clip attribute is supported by IE, but only comma free syntax is supported, such as

CSS

div.clipped {

padding: 20px;

width: 400px;

height: 400px;

clip: rect(20px 300px 200px 100px);

position: absolute;

}

The above style (the attributes in parentheses after rect are not separated by commas) will work in most browsers, but may not pass CSS validation because the statements are not separated by commas.

10. :focus

This is another pseudo-class that needs to be mentioned here because all non-IE browsers support this property.: The focus pseudo-class allows you to declare a particular style that is dynamically applied to a page element when that element becomes the focus of the keyboard (mouse). This is useful on form elements because you can add a border to an input box when it is checked.

The following style adds a red border when the input box becomes keyboard focus:

CSS

input:focus {

border: 1px solid #f00;

}

The above is what the practical CSS attributes shared by Xiaobian are. If you happen to have similar doubts, you may wish to refer to the above analysis for understanding. If you want to know more about it, please pay attention to the industry information channel.

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.