February 15, 2007

15 CSS Properties You Probably Never Use (but perhaps should)

Technical SEO

The author's views are entirely their own (excluding the unlikely event of hypnosis) and may not always reflect the views of Moz.

After writing 5 HTML Elements You Probably Never Use (but perhaps should), I thought creating something similar for CSS was in order. These are all CSS level 2 properties but some of them don't work in all browsers, so make sure and test things out before putting them into use.

1. clip
clip: rect(5px, 40px, 45px, 5px)

From iBloom Studios

A good way to visualize the clip attribute is if you take a piece of paper with a rectangle cut out of it and place it on top of a photo (just like using a Photoshop layer mask). The area of the rectangular hole, allowing the layer behind it to show through, is what the clip property will specify.

They've got a lengthy article all about clip and some examples of it in use.

2. visibility
visibility: (inherit | visible | hidden)

From Macromedia

For practical purposes, the difference between these two properties [visibility and display] is that when you hide information using the visibility property, the browser creates the appropriate amount of space in the browser window for the information when the page loads. When you use the display property, space for the information is not created until the element becomes visible.

3. text-shadow
text-shadow: color, x-coordinate, y-coordinate, blur radius
text-shadow: #000000 10px -5px 1px

From Quirksmode:

The text-shadow declaration allows you to create a text shadow; i.e. a slightly moved, slightly blurred copy of a text.

4. content
content: "Your browser supports content"

Use this property with the :before and :after pseudo-elements to generate content around a CSS selector.

Careful with this one, it goes against the idea of separating content from presentation. From quirksmode:

I feel that we shouldn't use the content declaration at all. It adds content to the page, and CSS is meant for adding presentation to the page, and not content. Therefore I feel that you should use JavaScript if you want to dynamically generate content. CSS is the wrong tool for this job.

I agree, but there are still some cool things you can do with content using CSS. Check out Curly Quotes from Design Meme.

5. quotes
q { quotes: '"' '"' }

From htmldog

[quotes] specifies what form the quotes of the open-quote and close-quote values of the content property should take. Not supported by IE.

A List Apart endorses the revival of the <q> tag using content

6. counter-reset and counter-increment
From the mozilla developer center

CSS counters are an implementation of Automatic counters and numbering in CSS 2.1. The value of a counter is manipulated through the use of counter-reset and counter-increment and is displayed
on a page using the counter() or counters() function of the content property.

body {
counter-reset: section; /* Set the section counter to 0 */
}
h1:before {
counter-increment: section; /* Increment the section counter */
content: "Section " counter(section) ": "; /* Display the counter */
}

7. marks
@page: { marks: <value>; }

From quackit.com

The CSS marks property is used to set crop marks and cross marks on paged media. This is used with the @page rule.

The following examples use the page-break-before attribute and the pageBreakBefore property to start printing on a new page.

This example uses the H3 element as a selector in an embedded style sheet to break the page before all H3 headings.

<STYLE>
H3 { page-break-before: always }
</STYLE>
</HEAD>
<BODY>
<H3>Start New Section on New Page</H3>

9. orphans and widows
orphans: <integer>
widows: <integer>

These two properties are used primarily in paged media to control line breaks by specifying the number of lines in a paragraph that should be left at the top (widows) or bottom (orphans) of a page.

About.com has a decent article about the CSS orphans property.

10. font-size-adjust
font-size-adjust: number

From w3schools:

The ratio between the height of the font's lowercase letter "x" and the height of the "font-size" is called a font's aspect value. If the aspect value is high, the font will be legible when it is set to a smaller size. For example: Verdana has an aspect value of 0.58 (means that when font size is 100 px, its x-height is 58 px). Times New Roman has an aspect value of 0.46. This means that Verdana is more legible at smaller sizes than Times New Roman.

The font-size-adjust property specifies an aspect value for an element that will preserve the x-height of the first-choice font.

The 'font-stretch' property selects a normal, condensed, or extended face from a font family. Absolute keyword values have the following ordering, from narrowest to widest:

ultra-condensed

extra-condensed

condensed

semi-condensed

normal

semi-expanded

expanded

extra-expanded

ultra-expanded

12. font-variant
font-variant: (normal | small-caps)

From w3schools

The font-variant property is used to display text in a small-caps font, which means that all the lower case letters are converted to uppercase letters, but all the letters in the small-caps font have a smaller font-size compared to the rest of the text.

13. caption-side
caption-side: (top | bottom | left | right)

This is used to define the position of a caption in a table.

14. table-layout
table-layout: (auto | fixed)

According to Quackit.com

The CSS table-layout property allows you to fix the table layout so that the table renders much faster.

Without the table-layout property, on large tables, users won't see any part of the table until the browser has rendered the whole table. This can give the impression that your page loads very slowly. On the other hand, if you use the table-layout property, users will see the top of the table while the browser loads and renders rest of the table. This gives the impression that the page loads a lot quicker.

15. empty-cells
empty-cells: (show | hide)

Quirksmode has a great explanation of empty-cells in Fun with Tables: which shows a side-by-side comparison of a bunch of CSS table properties and which browsers they are supported in.

Any other long lost CSS properties you can think of?

Table of Contents

15 CSS Properties You Probably Never Use (but perhaps should)

With Moz Pro, you have the tools you need to get SEO right — all in one place.

Read Next

6 Things SEOs Should Advocate for When Building a Headless Website — Whiteboard Friday

How to Speed Up a Technical Audit Execution for Faster SEO Growth [Free Templates]

3 Unexpected Examples of Technical SEO Issues (And How to Resolve Them) — Whiteboard Friday

Comments