# Frontend News #21: Multi-Column Layouts, :heading Pseudo-Class, Scaling Elements

## Метаданные

- **Канал:** CSS Weekly
- **YouTube:** https://www.youtube.com/watch?v=ZlsFs6k4loc

## Содержание

### [0:00](https://www.youtube.com/watch?v=ZlsFs6k4loc) Segment 1 (00:00 - 05:00)

Did you know that new CSS properties are coming to browsers that will actually make multi-column layouts useful? Just as well, new: heading pseudo-class will allow you to work with headings easily. And there is a CSS property supported in all browsers, in the Baseline, that allows you to scale elements with their layout. Find out all about this and more in the next few minutes. This episode is sponsored by Vue School. More on how you can get access to all of their courses completely for free, in a bit. First up, Rachel Andrew introduces new CSS properties that will help you work with multi-column layouts. Specifically, these properties will let you wrap columns into a new row in the block direction. Here's what this means. In this demo, we have a traditional CSS column layout. is defined as `column-count: 3` with the `height` set to `90vh` units for that container. This means that if there's not enough space on the screen in the vertical direction for all content, the content will automatically overflow in the horizontal direction and new columns will be created. Exactly what you see here. There wasn't an effective way around this until now. This layout is defined similarly, but instead of height on the column container, we have `column-height` property set to `70vh` and we have `column-wrap` set to `wrap`. This essentially solves the problem in a way that if there's not enough space on the screen for all content, it will wrap vertically. So now you have clearly readable columns that flow really nicely from here to here, and then the content that is overflowing will be in the next columns, exactly on the screen as you want. This effectively allows you to create usable column layouts. Until now, this was really difficult or pretty much impossible, but right now, this style of layout will become possible. These properties are not in the Baseline yet. They are only supported in Chrome. But once they are supported in browsers, you will be able to easily create multi-column layouts. This week's sponsor is Vue School. And I have to tell you straight up that you have a unique opportunity from February 28th to March 1st to get unlimited access to their entire course library completely for free. This means that you can now level up your knowledge around everything related to Vue from Nuxt. js, GraphQL, and plenty of tools that are really prominent today and absolutely crucial to understand if you want to stay relevant as a developer. Don't wait for February 28th. Sign up today and reserve your spot so you don't miss out on this amazing opportunity to level up your Vue. js knowledge. Thanks so much to Vue School for sponsoring. Next up, Stuart Robson will show you how to effectively work with the CSS `: heading` pseudo-class. If you're not familiar with it, the: heading pseudo-class allows you to target all heading elements on the page with just that one pseudo-class `: heading`. Until now, if you wanted to style all headings on the page, for example, if you wanted to set a specific `font-family` for your headings, then you needed to write something like this in your CSS. With the new: heading pseudo-class, you're going to be able to do something like this. This: heading pseudo-class will target all heading elements, H1, H2, H3, H4, H5, and H6, so you don't have to write multiple selectors. You can just set `: heading` pseudo-class and you will target all headings on the page. Another cool thing about heading pseudo-class is that it allows you to target specific headings exactly like this. So if you just want to target headings H1, H2, H3, then you can write it exactly like this. Similarly, if you want to target H4, H5, and H6 headings, you can write something as simple as this. Those examples we've shown here are really basic, but for example, if you wanted to style an anchor link inside of heading elements, then writing something like this can become really bloated and overwhelming. But with: heading pseudo-class, it's just really trivial and really easy. The: heading pseudo-class is currently only supported in Safari Technology Preview and in Firefox Nightly. So this is not in Baseline, it's nowhere near ready for production, but you can test it out and play around with it if you're using Firefox Nightly, it's behind a flag, or if you're using Safari Technology Preview. I really like this pseudo-class, and I hope that it lands in the browsers fairly soon. Next up, Stefan Judis explains how to scale elements with their layout using the CSS `zoom` property. This property has been in the browsers for a number of years; it's in the Baseline, you can safely use it, and essentially, it allows you to scale elements along with their layout. Here is a nice demo that showcases what this means. Here we have a `transform` property with `scale`. It only scales the visual representation of the element. The layout remains unaffected, and that is exactly the reason why this is performant. The layout doesn't have to be recalculated, you're only changing the visual representation of an element. If you're animating anything, then you want to animate `transform` property. But of course, there are cases where you want

### [5:00](https://www.youtube.com/watch?v=ZlsFs6k4loc&t=300s) Segment 2 (05:00 - 07:00)

the element size to affect the layout as well. In that case, `zoom` property is what you're looking for. I'm going to change the scale factor here. And as you can see, `zoom` property changes the layout, and the text is moving up and down while the `transform` property is not affecting layout at all. So if you ever need to change the scale factor of an element in a way that also affects layout, use the CSS `zoom` property. By the way, if you're not subscribed to Stefan's newsletter, Web Weekly, you're missing out. Hit the link in the description, subscribe to his newsletter, and you're going to get a ton of fantastic tips each week that you're going to want to check out. Next up, I want to showcase Picknplace. js, a library by Jeremy Thomas that is an alternative to drag and drop. I think that this concept is really interesting and can be really effective in terms of accessibility or in terms of mobile usage. I'm going to scroll down to the demo, and I'm going to pick the second item here. Now, as I'm scrolling the page, if I hit “place”, the element will be placed exactly in the position where I expect it to be placed. And another cool thing about this is that you can easily use the keyboard to actually work around with this library. So I'm going to hit Tab a few times. I'm going to pick this item four. And now if I scroll up and down with the arrow keys, I can just move it to a different place, hit Enter, and it's going to be immediately where it needs to be. This is a really interesting concept that works really well on mobile, especially. So I invite you to try it out on a mobile device. I think it's really cool and really interesting as an alternative to drag and drop. Last up, I want to showcase VoxJong, CSS Mahjong Solitaire. This is a really fantastic demo created with CSS library VoxCSS. I will show you exactly what it is in a bit. This game works exactly as you would expect. It's created with CSS, you have isometric and top-down views. And the library used to create this is VoxCSS. A CSS voxel engine, a 3D grid for the DOM. It actually renders HTML cuboids by stacking grid layers and applying transforms. I'm not going to go into code because I don't think I can understand this, but essentially, it allows you to easily create 3D grids, 3D objects using CSS. This is a really fascinating project that showcases the power of CSS today. So play CSS Mahjong Solitaire and check out CSS Voxel Engine, VoxCSS. Really fascinating stuff. Thank you so much for your attention. My name is Zoran Jambor. I will see and hear you in a different CSS 3D engine. Or rather, in the next video.

---
*Источник: https://ekstraktznaniy.ru/video/37900*