7 nowych funkcji CSS, o których mogłeś nie wiedzieć (film, 4m)
Fireship w swoim najnowszym filmie poruszył temat aktualizacji CSS, które wprowadziły wiele nowych funkcji. W dzisiejszym społeczeństwie programistycznym, deweloperzy zmagają się z różnorodnymi problemami, a jednym z nich jest stary kod CSS. Jednak dzięki nowym funkcjom mogliśmy zobaczyć, jak CSS staje się bardziej przyjazne dla użytkowników. W filmie autor przedstawia siedem nowych funkcji, które z pewnością ułatwią pracę programistów. Zmiany obejmują właściwość Align Content, która umożliwia centrowanie elementów bez potrzeby stosowania Flexbox czy Grid, a także zasady Property At z CSS Houdini, które pozwalają na definiowanie wartości zmiennych.
Inna ekscytująca nowość to Starting Style, która definiuje styl, kiedy element jest pierwszy raz renderowany na stronie. Dzięki temu możliwe jest lepsze zarządzanie animacjami, zwłaszcza dla elementów, które są początkowo ukryte. Ponadto, nowa funkcjonalność dotycząca trybu jasnego i ciemnego (light-dark) uprościła proces stylizacji elementów strony, co jest istotne w obecnych czasach. Wspomniano także o pseudo-klasach, które teraz działają w sposób bardziej zrozumiały dla użytkowników, co przyczynia się do poprawy doświadczeń związanych z formularzami.
Fireship nie zapomniał o aspekcie estetyki CSS, wspominając o nowej kolorystyce logo CSS - Rebecca Purple, związanej z tragiczną historią córki pioniera CSS, Erica Meyera. Takie osobiste akcenty przypominają nam, że technologia ma swoje ludzkie oblicze. Nowe funkcje CSS, takie jak interpolateSize, to kolejne kroki w kierunku rozwoju i ułatwienia życia deweloperom. Jeszcze kilka lat temu, takie nowości mogłyby wydawać się nieosiągalne, ale w miarę rozwoju technologii, wprowadzane zmiany są coraz częstsze i bardziej znaczące.
Na koniec warto zauważyć, że film Fireshipa zdobył już 802 594 wyświetlenia oraz 48 133 polubień przy czasie tworzenia tego artykułu. To dobrze świadczy o tym, jak społeczność programistyczna docenia nowości i zmiany w technologii. Zachęcamy do obejrzenia filmu i zapoznania się z jego treściami, które mogą pomóc w codziennej pracy developerów. Fireship z pewnością jeszcze nie raz zaskoczy nas swoją wiedzą i świeżym podejściem do programowania.
Toggle timeline summary
-
Wprowadzenie do wyzwań związanych z byciem deweloperem, szczególnie z przestarzałym CSS.
-
Ogłoszenie o znaczącej aktualizacji CSS, w tym nowym logo.
-
Przegląd tematu wideo: nowe funkcje CSS dla deweloperów internetowych.
-
Wprowadzenie do właściwości Align Content, która upraszcza centrowanie elementów.
-
Wyjaśnienie reguły Property At z CSS Houdini do tworzenia typowanych zmiennych.
-
Wprowadzenie do Starting Style do definiowania animacji na renderowanych elementach.
-
Omówienie dodatkowych funkcji matematycznych w CSS, w tym round, rem i mod.
-
Wprowadzenie do funkcji trybu jasnego i ciemnego dla łatwiejszego zarządzania motywami.
-
Nowe pseudoklasy dla walidacji użytkownika, zapewniające lepsze doświadczenie użytkownika.
-
Podkreślenie właściwości interpolateSize do animowania wysokości w menu rozwijanych.
-
Historia koloru Rebecca Purple i jego znaczenie w społeczności CSS.
-
Podsumowanie i wdzięczność od prowadzącego, zapraszającego widzów do następnej części.
Transcription
If you decide to become a developer, you'll be introduced to a wide variety of new types of headaches, triggered by the stressors of blue light exposure, excessive sitting, and unrealistic deadlines. But the worst type of headache you can experience is the one that's triggered when attempting to update some legacy CSS code. Luckily though, CSS just got a massive update that will help you forget about all of its pain points. A beautiful new logo in the color of Rebecca Purple, a color with a special backstory. In much the same way flame stickers make your car go faster, this new logo will make CSS not suck anymore, because it serves as a reminder that CSS is actually awesome when you use features on the modern baseline path, which is supported by all major browsers. In today's video, we'll look at seven new features you can use as a web developer that you didn't know exist. It is November 18th, 2024, and you're watching The Code Report. I'm not going to sit here and beat a dead horse, showing you a bunch of memes about how to center a div, because those memes are now totally obsolete, thanks to the Align Content property, which doesn't require Flexbox or Grid, and just works in any block layout. Why nobody thought to make this a thing 25 years ago, I have no idea, but that's not the only game changer. Another new feature you need to know about is the Property At rule, which is a part of CSS Houdini. We can easily create a variable in CSS like so, but the problem here is that the browser interprets its value as a string, and that makes it impossible to achieve certain types of animations with variables, like the percentage of a gradient. With Property, you can now give your variables a specific type, like number, color, percentage, and so on, which not only makes your code safer, but also allows the browser to use that value in animations. Speaking of animations, another powerful new At rule is Starting Style, which allows you to define a style when an element is first rendered in a page. It's especially useful when you have something like a dialogue or popover, or anything hidden with Display None, because once you flip Display None, it immediately appears in the page, even if you defined a transition animation. That's pretty annoying, but now with Starting Style, we can easily position an element as the starting point for an animation. Like, for example, we might translate a dialogue off the screen, but then transition it into the middle of the screen when it's open. Now, the haters out there will tell you that CSS is not a real programming language, but I disagree. You can already do math directly in CSS, but now there's additional math functions of round, rem, and mod. Rem and mod work like the modulus operator in JavaScript, and round lets you use different rounding strategies, like floor, ceiling, and truncate. That could come in useful, but one little feature that's way more powerful, in my opinion, is light-dark. When you have a website that toggles between light and dark mode, it can be really annoying to manage the styles for these two modes. But now you can easily write these styles side-by-side by providing two different values, depending on whether or not the user's system is set to light or dark. But one thing that's even more difficult than dark mode is designing the UI for form validation. It's already possible to render conditional content using the valid and invalid pseudoclasses. The problem, though, is that these pseudoclasses are triggered immediately, which means your form might show an error message before the user has even touched it. But now, we have pseudoclasses for user valid and user invalid, which will only trigger after the user has actually interacted with a form. And that provides a better user experience with far less code. Pretty cool, and there's a bunch of other CSS features I could have mentioned in this video, like container queries, subgrid, or the has selector. But the thing I'm most excited about is this little property called interpolateSize. If you've ever built a drop-down menu, one thing you might want to do is animate the height when the user clicks to open or close it. But you'll be disappointed to find out that that's not possible when you have the height set to auto. Well now, with interpolateSize, you can use the allowKeywords option to easily animate that property, or really any other value that doesn't have an explicit size. Awesome, but at the beginning of the video, I mentioned that there's something special about the color of the new CSS logo. Rebecca Purple is actually named after the daughter of prolific CSS pioneer and writer Eric Meyer. It was originally going to be called Becca Purple, but at the age of six, she wanted everyone to start calling her Rebecca. And she made it to six for almost 12 hours before she passed away. As the parent of a six-year-old myself right now, I can't even imagine the pain, but it's cool to know that her memory will likely outlive all of us for hundreds of years as a standard color in CSS. This has been the Code Report. Thanks for watching, and I will see you in the next one.