If you have used Flexbox before in CSS, you might have used the shorthand property flex: 1. And if you’re like me, you might have been using it but forgotten or not even known what this is shorthand for. I know to use this shorthand when I have Flexbox items that I want to take up the rest of the space. It’s perfect for situations where you have an image on the left and a box of text on the right (product image and product name + price).
It has been years since CSS Houdini was revealed in 2016 and admittedly, it has been very slow going. Although, since the W3C task force was announced there have been a few things delivered. If you’re not aware of CSS Houdini, it is a set of proposals and standards that allow access to lower-level aspects of the layout and CSS parser in web browser engines. It is basically an umbrella term used to describe a tonne of different API’s, some of which have already shipped and you might be familiar with.
CSS just continues to grow and evolve, much like its cousin Javascript. I thought I would share a few CSS layout properties that are still relatively unknown at the moment with developers. The first 3 are variations of almost the same thing, with the fourth being the most obscure and unsupported of them all. place-items This one blows a lot of the minds of developers I’ve shown this too or told about. The place-items property is shorthand for align-items and justify-items CSS properties.
Back in the early 2000’s when the modern web was still in its infancy and jQuery reigned supreme, many of the things we can do now did not exist and required sometimes obscene hacks and solutions to get working. Believe it or not, centring a div used to be a complicated task. Fortunately, in 2020 with the advent of modern CSS, we have multiple ways to centre a DIV (or any content) with just a few lines of CSS. Using Flexbox affords us the ability to centre things both horizontally and vertically (even both at the same time).
Arguably, one of the best additions to CSS in a very long time is CSS Grid. If you have been a developer longer than a minute, there is a good chance you remember what the web was like before CSS Grid and even before Flexbox. The most popular implementation of a kanban style layout is Trello. A lot of companies have replicated the easy, Kanban layout of Trello (including GitHub Projects).
If you’re a developer, chances are you have a penchant for dark mode. Staring at a screen all day and possibly part of the night, dark mode is easier on the eyes and it just looks awesome. It might surprise some of you to know that CSS has native support for dark mode and styling specifics using a property called prefers-color-scheme. @media (prefers-color-scheme: dark) { /\* paint it black \*/ } The best thing about prefers-color-scheme is that it is well-supported. If you do not have to support Internet Explorer, then you can use it and not have to worry about any polyfills or Javascript fallbacks.
The web continues to advance forward and like a few other convenient CSS properties such as native image lazy loading, Google have once against shipped a new feature which I am hopeful will make it into other browsers shortly called content-visibility which is part of the CSS Containment Specification. The crux of this new property is you can tell the browser to ignore rendering of certain elements that are off-screen. Traditionally, when you load a webpage, it will draw it from top to bottom (regardless of what is visible and what isn’t), this is why virtualisation techniques are popular (especially for long grids).
It’s 2020 and while there are many things I do know, there are still some trivial silly things I do not or always forget. Case in point being, how to centre columns in a Bootstrap 4 layout. Unlike Bootstrap 3, Bootstrap 4 uses Flexbox and therefore, you have more options for centring your layouts. One such method is the justify-content-center class defined on the row which will align the columns center. Finally, you use the text-center class to middle align the content of the column.
Without-a-doubt layout in any modern website or application is one of the most challenging parts, especially when you want it to work on both desktop and small handheld devices like iPhone’s. For a project I am working on, I have been extensively using Flexbox for the layout where applicable. One such layout is a grid of blog posts at the bottom of each page for clickthrough. These items have varied length post titles and imagery. It only takes one title to be shorter than the others and float:left and display:inline-block solutions fall apart.
As great as CSS is, there are some glaring holes within the specification. We can perform calculations using the calc function in CSS, but for some reason there is no list-style-type: dash but other strange values like lower-greek and plenty of other language specific values. The solution is quite simple and I decided to make this into a post for future reference and anyone else who finds themselves searching Google for the same thing.