{"id":78483,"date":"2025-05-24T11:45:08","date_gmt":"2025-05-24T11:45:08","guid":{"rendered":"https:\/\/mailinvest.blog\/index.php\/2025\/05\/24\/7-css-properties-youve-never-heard-of-and-how-to-use-them\/"},"modified":"2025-05-24T11:46:32","modified_gmt":"2025-05-24T11:46:32","slug":"7-css-properties-youve-never-heard-of-and-how-to-use-them","status":"publish","type":"post","link":"https:\/\/mailinvest.blog\/index.php\/2025\/05\/24\/7-css-properties-youve-never-heard-of-and-how-to-use-them\/","title":{"rendered":"7 CSS Properties You\u2019ve Never Heard Of (and How to Use Them)"},"content":{"rendered":"

<\/a>\n<\/p>\n

\n

Even if you happen to\u2019re an professional internet designer, there are many obscure CSS properties you\u2019re unlikely ever to make use of. In truth, with a whole lot of supported properties, there are components of CSS you\u2019ll in all probability by no means even find out about. Some price realizing regardless of being unusual.<\/p>\n

<\/p>\n

Due to Google\u2019s Platform Status report<\/a> you will discover out which properties are used the least, and possibly find out about a brand new, highly effective property whilst you\u2019re at it. I’ve put pulled out among the most fascinating. A few of these CSS properties are experimental, browser-specific, or in any other case not extensively applied. However all of the properties featured listed below are well-supported by present browsers; they\u2019re simply not often used.<\/p>\n

<\/p>\n

\n 1 <\/span>
\n
\n empty-cells
\n <\/span>
\n <\/h2>\n

This property is particular to tables, and you should use it at the side of border-collapse: separate. It controls whether or not cells with no seen content material present their background and borders.<\/p>\n

Right here\u2019s an instance desk, with one empty cell and one other that spans the cell under it:<\/p>\n

\n        desk<\/span>>\u00a0\u00a0\u00a0\u00a0tr<\/span>>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0td<\/span>>Applestd<\/span>><\/span>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0td<\/span>>4td<\/span>><\/span>\u00a0\u00a0\u00a0\u00a0tr<\/span>><\/span>\u00a0\u00a0\u00a0\u00a0tr<\/span>>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0td<\/span>>Grapestd<\/span>><\/span>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0td<\/span>>td<\/span>><\/span>\u00a0\u00a0\u00a0\u00a0tr<\/span>><\/span>\u00a0\u00a0\u00a0\u00a0tr<\/span>>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0td<\/span>\u00a0rowspan<\/span>=\"2\"<\/span>>Bananastd<\/span>><\/span>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0td<\/span>>4td<\/span>><\/span>\u00a0\u00a0\u00a0\u00a0tr<\/span>><\/span>\u00a0\u00a0\u00a0\u00a0tr<\/span>>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0td<\/span>>9td<\/span>><\/span>\u00a0\u00a0\u00a0\u00a0tr<\/span>><\/span>desk<\/span>><\/span><\/code>\n    <\/pre>\n
As a result of the empty cell has no content material in any respect, it may be managed with the empty-cells<\/strong> property:<\/p>\n
\n        td {\u00a0\u00a0\u00a0\u00a0empty<\/span>-cells: conceal;}<\/code>\n    <\/pre>\n
Now, any desk cells with out seen content material will cease displaying any background coloration or border:<\/p>\n
\n
\n
\n        \"Three\n    <\/picture>\n<\/figure><\/div>\n<\/p><\/div>\n
 This impact will be notably helpful with bigger tables, serving to to obviously determine lacking or uncommon information. Observe {that a} desk with collapsing borders will proceed to point out each borders and background, even when empty cells are hidden utilizing this property.<\/p>\n
\n            2 <\/span>
\n        
\n                            text-underline-position
\n                    <\/span>
\n       <\/h2>\n
Greater than 4 in 5 web sites use the text-decoration property, usually to manage how hyperlinks are underlined. However the underline worth for this property will be accompanied by a less-often-used property, text-underline-position<\/strong>:<\/p>\n
\n        a<\/span> {\u00a0\u00a0\u00a0\u00a0text-decoration<\/span>: underline<\/span>;\u00a0\u00a0\u00a0\u00a0text-underline-position<\/span>: beneath<\/span>;}<\/code>\n    <\/pre>\n
With an \u201cbeneath\u201d worth, the underline will push down in order that it doesn\u2019t intersect with the descenders in letters like j and g. This may enhance readability, particularly with shorter line-height settings.<\/p>\n
\n
\n
\n        \"Four\n    <\/picture>\n<\/figure><\/div>\n<\/p><\/div>\n
 Earlier than this property, a typical workaround was to emulate the underline with a backside border. That strategy has undesirable side-effects, nonetheless, and will be awkward to handle, so it\u2019s lucky that you just not must resort to it.<\/p>\n
\n            3 <\/span>
\n        
\n                            column-span
\n                    <\/span>
\n       <\/h2>\n
Columns are a reasonably little-used CSS property, that includes on slightly below 3% of all internet pages. Lengthy mimicked utilizing workarounds like show: float, columns have additionally suffered from cross-browser inconsistencies and a scarcity of clear understanding; they\u2019re not for general-purpose format, folks!<\/p>\n
Nonetheless, when used to recreate conventional newspaper-style columns, this property can add curiosity to text-heavy designs and enhance readability. They\u2019re notably helpful once you need to use the complete width of bigger screens, comparable to these used for desktop shows.<\/p>\n
\n
\t\t<\/p>\n
\n
\n
\n
\n        \"Illustration\n    <\/picture>\n<\/figure><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\t\t<\/a><\/p>\n
                    Associated<\/span><\/p>\n
\n
\n
\t\t
\n\t\t\tThese 10 Fun Games Will Teach You Modern CSS
\n\t\t<\/a>
\n\t<\/h5>\n
Difficult. Strategic. Satisfying.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n
The column-span<\/strong> property addresses the necessity to get away from column format in the course of a block, inflicting a component to span throughout columns, successfully ignoring them:<\/p>\n
\n
\n
\n        \"Three\n    <\/picture>\n<\/figure><\/div>\n<\/p><\/div>\n
 On this instance, spanning is simple:<\/p>\n
\n        h1<\/span>, h2<\/span> { column-span<\/span>: all }<\/code>\n    <\/pre>\n
This property is a straightforward one, with simply two vital values: none (the default) or all. The all worth signifies that a component ought to ignore columns and stretch throughout all which can be current. Not like the same HTML attribute for desk cells, colspan, there isn’t a assist for a numeric worth to span just a few columns; it\u2019s all or nothing.<\/p>\n
\n
\n
\n
Curiously, the column-gap property is utilized by over 30% of internet pages, ten instances the quantity that use the columns property. It’s because column-gap has broadened [tk] to use to layouts past columns, like flexbox and grid.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n
\n            4 <\/span>
\n        
\n                            grid
\n                    <\/span>
\n       <\/h2>\n
The grid<\/strong> property is an fascinating case. Grid layouts at the moment are highly regarded typically, evidenced by grid-template-columns\u2019 use in 42% of pages. However the easy grid shorthand is deeply unpopular, utilized by lower than half a % of pages.<\/p>\n
Maybe it\u2019s as a result of grid is such an advanced shorthand, combining all grid properties in a single. Listed here are some instance declarations that this property accepts:<\/p>\n
\n        grid: \"a\"<\/span>\u00a0100<\/span>px \"b\"<\/span>\u00a01<\/span>fr;grid: minmax(400px, min-content) \/ repeat(auto-fill, 50px);grid: 30% \/ auto-flow dense;grid: auto-flow dense 40% \/ [line1] minmax(20em, max-content);<\/code>\n    <\/pre>\n
It\u2019s little marvel that designers favor particular person properties like grid-template-columns (42%), grid-column (23%), and grid-gap (19%) as an alternative. However, like all shorthand properties, grid can save time and complexity, and may make your CSS extra maintainable. Watch out, although: overuse may be complicated, so think about using long-form properties like grid-auto-flow for clarification, the place acceptable.<\/p>\n
\n
\t\t<\/p>\n
\n
\n
\n
\n        \"Illustration\n    <\/picture>\n<\/figure><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\t\t<\/a><\/p>\n
                    Associated<\/span><\/p>\n
\n
\n
\t\t
\n\t\t\t11 Tips for Getting Started With Modern CSS
\n\t\t<\/a>
\n\t<\/h5>\n
Fashion suggestions that gained\u2019t exit of trend.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n
\n            5 <\/span>
\n        
\n                            initial-letter
\n                    <\/span>
\n       <\/h2>\n
A drop cap (dropped capital) refers to particular styling for the primary letter of a paragraph or block of textual content. You might even see this model in books or magazines, the place the preliminary letter is far bigger, heavier, and infrequently comes with ornate ornament or different model prospers.<\/p>\n
\n
\t\t<\/p>\n
\n
\n
\n
\n        \"Google\n    <\/picture>\n<\/figure><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\t\t<\/a><\/p>\n
                    Associated<\/span><\/p>\n
\n
\n
\t\t
\n\t\t\tHow to Create a Drop Cap in Google Docs
\n\t\t<\/a>
\n\t<\/h5>\n
You’ll be able to subtly enhance the looks of your doc with a drop cap.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n
This impact was potential, however solely through the use of the float property with some cautious tweaks to associated kinds. The initial-letter<\/strong> property simplifies this, with a easy worth indicating the size of that letter:<\/p>\n
\n        p {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0initial-letter: 3;}<\/code>\n    <\/pre>\n
You may as well present a second worth which determines the baseline of the drop-capped letter:<\/p>\n
\n        p {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0initial-letter: 2 1;}<\/code>\n    <\/pre>\n
Utilizing these values, you’ll be able to management the dimensions and vertical place of drop-capped letters:<\/p>\n
\n
\n
\n        \"Two\n    <\/picture>\n<\/figure><\/div>\n<\/p><\/div>\n
\n            6 <\/span>
\n        
\n                            text-emphasis
\n                    <\/span>
\n       <\/h2>\n
The text-emphasis<\/strong> property has nothing to do with the em (emphasis) tag or the italic worth for font-style that can be utilized to imitate the look of emphasised textual content. As an alternative, it\u2019s a manner of marking textual content to emphasise it, a bit like underlining it. The principle distinction is that text-emphasis attracts a selected character both above or under particular person characters.<\/p>\n
p {text-emphasis: crammed double-circle purple;}
.data {text-emphasis: \"!\";}<\/p><\/pre>\n
You should use the text-emphasis-position property to show marks both over<\/strong> or beneath<\/strong> the textual content in horizontal writing mode. Nevertheless it\u2019s the text-emphasis model property that will get actually fascinating (text-emphasis is a shorthand for each). You should use a worth like \u201ctriangle\u201d or \u201ccircle\u201d to make use of a generic image. You may as well use any Unicode character, in quote marks, together with emojis:<\/p>\n
\n
\n
\n        \"Some\n    <\/picture>\n<\/figure><\/div>\n<\/p><\/div>\n
\n
\n
\n
A \u201csesame\u201d is a typographic mark utilized in East Asian languages for emphasis. Since text-emphasis helps this character, your CSS can now legitimately embrace the worth \u201copen sesame.\u201d<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n
\n            7 <\/span>
\n        
\n                            text-wrap-style
\n                    <\/span>
\n       <\/h2>\n
The text-wrap-style<\/strong> property is the most recent on this listing, with assist throughout the most recent browsers touchdown in October 2024. When textual content inside a component wraps, this property hints to the browser what its precedence needs to be.<\/p>\n
The 2 most important values are fairly<\/strong> and steadiness<\/strong>. The previous means that the browser ought to optimize for format over pace. It ought to embrace enhancements like protecting the variety of orphan parts to a minimal. In the meantime, steadiness ought to make sure the variety of characters on every line is as shut as potential.<\/p>\n
\n
\n
\n        \"Two\n    <\/picture>\n<\/figure><\/div>\n<\/p><\/div>\n
 Because it\u2019s instructive, and assist continues to be new, you may not discover an enormous distinction when utilizing this property. The easiest way to attempt it out is to experiment on current pages and see what the varied results are like. Both manner, although, it\u2019s completely protected to make use of because the impact is delicate, with an inexpensive default.<\/p>\n<\/p><\/div>\n