Get These Dependencies Off My Lawn: 5 Tasks You Didn't Know Could be Done with Pure HTML and CSS
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
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.
69,973 views, 3 RAMs, and 9 comments
- 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
- HSL Colors are Built Into the CSS Standard
- There's a fucking built-in HTML toggle
- HTML5 Has Built-In Progress Bars and Meters
- CSS Variables Exist (As Do Attribute Selectors)
- In Conclusion
- Honorable Mentions
- Related Posts
- Bonus Content
- Video
- Infographic
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.
<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:
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 havehref
values that end with .pdf or that start with "https"? - Style all links that have the
rel="nofollow"
ortarget="_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)
isblackwhite 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








Huevos Rancheros (3 years ago)
Scuffed Dog (3 years ago)
yottabyte (3 years ago) 🐏 ⨉ 3Posted by August R. Garcia 3 years ago
Edit History
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
• [2019-02-11 4:07 PST] August R. Garcia (3 years ago)
🕓 Posted at 11 February, 2019 04:07 AM PST
- C U [Code Demos] 5 More HTML and CSS Features You Didn't Know Existed (And One Work-in-Progress You Didn't Know Yo...
- C U How Hex Colors Work
- C U An Update on Current Web Design Trends
- C U Solving FizzBuzz with CSS
- C U How much is my website worth?
- C U Embedding Fonts with CSS and Base64
- C U How to install GeneratePress, set up a Child Theme and set up GeneratePress Premium properly, in the proper wa...
- C U Get These Dependencies Off My Lawn: 5 Tasks You Didn't Know Could be Done with Pure HTML and CSS
- C U Using Variables in CSS with PHP
- C U [Code] How to Make Images Zoomable with JavaScript and CSS
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.
For those of you who are looking for information on cross-browser compatibility:
Edit History
• [2019-02-11 7:58 PST] Some Guy (3 years ago)🕓 Posted at 11 February, 2019 07:58 AM PST
This is a debug account.
Follow up post on a similar topic for Google Sheets:
Edit: Second follow up post on another similar topic:
Edit History
• [2019-02-12 8:30 PST] August R. Garcia (3 years ago)🕓 Posted at 12 February, 2019 08:30 AM PST
Sir, I can do you a nice SEO.
Additional tip/trick - 8 (and 4) digit hex colors:
Sir, I can do you a nice SEO.
Tangential:
Edit History
• [2019-05-12 12:40 PDT] August R. Garcia (3 years ago)• [2019-05-12 12:40 PDT] August R. Garcia (3 years ago)
🕓 Posted at 12 May, 2019 12:40 PM PDT
Sir, I can do you a nice SEO.
Part 2:
Sir, I can do you a nice SEO.
Legit progress bar code:
Edit History
• [2019-08-04 1:51 PDT] August R. Garcia (3 years ago)• [2019-08-04 1:51 PDT] August R. Garcia (3 years ago)
🕓 Posted at 04 August, 2019 01:51 AM PDT
Sir, I can do you a nice SEO.
Thread bump with the <time> tag:
To steal an explaination from Stack Overflow:
Since working with dates and times programmatically is already complete anarchy, wide use of this tag would probably be useful.
See Also:
Huevos Rancheros (2 years ago) 🐏 ⨉ 1Posted by August R. Garcia 2 years ago 🕓 Posted at 11 October, 2019 01:43 AM PDT
Sir, I can do you a nice SEO.
Underused tag:
Mouseover here if you already knew about this tag.
Hash Brown (2 years ago) 🐏 ⨉ 1Posted by August R. Garcia 2 years ago 🕓 Posted at 01 December, 2019 23:26 PM PST
Sir, I can do you a nice SEO.
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.
Edit History
• [2019-12-11 4:00 PST] geek12 (2 years ago)• [2019-12-11 4:00 PST] August R. Garcia (2 years ago)
🕓 Posted at 11 December, 2019 04:00 AM PST
Post a New Comment
To leave a comment, login to your account or create an account.
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.