UI Development

A curated list of useful CSS properties which are rarely used – 2020

We often fall on JavaScript for achieving any complicated requirement and increase the load on the page, not knowing that it can be achieved by CSS as well.

How many times in a design analysis meeting do we say that this is not possible via CSS? In order to solve this problem, I am curating a list of all the CSS properties that we didn’t hear much of or rarely used, not knowing how powerful it can be. This list can come handy to develop a nice looking and interactive page. I will also add the browser compatibility for these properties.

1. perspective 

We generally use the transform property with the degree value to rotate the element in certain angles, Along with that, we can add the perspective CSS property which gives the user the feel of depth to the 3D-positioned element. 

Syntax : 

perspective: length|none|initial|inherit;

 

In the above example image, The red block can be achieved by using the perspective CSS property. The smaller the value, you get closer to the Z plane and the visual effect is more. The greater the value, the minor will be the effect.

Please note that When defining the perspective property for an element, it is the CHILD elements that get the perspective view and not the element itself. Along with this, we can use the property perspective-origin to define at from which position the user is looking at the 3D-positioned element.

Example source: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_perspective1

Browser compatibility: This is not supported in IE9 and earlier versions.


2. text-decoration-color 

Most of us rely upon the border property to add an underline or a divider even if it is only a straightforward bottom line and we do that because we want to apply a particular color to that line. We are programmed to use the text-decoration property only when we are dealing with the anchor tags but We can use this for any element and also add a top border and other styles. Using this simple text-decoration-color property we can modify the color of the existing underline color to any color of our choice.

Syntax : 

text-decoration-color: color|initial|inherit;

In the above example image, I have used both border property for the exterior line and text-decoration property for the interior horizontal lineThe border gets applied over the padding and the block section whereas the text-decoration is directly above the text.

Example source: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-decoration-color

Browser compatibility: This not supported in Edge/Internet Explorer.


3. shape-outside

This property controls how the content will wrap around a floated element’s bounding box. Using this the text can reflow over a shape such as a circle, ellipse or a polygon instead of the ideal side by side float behavior. The shape-outside provides a way to customize the content wrapping, making it possible to wrap text around complex objects rather than simple boxes. This property works on floated elements only for now.

Syntax : 

shape-outside: none | <shape-box> || <basic-shape> | <image>;

For more details refer: https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside

Example source:  https://codepen.io/team/css-tricks/pen/7fa99015d63597648d5e312c5b73ac25

Browser compatibility: https://caniuse.com/#search=shape-outside


4. object-fit

This might not be a rarely used one but it is very powerful and if used properly then we can reduce the need of using multiple images for RWD so I thought it is a good idea to list it down here. This property defines how an element responds to the height and width of its parent box. It lets us crop an inline image by giving us good control over how it shrinks and stretches inside its box.  It can be used with the object-position property to specify which part to focus on and by default, the image is centered within its content-box 

Syntax : 

object-fit: fill | contain | cover | none | scale-down

Case study:

In one of the projects, we were provided with three separate images for the mobile, tablet and desktop view for the banner component. Example images are added below:

Desktop image –

Mobile image –

In the desktop, we had some data on the right-hand side of the figure whereas in mobile the data would stack and go below the image so we don’t need the blank area in the image as shown in the above images. We thought to reduce the unnecessary load by adding three different images and instead thought to crop the unwanted area using the object-fit and object-position property.

Sample markup:

<img src="/dummy-img.png" class="img" alt="figure" />
.img{
     width: 980px;
     height: 315px;
     object-position: top;
     object-fit: cover;
}

 

Without object-fit, if we want to get similar output then we will have to use a parent element and absolute positioning and other properties.

Browser compatibility: This not supported in Internet Explorer.


5. position: sticky;

The sticky feature is something for which many programmers write JS code but Ta-da!! we have a CSS property directly in order to achieve this feature. 

 A sticky element switches between relative and fixed, depending on the position of the scroll. Until a given offset position value is reached in the viewport It is relative and then it “sticks” in place (like position: fixed).

Sample markup:

.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

 

Example source: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sticky_element

Browser compatibility: Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari needs a -webkit- prefix and you must also mention at least one of the CSS attributes top, right, bottom or left for the sticky positioning to behave as expected.


6. border-image

If we want to add some text enclosed within a fancy border we mostly use an image directly. We can try to build this with CSS as well as it allows us to have flexibility with the content and the styling of the content. You can set an image that can be used as the border around an element using this property.

This takes up three values – The image path, Where to slice the image and if the middle sections should be stretched or repeated.

Example source: https://www.w3schools.com/css/tryit.asp?filename=trycss3_border-image

Browser compatibility: Internet Explorer 10, and earlier versions, do not support the border-image property.


7. hyphens

Word-break and word-wrap properties are largely used when dealing with breaking long words. Whether or not the hyphenation is allowed or not is decided by using the hyphen property and it creates a soft wrap within a line of text.

Syntax :

hyphens: none|manual|auto|initial|inherit;

Using ‘auto’ the Words are hyphenated where the algorithm is deciding if it is needed.

Sample markup:

.longText {
     -webkit-hyphens: auto;
     -ms-hyphens: auto;
      hyphens: auto;
}

 

Example source: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_hyphens

Browser compatibility: In Firefox and Internet Explorer, automatic hyphenation only works for some languages


8. list-style-image

Many times we move from the traditional bullet point styling to some other UX defined markers. One of the popular methods to achieve this is to hide the default bullet and use pseudo-selector before to give the image of our choice. Alternatively, we can directly do this with the CSS list-style-image property.

Syntax :

list-style-image: none|url|initial|inherit;

Sample markup:

list-style-image: url("../../media/examples/rocket.svg");

 

Example source: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_list-style-image

Browser compatibility: Most of the latest versions of all browsers supports this.


9. caret-color

This one might not be very useful for readable web pages but can be of good use for developing online editors, forms, etc. The color of the caret(blinking cursor) usually matches the color of the text, but using this property we can change it independently.

Syntax :

caret-color: auto|color;

Sample markup:

<p contenteditable class="editable">This paragraph can be edited. The caret color is red</p>
.editable{
     caret-color: red;
}

 

Example source: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_caret-color

Browser compatibility: Edge and Safari 10 and earlier do not support the caret-color property.


Few of the other useful properties are text-align-last, pointer-events and font-smoothing. 

Whew, these properties are going to be of good help and some already proved to be helpful for me. This list is created out of some experience and some research. Happy Reading !!

About The Author