256 Kilobytes

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

Articles in Style and Layout | By August R. Garcia

Published 9 months agoMon, 11 Feb 2019 04:07:30 -0800 | Last update 6 months agoTue, 07 May 2019 03:37:01 -0700 📌

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.

62,155 views, 3 RAMs, and 7 comments

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. 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"?
  • 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

Bonus Content

Video

Infographic

5 HTML and CSS Tricks You Did Not Know About

Users Who Have Downloaded More RAM:
Huevos Rancheros (9 months ago)
Scuffed Dog (9 months ago)
yottabyte (9 months ago)
🐏 ⨉ 3
Posted by August R. Garcia 9 months ago

Edit History

• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
• [2019-02-11 4:07 PST] August R. Garcia (9 months ago)
🕓 Posted at 11 February, 2019 04:07 AM PST

Profile Photo - Some Guy Some Guy
πŸ—Ž 3224 πŸ—¨ 41 🐏 31
Subscriber

For those of you who are looking for information on cross-browser compatibility:

Support for these things:

Source: The user gregmac from a thread on Hacker News

Download more RAM. 🐏 ⨉ 0 Posted by Some Guy 9 months ago

Edit History

• [2019-02-11 7:58 PST] Some Guy (9 months ago)
🕓 Posted at 11 February, 2019 07:58 AM PST

This is a patsy account used by the 256 Kilobytes staff to seed content. 

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
πŸ—Ž 198 πŸ—¨ 989 🐏 299
Site Owner

Follow up post on a similar topic for Google Sheets:

Edit: Second follow up post on another similar topic:

Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 9 months ago

Edit History

• [2019-02-12 8:30 PST] August R. Garcia (9 months ago)
🕓 Posted at 12 February, 2019 08:30 AM PST

Sir, I can do you a nice SEO.

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
πŸ—Ž 198 πŸ—¨ 989 🐏 299
Site Owner

Additional tip/trick - 8 (and 4) digit hex colors:

Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 6 months ago 🕓 Posted at 05 May, 2019 20:03 PM PDT

Sir, I can do you a nice SEO.

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
πŸ—Ž 198 πŸ—¨ 989 🐏 299
Site Owner

Tangential:

Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 6 months ago

Edit History

• [2019-05-12 12:40 PDT] August R. Garcia (6 months ago)
• [2019-05-12 12:40 PDT] August R. Garcia (6 months ago)
🕓 Posted at 12 May, 2019 12:40 PM PDT

Sir, I can do you a nice SEO.

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
πŸ—Ž 198 πŸ—¨ 989 🐏 299
Site Owner

Part 2:

Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 5 months ago 🕓 Posted at 27 May, 2019 20:00 PM PDT

Sir, I can do you a nice SEO.

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
πŸ—Ž 198 πŸ—¨ 989 🐏 299
Site Owner

Legit progress bar code:

<progress id="progress" value="0" max="100"></progress>
<script>setInterval(function(){
	var current                                  = document.getElementById("progress").value;
    document.getElementById("progress").value    = current + ((100-current)/6);
}, 1000);
</script>

Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 3 months ago

Edit History

• [2019-08-04 1:51 PDT] August R. Garcia (3 months ago)
• [2019-08-04 1:51 PDT] August R. Garcia (3 months ago)
🕓 Posted at 04 August, 2019 01:51 AM PDT

Sir, I can do you a nice SEO.

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
πŸ—Ž 198 πŸ—¨ 989 🐏 299
Site Owner

Thread bump with the <time> tag:

To steal an explaination from Stack Overflow:

The point of this tag, as with a number of the new "semantic" HTML5 tags, is to make it easier for programs to index your data.

A script can go through and easily find out what the published date is for your blog articles if it sees a  <time> tag, without having to parse any of a number of ways this could be represented (for consumption by a human being), which would be a much more complex and error-prone task.

Source: Paul D. Waite via Stack Overflow, What’s the point of using the HTML5 <time> tag?

Since working with dates and times programmatically is already complete anarchy, wide use of this tag would probably be useful.

See Also: 

Users Who Have Downloaded More RAM:
Huevos Rancheros (1 month ago)
🐏 ⨉ 1
Posted by August R. Garcia 1 month ago 🕓 Posted at 11 October, 2019 01:43 AM PDT

Sir, I can do you a nice SEO.

Post a New Comment

To leave a comment, login to your account or create an account.

Do you like having a good time?

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account
You can also login to an existing account or recover your password. All use of this site is subject to terms outlined in the terms of service and privacy policy.