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 | Last Update 📌

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.

65,398 views, 3 RAMs, and 9 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 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"?
  • 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 (1 year ago)
Scuffed Dog (1 year ago)
yottabyte (1 year ago)
🐏 ⨉ 3
Posted by August R. Garcia 1 year ago

Edit History

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

Profile Photo - August R. GarciaAugust R. GarciaLARPing as a Sysadmi...Portland, ORSite Owner

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" attributeproxiessin, 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.

Profile Photo - Some GuySome GuyBasic 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. 🐏 ⨉ 0Posted by Some Guy 1 year ago

Edit History

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

This is a debug account.

Profile Photo - August R. GarciaAugust R. GarciaLARPing as a Sysadmi...Portland, ORSite Owner

Follow up post on a similar topic for Google Sheets:

Edit: Second follow up post on another similar topic:

Download more RAM. 🐏 ⨉ 0Posted by August R. Garcia 1 year ago

Edit History

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

Sir, I can do you a nice SEO.

Profile Photo - August R. GarciaAugust R. GarciaLARPing as a Sysadmi...Portland, ORSite Owner

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

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

Sir, I can do you a nice SEO.

Profile Photo - August R. GarciaAugust R. GarciaLARPing as a Sysadmi...Portland, ORSite Owner

Tangential:

Download more RAM. 🐏 ⨉ 0Posted by August R. Garcia 1 year ago

Edit History

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

Sir, I can do you a nice SEO.

Profile Photo - August R. GarciaAugust R. GarciaLARPing as a Sysadmi...Portland, ORSite Owner

Part 2:

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

Sir, I can do you a nice SEO.

Profile Photo - August R. GarciaAugust R. GarciaLARPing as a Sysadmi...Portland, ORSite 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. 🐏 ⨉ 0Posted by August R. Garcia 11 months ago

Edit History

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

Sir, I can do you a nice SEO.

Profile Photo - August R. GarciaAugust R. GarciaLARPing as a Sysadmi...Portland, ORSite 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 (9 months ago)
🐏 ⨉ 1
Posted by August R. Garcia 9 months ago 🕓 Posted at 11 October, 2019 01:43 AM PDT

Sir, I can do you a nice SEO.

Profile Photo - August R. GarciaAugust R. GarciaLARPing as a Sysadmi...Portland, ORSite Owner

Underused tag:

Mouseover here if you already knew about this tag.

Users Who Have Downloaded More RAM:
Hash Brown (8 months ago)
🐏 ⨉ 1
Posted by August R. Garcia 8 months ago 🕓 Posted at 01 December, 2019 23:26 PM PST

Sir, I can do you a nice SEO.

Profile Photo - Defaultgeek12Banned

Get started by downloading and installing the Geek Squad Tech Setup. if you are facing any kind of problem-related to home appliances and electronic devices. Geek Squad tech support team provides the best customer satisfaction service with Geek Squad chat support

Mod Edit: No one on a computer programming forum is having any kind of problem-related to home appliances and electronic devices that the Geek Squad would be useful in resolving.

Download more RAM. 🐏 ⨉ 0Posted by geek12 7 months ago

Edit History

• [2019-12-11 4:00 PST] geek12 (7 months ago)
• [2019-12-11 4:00 PST] August R. Garcia (7 months ago)
🕓 Posted at 11 December, 2019 04:00 AM PST

Post a New Comment

Do you like having a good time?

Register an Account

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

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