Uncommon CSS Properties

Uncommon CSS Properties

ishadeed.com ishadeed.com2 years ago in #Dev Love27

There are numerous CSS houses that some don’t learn about, or they learn about them, however put out of your mind to make use of them once they’re wanted. Some of the ones can prevent the usage of JavaScript to reach a selected outcome, or some can save your time via writing much less CSS. As a front-end developer, I got here throughout such issues from time to time, and I requested myself, why now not listing all the ones less-used and fascinating CSS houses in an editorial? In this text, I will be able to undergo some other CSS houses that I’m hoping you to find them fascinating. For some houses, I will be able to attempt to display the browser beef up for them, and practice the modern enhancement method, so you’ll be inspired to make use of it with out the concern of claiming “This isn’t supported in browser X, what must I do?”. Are you in a position? Let’s dive within the less-used so you’ll know extra. 🙂 Using place-items with CSS Grid I realized about this trick from Benjamin De Cock. You can heart a component horizontally and vertically with two traces of CSS. CSS is superior Yes, it is a hero phase made for amusing. See extra .hero { show: grid; place-items: heart; } Before going into main points, it’s value citing that place-items is a shorthand belongings that mixes justify-items and align-items. Here is how the code above might be: .hero { show: grid; justify-items: heart; align-items: heart; } You would possibly marvel, how this works? Well, let me provide an explanation for that. When the place-items is used, it’s carried out on each and every mobile within the grid. That method it’ll heart the mobile’s content material. That method, this method can paintings with more than one cells. If we build up the selection of columns, that shall be extra transparent. .hero { show: grid; grid-template-columns: 1fr 1fr; place-items: heart; } The Good Old margin: auto with Flexbox Combined with flexbox, margin: auto can heart a flex merchandise horizontally and vertically very simply. .mum or dad { width: 300px; peak: 200px; background: #ccc; show: flex; } .kid { width: 50px; peak: 50px; background: #000; margin: auto; } Isn’t that cool? Styling A List’s Marker First, let me be transparent that I wasn’t conscious that the little default circle subsequent to each and every listing merchandise is known as a marker. Before I do know concerning the ::marker pseudo-element, the method used to be to reset the listing genre, after which so as to add the circle as a ::ahead of or ::after pseudo-elements. That’s isn’t sensible. Here is the dangerous method of doing this: ul { list-style: none; padding: 0; } li { colour: #222; } li::ahead of { content material: “•”; colour: #ccc; margin-right: 0.5em; } As you notice, the colour is #222, whilst the ::ahead of pseudo-element is #ccc. If the and ::ahead of have the similar colour, then the circle will inherit via default, and thus the pseudo-element isn’t wanted in any respect. Let’s see a greater method of doing this. li { colour: #222; } li::marker { colour: #ccc; } And we’re completed! Isn’t that a lot, a lot more uncomplicated? The ::marker is supported in Firefox 68 and Safari 11.1 . It’s supported at the back of a flag in Chrome and Edge 80 . The text-align Property With the emerging acclaim for CSS flexbox and grid, it’s commonplace for anyone who has simply began with CSS to make use of the fashionable strategies for centering and…

Like to keep reading?

This article first appeared on ishadeed.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply