There are many CSS properties that some designers simply don’t know about. Or - they know, but they forget to use these properties where they can be of great benefit. Some of these properties can help to abandon the use of JavaScript for the sake of achieving a certain result; some can save time by writing smaller amounts of CSS code. Being engaged in front-end development, I constantly come across such properties. Once I thought of taking and compiling a list of CSS properties that are interesting but rarely used. And this article was born.

Here I’ll talk about some CSS properties that I hope you find worthy of attention. When talking about some of them that do not differ in perfect browser support, I will talk about how to apply them using the technology of progressive improvements. This will allow you to safely use these properties and not worry about their support by browsers.

ITKarma picture

Using the place-items property with CSS Grid


ITKarma picture

Example of using the place-items property

I found out about this trick from this tweet. The CDMY0CDMY property allows you to center an element horizontally and vertically, while doing so with a minimum amount of CSS code.

Here is the HTML markup used to form the page from the previous image:

<div class="hero">     <div class="hero-wrapper">         <h2><font color="#3AC1EF">CSS is awesome</font></h2>         <p>Yes, this is a hero section made for fun.</p>         <a href="#">See more</a>     </div> </div> 

Here is the style code:

.hero {     display: grid;     place-items: center; } 

Before delving into the details, I think it's worth mentioning that the CDMY1CDMY property is an abbreviation used to configure the CDMY2CDMY and CDMY3CDMY properties. If this property were not used, then the above CSS code would look like this:

.hero {     display: grid;     justify-items: center;     align-items: center; } 

You might be interested in details about the operation of this property. Let me tell you about them. When the CDMY4CDMY property is used, it is applied to each grid cell. This means that it centers the contents of all cells. That is, with its help you can stylize everything that is placed in the grid cells. To demonstrate this, let's look at styling a grid with multiple cells:

.hero {     display: grid;     grid-template-columns: 1fr 1fr;     place-items: center; } 

Using this style will result in the result shown in the following figure.

ITKarma picture

The contents of all cells are centered

Using the good old margin property with CSS Flexbox


ITKarma picture

Center alignment of elements when working with the Flexbox layout

Using the CDMY5CDMY design in Flexbox layouts makes it very easy to center elements horizontally and vertically.

Here is the markup:

<div class="parent">     <div class="child"></div> </div> 

Here is the style:

.parent {     width: 300px;     height: 200px;     background: #ccc;     display: flex; } .child {     width: 50px;     height: 50px;     background: #000;     margin: auto; } 

Styling list markers


ITKarma picture

Stylized list markers

To begin with, let me admit that I did not know that the small circles next to each item in a bulleted list are called “markers”. Before I learned about the existence of the CDMY6CDMY pseudo-element, I set up these “circles” by resetting the list style and using the CDMY7CDMY or CDMY8CDMY pseudo-elements. But this is completely impractical and wrong.I mean the following:

ul {     list-style: none;     padding: 0; } li {     color: #222; } li::before {     content: "•";     color: #ccc;     margin-right: 0.5em; } 

As you can see, here the color of the CDMY9CDMY element is set as CDMY10CDMY, and the color of the pseudo-element CDMY11CDMY is CDMY12CDMY. If you would like CDMY13CDMY and CDMY14CDMY to have the same color, then, since the marker inherits the color CDMY15CDMY, there would be no need for a pseudo-element.

And here is how the same problem is solved with the help of CDMY16CDMY:

li {     color: #222; } li::marker {     color: #ccc; } 

As for me, this approach is much simpler and more convenient than the one where the CDMY17CDMY pseudo-element was used.

The CDMY18CDMY pseudo-element is supported in Firefox 68+ and Safari 11.1+. In Chrome and Edge 80+, to enable its support, you need to activate the corresponding flag.

Text-align property


As CSS Grid and CSS Flexbox grow in popularity, some developers who have just started using CSS often use modern mechanisms to center and align content, rather than the old CDMY19CDMY property. But this property is still perfectly functional.

Using CDMY20CDMY allows you to quickly and easily align page content. Consider an example.

ITKarma picture

Aligning the contents of the top of the page

The contents of the section must be centered. What to use to create the layout of this section? Flexbox or Grid? In fact, this problem can easily be solved by just using the CDMY21CDMY property.

And what about this property with browser support? I suggest you figure it out yourself.

inline-flex value of the display property


ITKarma picture

Using the inline-flex value of the display property

Have you ever needed to display several icons in a Flexbox container, which is an inline element, making each of these icons be a Flexbox element? The value CDMY22CDMY of the property CDMY23CDMY is intended to solve this problem.

Here is the markup describing the set of elements:

<span class="badge"><svg></svg></span> <span class="badge"><svg></svg></span> <span class="badge"><svg></svg></span> <span class="badge"><svg></svg></span> 

Here is the styling code for these elements:

.badge {     display: inline-flex;/* здесь творятся чудеса */    justify-content: center;     align-items: center; } 

The next time you need a line item with Flexbox layout functionality, be sure to use CDMY24CDMY. It is very convenient.

The column-rule property


ITKarma picture

Applying the column-rule property

Layout using columns is a special method for creating page layouts. When using it, the elements are distributed in columns. Usually this technique is used to align texts placed in CDMY25CDMY elements. But multi-column layout has one possibility, which is used much less often than it would be worth. We are talking about the possibility of adding column separators. I found out from the this article.

p {     columns: 3;     column-rule: solid 2px #222; } 

The name of the property, CDMY26CDMY, does not seem to accurately reflect its purpose. It would be more logical to call it, for example, “border-right”. This property is very well supported by all current browsers (IE 10+, Firefox 3.5+, Chrome 4+, Safari 3.1+, Edge 12+).

Object-fit property


ITKarma picture

Using the object-fit property

The CSS property CDMY27CDMY is just the “wand” of a web designer. When I found out about him, I, using it, began to work in a new way, which seriously made my life easier.For example, recently I worked on a section of one site that displayed a set of logos. Such sections are sometimes quite difficult to create due to the fact that logos have different sizes. Some of them are stretched horizontally, some - vertically.

Using the CDMY28CDMY property, I was able to control the CDMY29CDMY and CDMY30CDMY logo properties, which allowed me to place logos in areas with a predefined width and height.

Here is the markup:

<ul class="brands">     <li class="brands__item">         <a href="#">             <img src="img/logo.png" alt="">         </a>     </li>     <li> <!-- другие логотипы --> </li> </ul> 

Here is the style:

img {     width: 130px;     height: 75px;     object-fit: contain; } 

By setting the CDMY31CDMY and CDMY32CDMY properties of the CDMY33CDMY element, we can control the area in which the logo will be placed. It is very convenient. Better still, we can put the above code into the CDMY34CDMY directive, which will avoid stretching images in browsers that do not support CDMY35CDMY.

@supports (object-fit: contain) {   img {     object-fit: contain;     height: 75px;   } } 

Do you know any interesting but little-known CSS properties?

ITKarma picture.

Source