# Frontend News #20: CSS Grid Lanes, ::search-text Pseudo-Element, HTML Geolocation Element

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

- **Канал:** CSS Weekly
- **YouTube:** https://www.youtube.com/watch?v=-OYOxjM5lww
- **Источник:** https://ekstraktznaniy.ru/video/37902

## Транскрипт

### Segment 1 (00:00 - 05:00) []

Do you know what the future of a masonry layout on the web is? Did you know that a single character can cause massive performance issues in a specific browser? And do you know how to style in-page search using a specific CSS pseudo-class? Find out all about this and more in the next few minutes. This episode is sponsored by Backlog. More on why you should switch to this lightweight Jira alternative in a bit. First up, Jen Simmons, Elika Etemad, and Brandon Stewart explain what is the future of CSS masonry. If you have been following along, then you know that there have been changes regarding CSS masonry over the years. We had one proposal, then things changed, and now we finally settled down on CSS grid-lanes. This means that to implement a masonry layout, you need to set `display` to `grid-lanes`. This is currently supported in Safari Technology Preview, so you can already play with it and test it out yourself. CSS grid-lanes work similarly to CSS grid, so along with the `display: grid-lanes`, you're going to set `grid-template-columns` to define columns over which you want to spread out the elements. This is what the typical masonry layout looks like. So what you need to do is define columns using a syntax that looks exactly like the syntax for CSS grid columns, and then the browser will figure out how to place elements so they look exactly like this. If you know how to work with CSS grid, you automatically grid-lanes. The only difference is that you will have to set `display` property to `grid-lanes`. This is not in the Baseline yet, but the browsers are moving really fast, and hopefully, we will be able to use it really soon. Until then, you will have to use a polyfill or opt in to a different layout method until this is supported in all browsers, or essentially until this is in the Baseline. This week's sponsor is Backlog. I'm sure you're already fed up with Jira, just as everybody is, and that is exactly where Backlog comes in. If you and your team want structure instead of chaos, if you prefer simple and straightforward software instead of complex, overweight, and bloated, then Backlog is something that you should definitely check out. It offers a cleaner, more intuitive experience than Jira with all the essential features that you need and love, such as kanban boards, gantt charts, issues, docs, version control, and more. So, if you and your team are fed up with Jira, and I'm sure you are, just as I am, then you should try Backlog. Thanks so much to Backlog for sponsoring. Next up, Daniel Schwarz explains how to style in-page search using CSS. I will hit “Command + F” to open the in-page search, and I will search for “search. ” This will highlight all instances of the word “search. ” And as you can see, by default, they are highlighted yellow. But you can easily style this using the pseudo-class `:: search text`. Let's try it out. I will open Developer Tools, and I will add another class, another pseudo-class: `:: search-text`, and I'll set `background` to `pink`. Immediately as I do that, the search instances on the page have been transformed. So if you ever want to tweak in-page search, make it more in style with your brand, with your website, then you can easily do that using the `:: search-text` pseudo-class. In this article, Daniel Schwarz also points out a number of other elements that you can style using the pseudo-classes, and you're going to find all of those right here, from search-text — we just showcased that — to `:: target-text`, `:: selection`, `:: highlight()`, `:: spelling-error`, and `:: grammar-error`. In this article, Daniel explains everything you need to know about all of those elements, about nuances and slight differences between various types of those pseudo-elements. Next up, Allen Pike explains how one character, an emoji, caused a major performance problem on their website. This is a really nice write-up where Allen explains the process of debugging those performance issues. Specifically, those were issues with Safari and the layout. And Allen pointed out the problem exactly to one emoji that was used on the page, a heart emoji, this one. And the problem is that they used “Noto Color Emoji” font to standardize font usage. And Allen explains everything in detail, but long story short, this is related to how color emojis were implemented in the browsers, specifically in Safari at the beginning, and the issue persists, probably since then. If you open the Google Fonts page for “Noto Color Emoji” on iPhone, Safari will crash. That is how severe this problem is. The bug was, of course, submitted, and hopefully, the Safari team will resolve the problem. But until then, you probably want to avoid “Noto Color Emoji” font or maybe even other emoji fonts in your production websites. All in all, this is a really nice write-up on how a random thing you add into your code can cause major performance issues. It might be something as ridiculous as a heart emoji.

### Segment 2 (05:00 - 09:00) [5:00]

Next up, Manuel Matuzović explains how geoloccation HTML element works. I wasn't even aware that geoloccation HTML element exists. I knew about the geolocation API, and you probably know about that too, but there is also a specific HTML element. It looks exactly like this, and it adds a button to your browser. Once you click it, you're going to be asked to give permission. Let's hit “Allow this time. ” And then you will get the exact latitude-longitude coordinates along with the accuracy of those measurements. I'm not even going to hide the latitude and longitude coordinates here. If you want to drop by into my office for a coffee, well, be my guest. In any case, Manuel explains everything you need to know about this element and various attributes that you can use with it, such as the `accuracymode` to pinpoint the accurate, precise location. The `autolocate` attribute will tell the browser to retrieve the coordinates as soon as the page loads if the user has already given permission. The `watch` attribute enables you to fire events continuously as the user is moving. And of course, you can listen to those events in JavaScript. Here's exactly how you can style the default button using the `: granted` pseudo-class. Last up, Scott Tolinski created a fantastic CSS-only demo, Bubble Color Picker, exactly what you see here. I'm not sure that this is something that you would want to use in your projects as is, but it's a nice alternative if you want to offer a number of set colors for your users. And one of the reasons that I wanted to highlight this demo is that Scott takes a really simple approach to creating this. The HTML is straightforward. You have a number of input elements along with the label and an empty span element. There is a little bit more going on in CSS. The first thing that you will notice if you open the CSS is that Scott sets the `color-scheme` property to `light dark`. And this is exactly what you should be doing. One of the things that developers still often get wrong is that when they provide a dark mode for their website, they don't change the `color-scheme` to dark. If you do that, if you set the `color-scheme` to `dark`, you're going to change all the default HTML elements in the browser to the dark mode, such as scrollbars and so on. So, if you are offering dark mode, set the `color-scheme` to `dark`. Another thing that I want to show you in this demo is that Scott actually creates all of those bubbles manually. Here is the default styling. This is actually a variation of a checkbox hack, where you hide the checkbox or the radio element in this example, and then just display the label and style it as bubbles in this case. And then each bubble here is styled differently using the `nth-of-type` pseudo selector. And there are a number of those selectors all the way up to 19. I thought about this approach, and I really like it because if I needed to create a demo like this from scratch, I might have opted for a different approach, and I might set variables directly here in the code in a style attribute, and then I would just use a single selector and CSS to read that particular variable. But this is probably not even that optimal. Scott sets magical numbers for every bubble separately in CSS. And this is pretty cool because you don't have to go from CSS to HTML to understand how things work. You can just open CSS, and everything is laid out right here. This is just another example that it might not be necessary to abstract things too soon. Sometimes you can just flat-out list magic numbers in your CSS or in JavaScript and work with that. This is probably more readable and more maintainable than the alternatives, where you would, for example, set arrays with different values in JavaScript, then iterate over those arrays and fill in the HTML or CSS. I really like this. Thank you so much for your attention. My name is Zoran Jambor. I will see and hear you in a different CSS bubble, or rather, in the next video.