Here are some things that are built into the HTML and CSS standards that you probably didn't know about. Or maybe you did. Congratulations.

Here are some things that are built into the HTML and CSS standards that you probably didn't know about. Or maybe you did. Congratulations.

Get These Dependencies Off My Lawn: 5 Tasks You Didn't Know Could be Done with Pure HTML and CSS

Smooth Scrolling is Built into the CSS Standard

Back in my day, you had to write like two lines of JavaScript to implement smooth scrolling. In 2019, you can do this:

html{ scroll-behavior:smooth; }

The 256 Kilobytes website uses the CSS snippet above for smooth scrolling used to use this CSS smooth scroll, but it feels laggy, especially when linking to a post via a URL fragment and has since been disabled. However, it is active for this article. Click a link in the table of contents to test the behavior.

In addition to working when users scroll to anchors, if you Ctrl+F on a page with html{ scroll-behavior:smooth; } , it smooth scrolls to the result.

HSL Colors are Built Into the CSS Standard

> spend seven years doing internet marketing

> discover basic color formats today

The HSL color model defines a given color according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#hsl()

To see how HSL colors work, here's a tool that demonstrates how HSL colors work.





HSL (and HSLA, to adjust opacity) colors can be used anywhere that RGB, hexadecimal, and named colors can be used. Very nice.

There's a fucking built-in HTML toggle

There's a fucking built-in HTML toggle, created through using the <details> and <summary> tags:

<details> <summary>Sample Text</summary> <p>Read this sample text.</p> </details>

Sample Text Read this sample text.

As they say in my home country, "JavaScript is for casuals." Or, alternatively, as they also say in my home country, "you could write JavaScript and/or CSS, but that sounds hard."

HTML5 Has Built-In Progress Bars and Meters

Look at this extremely self-explanatory section of this article about <progress> and <meter> tags.

Section 4 of 5



69%

<meter value="4" min="0" max="5">Section 4 of 5</meter><br> <progress value="69" max="420"></progress> <meter value="0.69">69%</meter>

CSS Variables Exist (As Do Attribute Selectors)

As others have pointed out, adding CSS frameworks (like Bootstrap) and/or CSS preprocessors (such as SASS, LESS, and SCSS) to a project can, in many cases, add unneeded bloat, dependencies, complexity, and technical debt, among other issues.

While it may seem obvious, it is more common than you might expect for developers to be unaware that CSS variables exist natively and they're very straightforward to pick up, if they're new to you.

Attribute selectors are another example of native CSS functionality that can solve problems that developers often overcomplicate. Do you want to:

Style all <a> tags (links) that have href values that end with .pdf or that start with "https"?

tags (links) that have values that end with .pdf or that start with "https"? Style all links that have the rel="nofollow" or target="_blank" attributes?

or attributes? Style all form inputs with the attribute and value of type="email" ?

These are all tasks that can be done purely with CSS attribute selectors with no need for jQuery, SASS, and/or other external dependencies.





And while you're here reading about CSS functionality that developers are often unaware of, check out the documentation on combinators and selector lists as well.

In Conclusion

You probably even learned something. Very nice.

I already knew all of these things and this is a bad article. - Probably Someone





Honorable Mentions

Related Posts

Bonus Content

Video

HTML Tricks Video

Infographic

Share This Post