Even if you happen to’re an professional internet designer, there are many obscure CSS properties you’re unlikely ever to make use of. In truth, with a whole lot of supported properties, there are components of CSS you’ll in all probability by no means even find out about. Some price realizing regardless of being unusual.
Due to Google’s Platform Status report you will discover out which properties are used the least, and possibly find out about a brand new, highly effective property whilst you’re 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’re simply not often used.
1
empty-cells
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.
Right here’s an instance desk, with one empty cell and one other that spans the cell under it:
desk>
tr>
td>Applestd>
td>4td>
tr>
tr>
td>Grapestd>
td>td>
tr>
tr>
td rowspan="2">Bananastd>
td>4td>
tr>
tr>
td>9td>
tr>
desk>
As a result of the empty cell has no content material in any respect, it may be managed with the empty-cells property:
td {
empty-cells: conceal;
}
Now, any desk cells with out seen content material will cease displaying any background coloration or border:
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.
2
text-underline-position
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:
a {
text-decoration: underline;
text-underline-position: beneath;
}
With an “beneath” worth, the underline will push down in order that it doesn’t intersect with the descenders in letters like j and g. This may enhance readability, particularly with shorter line-height settings.
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’s lucky that you just not must resort to it.
3
column-span
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’re not for general-purpose format, folks!
Nonetheless, when used to recreate conventional newspaper-style columns, this property can add curiosity to text-heavy designs and enhance readability. They’re notably helpful once you need to use the complete width of bigger screens, comparable to these used for desktop shows.
The column-span 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:
On this instance, spanning is simple:
h1, h2 { column-span: all }
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’s all or nothing.
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.
4
grid
The grid property is an fascinating case. Grid layouts at the moment are highly regarded typically, evidenced by grid-template-columns’ use in 42% of pages. However the easy grid shorthand is deeply unpopular, utilized by lower than half a % of pages.
Maybe it’s 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:
grid: "a" 100px "b" 1fr;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
grid: 30% / auto-flow dense;
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
It’s 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.
Associated
5
initial-letter
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.
Associated
How to Create a Drop Cap in Google Docs
You’ll be able to subtly enhance the looks of your doc with a drop cap.
This impact was potential, however solely through the use of the float property with some cautious tweaks to associated kinds. The initial-letter property simplifies this, with a easy worth indicating the size of that letter:
p {
initial-letter: 3;
}
You may as well present a second worth which determines the baseline of the drop-capped letter:
p {
initial-letter: 2 1;
}
Utilizing these values, you’ll be able to management the dimensions and vertical place of drop-capped letters:
6
text-emphasis
The text-emphasis 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’s 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 {
text-emphasis: crammed double-circle purple;
}.data {
text-emphasis: "!";
}
You should use the text-emphasis-position property to show marks both over or beneath the textual content in horizontal writing mode. Nevertheless it’s the text-emphasis model property that will get actually fascinating (text-emphasis is a shorthand for each). You should use a worth like “triangle” or “circle” to make use of a generic image. You may as well use any Unicode character, in quote marks, together with emojis:
A “sesame” 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 “open sesame.”
7
text-wrap-style
The text-wrap-style 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.
The 2 most important values are fairly and steadiness. 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.
Because it’s 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’s completely protected to make use of because the impact is delicate, with an inexpensive default.
Source link
