5 Rarely-Used CSS Properties

Master the little-known CSS attributes and improve web design skills! This article will introduce 5 practical but rarely used CSS properties that work in all modern browsers and can help you solve some of the tricky web design challenges.

There are many CSS attributes, and some uncommonly used attributes are easily forgotten. Here are 5 practical but little-known CSS properties:

1. Text case conversion (text-transform): This property is used to change the case of HTML element text, making it easier for designers to adjust styles without modifying HTML code. The main values ​​include: capitalize (capsular), lowercase (lowercase), uppercase (capsular), none (no change). It should be noted that when the IE browser is set to font-variant, the small-caps value may have different performances. none

2. Letter-spacing and word-spacing: Writing page text in HTML is easier to maintain and is conducive to SEO. Can adjust the character spacing (px, em, ex, %, etc.), for example: letter-spacing h2 { letter-spacing: 0.1em; } similar, but act on word spacing. word-spacing

Example:

Wide character spacing title (0.1em)
Narrow character spacing title (-0.1em)

3. Text-indent: Define the left indent of the first line of the text block (or the right indent when text-indent is set to "rtl"), for example: direction. Although p { text-indent: 10px; } can also achieve similar effects, padding does not affect the width of the element and is very useful in scenarios such as IE compatible menus, such as: text-indent

ul#menu li a {
    display: block;
    width: 100%; /* IE hasLayout applied */
    text-indent: 10px;
}

4. Fixed table width (table-layout): Tables are still used for table data, but when the browser defaults to "auto", it can be difficult to style column widths. If the cell text requires more space, the automatic algorithm may overwrite the table width you specified. Set table-layout to "fixed" to force the browser to comply with the table width you specified. table-layout

5. White-space handling: Determines how the browser renders whitespace in HTML. Although the cross-browser support is uneven, the following properties are compatible with good properties: white-space (Whitespaces are collapsed into a single character, and newlines are processed as needed), normal (Whitespaces are collapsed into a single character, but line breaks are suppressed), nowrap (Whitespaces are not collapsed, they are only broken at HTML newlines). pre

is essential when rendering code snippets, but it is also useful in other situations. For example, in a table with white-space set to "fixed": table-layout

If you want all rows to be consistent and crop long text (for example, using the JS prompt box to display full text), setting the CSS height of tr or td elements is invalid, but you can use white-space:

ul#menu li a {
    display: block;
    width: 100%; /* IE hasLayout applied */
    text-indent: 10px;
}

Reference:

5 least commonly used HTML tags

• 10 fixes to solve IE6 problems
• Opera MAMA Project (Web Structure Search Engine)
Do you have other less-known CSS properties you like?

FAQs about little-known CSS attributes (FAQ)

• What is the importance of understanding little-known CSS attributes?

  Understanding these attributes can significantly improve your web development skills, which provide unique styles and effects, solve design problems that common attributes cannot solve, and thus create more attractive websites.

• What is the ‘ch’ unit in CSS and how to use it? Units represent the width of the "0" character in the current font, and are used to set the width or margins that scale with the text size. ch

• How does the 'calc()' function in CSS work? Functions allow you to perform calculations to determine the CSS attribute value, which can be used to add, subtract, multiply, divide and different units. calc()

• What is the ‘currentColor’ keyword in CSS and how to use it? keyword refers to the current color value of the element, which is equivalent to the currentColor attribute value of the element. color

• How does the ‘object-fit’ attribute in CSS work? object-fit Properties specify how an image or video is resized to fit its container.

• What is the ‘writing-mode’ attribute in CSS and how to use it? writing-mode Properties specify the direction of flow of text within a block, which is used to create vertical text or to change the direction of text in a right-to-left writing language.

• How does the 'tab-size' attribute in CSS work? tab-size

  attribute specifies the width of the tab character, and the default value is 8 spaces.

• What is the ‘resize’ attribute in CSS and how to use it? resize

  Attributes allow users to resize elements.

• How does the ‘outline-offset’ attribute in CSS work? outline-offset

  Properties specify the space between the outline and the edges or borders of the element.

• What is the ‘all’ attribute in CSS and how to use it? all direction Properties are an abbreviation property that resets all CSS properties (except unicode-bidi and

  ).

The above is the detailed content of 5 Rarely-Used CSS Properties. For more information, please follow other related articles on the PHP Chinese website!