CSS's Forgotten Treasures: 15 Rarely Used But Powerful CSS Properties (2026 Update).

CSS (Cascading Style Sheets) is the language that shapes the visual identity of the web. Beyond the basic properties we use every day, such as color, font-size, margin, and padding, there are dozens of powerful properties lying in the depths of the CSS specifications, that most developers aren't even aware of or rarely use. Inspired by a list written years ago by Matthew, one of the founders of Moz (formerly known as SEOMoz), we are setting out to rediscover these "forgotten treasures" in the light of today's modern web standards.

This list is not just a nostalgic walk, but also an evolutionary story. Although some properties in the original list have lost their importance over time due to browser support issues or the emergence of more modern alternatives, some still offer elegant solutions to specific niche problems. In this guide, we will examine each property with its original definition, exploring in depth its validity in 2025, its modern alternatives (such as Flexbox, Grid), and practical use cases. This will not only make you a more knowledgeable developer, but also remind you once again how rich and powerful a language CSS is.

Important Warning: Testing Is a Must!

Some properties in this list, especially older or experimental ones, may not work consistently across all browsers. Before using a property in your project, it is best practice to check current browser compatibility on platforms like Can I use... and to do thorough testing across different devices.

15 CSS Properties Waiting to Be Discovered

1. 1. Clipping: clip and Its Modern Alternative clip-path

   Original Definition: clip: rect(5px, 40px, 45px, 5px);
   This old property allowed clipping an element (usually an image) only into a rectangular shape. The entire image would load, but only the portion within the specified coordinates would remain visible. It had to be used with position: absolute or position: fixed, which significantly limited its flexibility.

   2026 2026 2025 Update: The clip property is now considered "deprecated." Our hero on the modern web is clip-path. This property allows you to clip elements not only in rectangles, but also in shapes such as circles, ellipses, polygons, and even complex SVG paths. It is incredibly powerful for creating creative hover effects, interesting image galleries, or shapes that wrap around text. clip-path is one of the most fun features of modern CSS that adds dimension to design.

2. 2. Visibility: The Fine Line Between visibility and display

   Original Definition: visibility: (hidden | visible);
   This property controls whether an element will be visible. When set to visibility: hidden;, the element becomes invisible but continues to occupy its place (the area it takes up) on the page. It's as if an invisible cloak has been draped over the element. The page layout is not disrupted.

   2026 2026 2025 Update: This property is still valid and extremely useful. Understanding the difference between this and its biggest rival, display: none;, is critical. When display: none; is used, the element doesn't just become invisible; it is also completely removed from the page flow, as if it never existed in the HTML code. The space it occupied also disappears, and other elements shift into its place. When should you use which? If you want to temporarily hide an element and don't want the page layout to be disrupted when it returns (for example, to prevent the content under a dropdown menu from jumping), visibility: hidden; is ideal. If you want to completely remove the element and have others fill its place, display: none; is the right choice.

3. 3. Text Shadow: text-shadow

   Original Definition: text-shadow: 1px 1px 2px black;
   This property allows you to add one or more shadows to text. The parameters are, in order: horizontal (x) offset, vertical (y) offset, blur radius, and shadow color.

   2026 2026 2025 Update: text-shadow is still a widely used and beloved property. It is perfect for adding depth to design, separating text from the background, or creating creative typographic effects. By separating with commas, you can add multiple shadows, allowing you to achieve much more complex effects such as neon glow, 3D text, or embossing. In modern design, it gives the best results when used subtly and without exaggeration.

4. 4. Adding Content: content

   Original Definition: element::before { content: "Prefix: "; }
   This property, used together with the ::before and ::after pseudo-elements, allows you to add content before or after an element through CSS without touching the HTML.

   2026 2026 2025 Update: The concern stated in the original article that it "contradicts the logic of CSS" no longer applies. The content property has become one of the most powerful and creative tools of modern CSS. Its main purpose is to add decorative or auxiliary content. For example, it is used to automatically add an arrow icon at the end of a link, place special icons at the beginning of list items (instead of list-style-image), or to stylize quotation marks. It is one of the keys to creating elegant and functional interfaces with pure CSS, without needing JavaScript.

5. 5. Quotes: quotes

   Original Definition: q { quotes: "«" "»"; }
   This property defines the type of quotation marks to be used by the (inline quote) tag. It is used together with the content property to automatically add these quotation marks at the beginning and end of the tag.

   2026 2026 2025 Update: The compatibility issues that Internet Explorer caused in the past have largely been eliminated. The quotes property is still the most accurate method for creating semantically correct and stylistically consistent quotes. Especially on multilingual sites, it allows you to easily manage quotation marks appropriate to each language's typographic rules (for example, « » for French, „ “ for German) using CSS. This is an elegant detail that enriches the presentation of content.

6. 6. Counters: counter-reset and counter-increment

   Original Definition: These are properties that allow CSS to start (reset) and increment a counter.

   2026 2026 2025 Update: CSS counters are one of CSS's hidden superpowers. Beyond ordered lists (

   ), they allow you to create complex and nested numbering schemes. For example, they are perfect for automatically numbering main headings in a document as "Section 1, Section 2" and subheadings as "1.1, 1.2, 2.1." Used together with the content property and the counter() function, dynamic and stylized numbering can be created without changing the HTML structure. This is invaluable, especially for long articles, technical documentation, or legal texts.

7. 7. Print Styles: marks, page-break-before/after, orphans, widows

   Original Definition: This group of properties (marks, page-break-before/after, orphans, widows) is designed to control how a web page will appear when printed. They are used for page breaks, crop marks, and to prevent a paragraph from being split.

   2026 2026 2025 Update: Although print styles are not as popular as before due to the rise of digital consumption, they are still extremely important for content likely to be printed, such as invoices, reports, tickets, or long articles. By using these properties within the @media print { ... } rule, you can hide unnecessary elements such as on-screen navigation and ads, make text more readable, and control page transitions in a logical way. Controlling the orphans (a single line left at the end of a paragraph) and widows (a single line left at the beginning of a new page) properties is the key to producing professional and readable output.

8. 8. Font Settings: font-size-adjust, font-stretch, font-variant

   Original Definition: These properties aim to control the appearance of fonts in a more refined way. font-size-adjust is used to improve readability, font-stretch to spread or condense letters, and font-variant to create a small-caps effect.

   2026 2026 2025 Update:

   • font-variant: With its "small-caps" value, it is still a widely used property that adds elegance to typography.
   • font-stretch: Whether this property works depends on whether the font family you use has condensed or expanded versions. With the rise of variable fonts, this property has become much more powerful and flexible.
   • font-size-adjust: Browser support has always been weak, and it has been used very little in practice. Although interesting as an idea, it has not found a place for itself in the world of web development.

9. 9. Table Properties: caption-side, table-layout, empty-cells

   Original Definition: These properties control the presentation of HTML tables. caption-side determines the position of the caption, table-layout determines the table's render algorithm, and empty-cells determines the appearance of empty cells.

   2026 2026 2025 Update: Tables, which were frequently used for page layout in the past, are now almost never used for this purpose (Flexbox and Grid have taken their place). However, they are still the most accurate semantic tool for presenting actual tabular data (price lists, statistics, etc.). In this context, these properties are still valid. In particular, table-layout: fixed; can improve performance by allowing large data tables to be displayed faster. empty-cells: hide; can be used for a cleaner and more orderly appearance.

Conclusion: Knowing the Past Is Shaping the Future

This journey through the world of CSS shows us how much the language has evolved and how rich it has become. Many effects that once required complex JavaScript code or image tricks can now be elegantly solved with a single CSS property such as clip-path, text-shadow, or content. Knowing these "forgotten" properties and their modern alternatives enriches your toolbox and makes you a more creative, more efficient, and more knowledgeable developer. In your next project, try going beyond standard solutions and creating magic by using one of these treasures. The result may surprise you.