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>

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>

• More Information:
  • https://css-tricks.com/html5-progress-element/
  • https://codepen.io/pankajparashar/pen/GnFpA
  • https://css-tricks.com/html5-meter-element/

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"?
• Style all links that have the rel="nofollow" or target="_blank" 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

• The tabindex attribute can be used to specify the tab order when users are filling out forms.
• The contenteditable attribute exists.
• The optgroup tag exists and can be used to group options within <select> elements.
• Color selectors can be added to forms using <input type="color">
• Basic progressive web app functionality can be implemented without using the full standard. For example, <meta name="theme-color" content="#3d1853"/> will set the browser nav bar to dark purple on supported browsers
• The opacity/transparency of rgb colors can be adjusted by using RGBA colors. Ex: rgba(255,255,255,0.8) is black white that is 80% opaque (20% transparent).
• Custom styles for highlighted content, such as ::selection { color: red; background-color: lime; }. [more examples]
• Applying CSS style rules for :required, :optional, and :invalid form elements:
• Preloading and Prefetching Content [Related Script].

Related Posts

• The CSS Standard Color Names and "Rebecca Purple"
• Using PHP to Generate CSS
• Should you use Google Fonts? Pros, Cons, and Other Considerations
• Responsive vs Adaptive Web Design
• [Article and Code] Are the "real time" comments on those ads for shitty mobile games real?

Bonus Content

Video

Infographic

Share This Post

August R. Garcia LARPing as a Sysadmi... Portland, OR

🗎 208 🗨 1071 🐏 323

Site Owner

Grahew Mattham

August Garcia is some guy who used to sell Viagra on the Internet. He made this website to LARP as a sysadmin while posting about garbage like user-agent spoofing, spintax, the only good keyboard, virtual assitants from Pakistan, links with the rel="nofollow" attribute, proxies, sin, the developer console, literally every link building method, and other junk.

Available at arg@256kilobytes.com, via Twitter, or arg.256kilobytes.com. Open to business inquiries based on availability.

---

Account created 1 year ago.
208 posts, 1071 comments, and 323 RAMs.

Last active 9 hours ago:
Commented in thread Can you buy Kraft powdered cheese?