After 20some years, CSS has grown substantially. There are a lot of properties, selectors, methods, and now, even compilation tools, syntax checkers, and CSS code generators. Along the way, there have been useful CSS properties introduced and some have been deprecated. There’s a lot under the hood, some of which you probably don’t know about. Here’s some CSS Properties you may not know.

Caret color

The caret color property changes the color of the cursor in editable fields, technically called a caret (who knew that was the technical name!!??). Though the color of the caret typically matches that of the text, this property allows control over both independently.

input {
    caret-color: orange;
}

See the Pen Caret-Color demo by Nate Northway (@the_Northway) on CodePen.

Support for caret-color isn’t great. It works in Firefox, Chrome, and Safari on desktop, but not IE or edge. Chrome for Android, Firefox Mobile, UC Browser, and Samsung Mobile are in full support. Safari and Opera Mini does not support it.

Clip-path

The clip-path property allows the specification of a specific region of an element to display as opposed to showing the whole area. The most frequent usage of clip-path is on images, but it’s not limited to that.

img.class {
    clip-path: inset(10px 15px 10px 15px);
}

See the Pen Clip-path demo by Nate Northway (@the_Northway) on CodePen.

Browser support is…complicated. At the time of writing, the only browser to fully support this property is desktop Firefox. The rest of the browsers don’t support shapes in external SVGs, and IE and Edge offer no support at all.

Usage
There’s a lot of space to be creative with here. Clip-path can be used in animations, too. CSS-Tricks has a really great article on it that I can’t compete with (if ya can’t beat ’em, join ’em, right?).

Counters

Wow, counters are really cool. So cool, that I already wrote about them!
CSS counters are a variable controlled by CSS and manipulated with properties. It gets pretty complicated. Read the blog link above to learn more.

Empty-cells

I know tables are kind of…old, but I still use them. There are quite a few different ways to make tables useful across platforms. One of the tools that help makes tables easier to work with is the empty-cells property. It allows control from CSS over displaying borders and backgrounds on table cells without content. It accepts primary values of show or hide, and of course the globals of initial, inherit, and unset.

.empty-cells {
    empty-cells: hide; //hides empty cells
    empty-cells: show; //show empty cells
    empty-cells: initial; //use the default value
    empty-cells: inherit; //inherit the value from the parent
    empty-cells: unset; //reset to its inherited value
}

Practical Applications
A long time ago, when table layout was the main way to markup webpages, this would have been a really useful property. Now, not so much – but it still can be useful, especially when working with tabular data that could be empty. A pen is below to demonstrate the differences.

See the Pen Empty Cells! by Nate Northway (@the_Northway) on CodePen.

Browser Support is great, with every browser supporting this property.

Outline Offset

The outline-offset property sets the space between an outline and the edge or border of an element. An element’s outline is a line drawn around the edge of an element, outside its border. The space between the element/its border and its outline is transparent.
Practical Applications
I don’t really use outline, but I could see some applications for it. It doesn’t take up space, unlike a border, so maybe it could be a way to bring attention to an element without forcing a reflow of content. Either way, using outline offset can help make that attention look a little better. The Codepen example below might show what I mean a little better (c’mon, I’m a programmer, not a wordsmith).

See the Pen Outline-offset demo by Nate Northway (@the_Northway) on CodePen.

Object-fit

The object-fit property is also pretty rad. It defines how an element reacts to the height and width of its content box. Its intended for images and videos and other embeddable media in conjunction with the object-position property. However, when used by itself, object-fit lets us fine-tune the cropping of an element. The property will accept five values:

.el {
//ignore height and width of content box and retain original size
    object-fit: none;
//increase or decrease the size of the image to fill the box while preserving aspect ratio without cropping
    object-fit: contain;
//fill the height and width of the content box while preserving aspect ratio but with cropping
    object-fit: cover;
//the default value: stretch the image to fit the content-box, regardless of aspect ratio
    object-fit: fill;
//compare the difference between `none` and `contain` to find the smallest content size
    object-fit: scale-down;
}

I actually wrote about object-fit last year. My use case was preserving aspect ratios in profile pictures.
That use case aside, let’s take a look at some more demos.

See the Pen Object-fit demo by Nate Northway (@the_Northway) on CodePen.

Browser support is pretty good – IE being the only browser that doesn’t offer support and Edge being the only major browser without full support (only applicable to <img /> elements). Opera supports the property with the -o- prefix.

Pointer Events

The pointer-events property allows for control over how HTML elements respond to mouse/touch events. This includes hover or active states, click/tap events, and whether or not the cursor is visible. It can be useful for things like tooltips. While the property can accept eleven possible values, only 3 are meant for use with HTML, while the remaining 8 are meant for use with SVG.

.el {
//prevent all click, state, & cursor options
    pointer-events: none;
//restore default functionality
    pointer-events: auto;
//use the pointer-events of the element's parent
    pointer-events: inherit;
}

The prime use is to allow click or tap actions to go through an element on a z-axis – like on tooltips or graphic overlays. Check out the demo below.

See the Pen pointer-events demo by Nate Northway (@the_Northway) on CodePen.

Browser support is great with Opera Mini being the only browser to not support the property.

Quotes

This one is a bit of a two-parter because this property is meant to be used with the content: open-quote and content: close-quote rules. It allows you to control what type of quotes are shown when those are applied.

q {
  quotes: "“" "”" "‘" "’";
}
q:before {
    content: open-quote;
}
q:after {
    content: close-quote;
}

As far as usage, I don’t often find myself using it much, because I typically style quotes with a different background and font-style than the surrounding text. But I suppose inline quotes are a thing, so for practicality, this property is useful. The best case I can think of for this is when the page might be shown in multiple languages which use differing quote styles. I know the French language uses a different style, so maybe they’d have something like this:

html[lang='fr'] q {
  quotes: "«" "»";
}

Browser support is universal

Welcome to the end of the list. Hope ya learned something. I know I did. Got other not-often-used properties? Drop a comment – let’s learn about it.

No Comments...yet