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 2 months agoMon, 11 Feb 2019 04:07:30 -0800 | Last update 4 days agoFri, 19 Apr 2019 17:01:11 -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.

51,773 views, 3 RAMs, and 2 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

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

Edit History

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

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
🗎 107 🗨 623 🐏 117
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" attributeproxies, regular expressions, HTML and CSSsin, the developer console, and probably some other trash.


Account created 4 months ago.
107 posts, 623 comments, and 117 RAMs.

Last active 2 hours ago:
Posted thread Analyzing the Web: Downloading the Majestic Million, Setting up SQLite, and Generating Basic Reports

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 2 months ago

Edit History

• [2019-02-11 7:58 PST] Some Guy (2 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
🗎 107 🗨 623 🐏 117
Site Owner

Follow up post on a similar topic for Google Sheets:

Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 2 months ago 🕓 Posted at 12 February, 2019 08:30 AM PST

The CIA wants all code in the cloud under their lock and key. They want to ban compilers and make people think HTML is computer programming. - Terry A. Davis

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.