CSS Position Sticky
And when you’re building websites, there tends to be a navigational menu. This leads to the third feature in this list — CSS Position Sticky.
Instead of having the menu scroll off the page, it can stay stuck to the top of the page. That’s very handy for making floating menus.
CSS Math Functions
With CSS Math Functions min(), max(), and clamp(), you can set limits to your styling. This is important because of sizing. Your websites could be viewed on an original iPhone SE in portrait mode or in landscape on a 4K monitor. That’s a big difference.
It’s been challenging on web developers and web designers to support such a wide range of displays. That’s why new features like this are so important. It can help you to build styling that’s more dynamic. But if you are going to use this feature, it might be helpful to familiarize yourself with the CSS units of measurement, especially VW and VH, which stands for Viewport Width and Viewport Height.
This feature could be a topic by itself. If you’d like to request such a tutorial, you can post a comment on Photics.TV (YouTube) or use the Photics.com Contact Form. For now just know that CSS is becoming more like a programming language. With the addition of CSS variables and functions, a modern website can natively do things that would be difficult recreate on IE.
But just so we don’t overwhelm the designers, that might be apprehensive towards programming, the fifth feature is a little silly — RRGGBBAA. If you drop support for Internet Explorer, you can add an alpha channel to colors using hexadecimal notation.
This feature might seem frivolous, until it’s not. As an example, marketers might have strict file size limits on their banner advertisements. If you’re 1K over a 150K limit, every character you can safely eliminate matters.
So, if you wanted a 50% gray background, you might use rgba(128,128,128,0.5), but a shorter alternative could be #80808080. And if a slightly different shade of gray is OK, that color value can be shortened to #8888. That’s 21 characters down to 5 characters.
Is this a practical example? Maybe it is or maybe it isn’t, but the general idea is that without the burden of supporting Internet Explorer, you could have more freedom to make more interesting advertisements.
Details and Summary HTML Tags
Not everyone is into marketing though. What if you’re just making a Frequently Asked Questions page, a page where you need to cram a lot of text into a single space. That’s where you might use a collapsible box.
This leads to the sixth feature — the Details and Summary HTML tags. They’re perfect for when you want to show or hide text, like on an FAQ page. The “Details” tag creates the main box and the “Summary” tag creates the text that toggles the box.
<summary>Question Goes Here!</summary>
<p>Answer Goes Here!</p>
But when you simply cannot avoid it, and you’re loading files remotely through a content delivery network, then the seventh feature on this list is critical.