{"id":1351,"date":"2020-08-14T13:57:57","date_gmt":"2020-08-14T13:57:57","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=1351"},"modified":"2020-08-14T13:57:57","modified_gmt":"2020-08-14T13:57:57","slug":"uncommon-css-properties","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=1351","title":{"rendered":"Uncommon CSS Properties"},"content":{"rendered":"\n

There are a lot of CSS properties that some don\u2019t know about, or they know about them, but forget to use them when they\u2019re needed. <\/p>\n\n\n\n\n\n\n\n

Some of those can save you using JavaScript to achieve a specific result, or some can save your time by writing less CSS. As a front-end developer, I came across such things every now and then, and I asked myself, why not list all those less-used and interesting CSS properties in an article?<\/p>\n\n\n\n

In this article, I will go through some different CSS properties that I hope you find them interesting. For some properties, I will try to show the browser support for them, and apply the progressive enhancement approach, so you can be encouraged to use it without the fear of saying \u201cThis is not supported in browser X, what should I do?\u201d.<\/p>\n\n\n\n

Are you ready? Let\u2019s dive in the less-used so you can know more. \ud83d\ude42<\/p>\n\n\n\n

Using Place-Items<\/code> With CSS Grid<\/h2>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

I learned about this trick from Benjamin De Cock<\/a>. You can center an element horizontally and vertically with two lines of CSS.<\/p>\n\n\n\n

<div class=\"hero\">\n    <div class=\"hero-wrapper\">\n        <h2>CSS is awesome<\/h2>\n        <p>Yes, this is a hero section made for fun.<\/p>\n        <a href=\"#\">See more<\/a>\n    <\/div>\n<\/div>\n<\/code><\/pre>\n\n\n\n
.hero {\n    display: grid;\n    place-items: center;\n}\n<\/code><\/pre>\n\n\n\n
Before going into details, it\u2019s worth mentioning that place-items<\/code> is a shorthand property that combines justify-items<\/code> and align-items<\/code>. Here is how the code above could be:<\/p>\n\n\n\n
.hero {\n    display: grid;\n    justify-items: center;\n    align-items: center;\n}\n<\/code><\/pre>\n\n\n\n
You may wonder, how this works? Well, let me explain that. When the place-items<\/code> is used, it\u2019s applied on each cell<\/strong> in the grid. That means it will center the cell\u2019s content. That means, this technique can work with multiple cells. If we increase the number of columns, that will be more clear.<\/p>\n\n\n\n
.hero {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    place-items: center;\n}\n<\/code><\/pre>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
The Good Old Margin: Auto<\/code> With Flexbox<\/h2>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Combined with flexbox, margin: auto<\/code> can center a flex item horizontally and vertically very easily.<\/p>\n\n\n\n
<div class=\"parent\">\n    <div class=\"child\"><\/div>\n<\/div>\n<\/code><\/pre>\n\n\n\n
.parent {\n    width: 300px;\n    height: 200px;\n    background: #ccc;\n    display: flex;\n}\n\n.child {\n    width: 50px;\n    height: 50px;\n    background: #000;\n    margin: auto;\n}\n<\/code><\/pre>\n\n\n\n
Isn\u2019t that cool?<\/p>\n\n\n\n
Styling A List\u2019s Marker<\/h2>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
First, let me be clear that I wasn\u2019t aware that the little default circle next to each list item is called a marker<\/strong>. Before I know about the ::marker<\/code> pseudo-element, the process was to reset the list style, and then to add the circle as a ::before<\/code> or ::after<\/code> pseudo-elements. That\u2019s isn\u2019t practical. Here is the bad way of doing this:<\/p>\n\n\n\n
ul {\n    list-style: none;\n    padding: 0;\n}\n\nli {\n    color: #222;\n}\n\nli::before {\n    content: \"\u2022\";\n    color: #ccc;\n    margin-right: 0.5em;\n}\n<\/code><\/pre>\n\n\n\n
As you see, the <li><\/code> color is #222<\/code>, while the ::before<\/code> pseudo-element is #ccc<\/code>. If the <li><\/code> and ::before<\/code> have the same color, then the circle will inherit by default, and thus the pseudo-element is not needed at all.<\/p>\n\n\n\n
Let\u2019s see a better way of doing this.<\/p>\n\n\n\n
li {\n    color: #222;\n}\n\nli::marker {\n    color: #ccc;\n}\n<\/code><\/pre>\n\n\n\n
And we\u2019re done! Isn\u2019t that much, much easier?<\/p>\n\n\n\n
The ::marker<\/code> is supported<\/a> in Firefox 68+ and Safari 11.1+. It\u2019s supported behind a flag in Chrome and Edge 80+.<\/p>\n\n\n\n
The Text-Align<\/code> Property<\/h2>\n\n\n\n
With the rising popularity of CSS flexbox and grid, it\u2019s common for someone who has just started with CSS to use the modern methods for centering and alignment instead of text-align<\/code>. However, the old methods still work.<\/p>\n\n\n\n
Using the text-align: center<\/code> can solve an issue quickly. Consider the following example.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
The content needs to be centered. Is it worth to use flexbox or grid? With text-align<\/code>, this can be easily achieved.<\/p>\n\n\n\n
I don\u2019t have to explain about the browser support for text-align<\/code>, you should guess that yourself (Sorry!).<\/p>\n\n\n\n
The Display: Inline-Flex<\/code> Property<\/h2>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Do you remember if you needed to display a list of badges inline, and each one of them should be a flexbox element? That\u2019s what inline-flex<\/code> is for.<\/p>\n\n\n\n
<span class=\"badge\"><svg><\/svg><\/span>\n<span class=\"badge\"><svg><\/svg><\/span>\n<span class=\"badge\"><svg><\/svg><\/span>\n<span class=\"badge\"><svg><\/svg><\/span>\n<\/code><\/pre>\n\n\n\n
.badge {\n    display: inline-flex; \/* where the magic happens *\/\n    justify-content: center;\n    align-items: center;\n}\n<\/code><\/pre>\n\n\n\n
Next time you need an inline element with a flex functionality, remember to use inline-flex<\/code>. Simple and easy.<\/p>\n\n\n\n
The Column-Rule<\/code> Property<\/h2>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
CSS columns is a layout method which can divide an element into columns. A common use-case for it is to divide a paragraph text content into two lines. However, the less common thing about it is that we can add borders between the columns. I learned about this tip from Manuel Matuzovic\u2019s<\/a> article.<\/p>\n\n\n\n
p {\n    columns: 3;\n    column-rule: solid 2px #222;\n}\n<\/code><\/pre>\n\n\n\n
The column-rule<\/code> property name might not reflect its purpose, but imagine it as border-right<\/code>. The property is well supported in all browsers (IE 10+, Firefox 3.5+, Chrome 4+, Safari 3.1+, Edge 12+).<\/p>\n\n\n\n
Background Repeat Round<\/h2>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
I recently learned about this value from a tweet<\/a> by Addy Osmani. There is a value for background-repeat<\/code> which prevent the clipping of a background.<\/p>\n\n\n\n
.element {\n\tbackground-size: contain;\n\tbackground-repeat: round;\n}\n<\/code><\/pre>\n\n\n\n
According to CSS Tricks<\/a>, here is how round<\/code> works:<\/p>\n\n\n\n
tile the image in both directions. Never crop the image unless a single image is too large to fit. If multiple images can fit with leftover space, squish them or stretch them to fill the space. If it\u2019s less than half one image width left, stretch, if it\u2019s more, stretch.<\/p><\/blockquote>\n\n\n\n
It\u2019s Magical. Isn\u2019t it?<\/p>\n\n\n\n
Object Fit<\/h2>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
The object-fit<\/code> CSS property is magical. When I first knew about it, it changed a lot of things and made my life easier as a front-end developer. Recently, I was working on a section that displays a grid of logos. That kind of thing is sometimes hard due to the inconsistent sizes of the logos. Some of them have a horizontal shape, some have a vertical one.<\/p>\n\n\n\n
By using object-fit: contain<\/code>, I was able to control the width<\/code> and height<\/code> of the logos and force the image to be contained in the defined width and height.<\/p>\n\n\n\n
<ul class=\"brands\">\n    <li class=\"brands__item\">\n        <a href=\"#\">\n            <img src=\"img\/logo.png\" alt=\"\">\n        <\/a>\n    <\/li>\n    <li> <!-- other logos --> <\/li>\n<\/ul>\n<\/code><\/pre>\n\n\n\n
img {\n    width: 130px;\n    height: 75px;\n    object-fit: contain;\n}\n<\/code><\/pre>\n\n\n\n
By defining a width<\/code> and height<\/code>, we will force the image to be contained. This is a huge benefit. Even better, we can wrap the above in a @supports<\/code> to avoid stretching the logo image in browsers that don\u2019t support object-fit<\/code>.<\/p>\n\n\n\n
@supports (object-fit: contain) {\n  img {\n    object-fit: contain;\n    height: 75px;\n  }\n}\n<\/code><\/pre>\n\n\n\n
Related Articles<\/h2>\n\n\n\n