
Tasks That Can Be Done with Pure HTML and CSS - Space_Lord_
https://www.256kilobytes.com/content/show/4399/get-these-dependencies-off-my-lawn-5-tasks-you-didnt-know-could-be-done-with-pure-html-and-css
======
gregmac
Support for these things:

Smooth scrolling CSS: Not IE, Edge or Safari.
[https://caniuse.com/#search=scroll-
behavior](https://caniuse.com/#search=scroll-behavior)

HSL: Everywhere.
[https://caniuse.com/#search=hsl](https://caniuse.com/#search=hsl)

Details element: Not IE, Edge.
[https://caniuse.com/#search=details](https://caniuse.com/#search=details)

Progress element: Everywhere.
[https://caniuse.com/#search=progress](https://caniuse.com/#search=progress)

Meter element: Not IE.
[https://caniuse.com/#search=progress](https://caniuse.com/#search=progress)

CSS variables: Not IE.
[https://caniuse.com/#search=css%20variables](https://caniuse.com/#search=css%20variables)

~~~
interfixus
IE support may not be all that relevant these days when even Microsoft
disparages its continued use.

~~~
stefanfisk
typically I still see 5% IE11 users for the regular consumer sites I touch.
however much I want to not support IE there is no way to motivate it from a
business perspective.

~~~
rootedbox
How much does that 5% bring in profit. If that is more than the amount it
costs to keep the support. Then keep it.. other wise remove.

~~~
doublekill
Purely from a business perspective you are correct.

Can not put a price on accessibility though (screenreader, forced IE use,
etc.).

Especially for content websites I don't think there is a non-economic reason
to justify non-accessible content.

------
spzb
Archive.org mirror :
[https://web.archive.org/web/20190211124606/https://www.256ki...](https://web.archive.org/web/20190211124606/https://www.256kilobytes.com/content/show/4399/get-
these-dependencies-off-my-lawn-5-tasks-you-didnt-know-could-be-done-with-pure-
html-and-css)

------
tekkk
One thing I myself found out only recently was that you can do validation of
inputs directly with HTML. Eg adding type="email" will validate the input for
email or you can use custom pattern with regex to validate them as you'd like.
Granted with regex it gets pretty messy but in general it's a good first
version if you don't have specific UI requirements for the error messages.
Also I think the errors are automatically displayed in the user's system
language.
[https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_i...](https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_pattern)

~~~
extra88
Input types like "email" also signal to mobile devices to use a keyboard
better suited to the values expected.

[http://mobileinputtypes.com](http://mobileinputtypes.com)

~~~
tracker1
That, imho is the biggest reason to use the newer types. It annoys me to no
end when I have a numeric PIN or 2FA entry that brings up the regular keyboard
where numeric input is obscured.

------
iaml
Using built-in html primitives seems like such a good idea in theory, but when
you have requirements that dictate a certain layout, or behavior on those
elements you discover that some things you can't do, others you can only do in
certain way, maybe in some browsers. Latest example of this is native input
type=date: I want to use it every time I am tasked with making something that
has date input, not once did it offer flexibility to meet the requirements
(you can't format date, I don't think there is a way to hide clear button on
ff, no duration input, etc...). Next time I'm just not gonna bother and
reimplement all of it myself.

~~~
mwcampbell
> reimplement all of it myself

Including accessibility? For that reason alone I think it makes sense to use
the most high-level built-in features available.

~~~
folkrav
Accessibility is a second-class citizen for a lot of clients, therefore a lot
of web agencies. In my two years working in one, only once was I tasked with a
fully accessibility compliant site, and that was because it was government
subsidized. Clients will gladly pay to move buttons and complain about a
particular shade of blue or opacity transition speed, but god forbid we
deliberately put any hours towards making the site accessible. We could try
all we want to talk them in, they were the ones who paid in the end, and most
of them just don't give a crap.

Most of our devs were pretty thorough about doing the most they could in the
given time frames anyway, but it pretty much never was made a priority.

~~~
RodericDay
it's just as much your responsibility as it is theirs to insist on ethical
standards

engineers don't get to go around running saying "i was gonna put some basic
safety procedures in there, but they just wouldn't pay for it"

you make them pay for it

~~~
ForHackernews
This is one of many reasons I keep trying to stress that software "engineers"
are not engineers. Writing software is wage labor, not a profession.

The sooner we come to terms with our situation, the sooner we can work to
better it.

~~~
SketchySeaBeast
This is really why we need to form a professional association of some sort -
it'll allow for some level of responsibility in what developers produce, as
well as help guarantee a certain standard of product.

It will also ensure that the we don't have to worry about the market being
flooded with cheap labour that every big business and government entity seems
interested in creating.

I understand that doesn't sound great right now given that software
development is a comparative goldmine to a lot of other jobs, but compared to
other professions we could stand to become more formalized.

~~~
axaxs
That can't happen because there's no formal qualifications to calling yourself
a software engineer. I've worked with people hired as software engineers who
just took an X week online course, and it shows.

Now, if you're talking about solving the above first, I'm enthusiastically all
ears..

~~~
SketchySeaBeast
In Canada most software devs don't call ourselves engineers - we legally can't
- engineer is a protected title.

And yes, that's what I'm suggesting - there needs to be a formalization of
terms for software. I'm not saying exclude the X week course individuals, but
in Accounting there are "tiers" of accountant, based upon education, focus,
and experience, and that may need to be instituted, allowing people to see at
a glance what designation you've achieved, even if that means the bootcamp
grad has to write a 50 question test at the end of their X weeks.

I know, I know, pipe dreams.

~~~
52-6F-62
Engineer isn't a unilaterally protected title here.

There's plenty of people and jobs titled Software Engineer (or QA Engineer, or
Site Reliability Engineer, etc).

You can't misrepresent yourself as a P. Eng. however. Here in Ontario, PEO
will probably nail you for it:

[http://www.peo.on.ca/](http://www.peo.on.ca/)

Though from what I understand they frown on it because they want complete
ownership of the term (but their critique really has no teeth unless you make
like you are indeed licensed by a central regulatory body such as PEO):

[http://www.peo.on.ca/index.php/ci_id/2266/la_id/1.htm](http://www.peo.on.ca/index.php/ci_id/2266/la_id/1.htm)

edit: Just some further information on the subject in Canada—Software Engineer
(among others) is a nationally recognized and distinct title (can overlap, but
doesn't necessitate a P.Eng certification):

[http://noc.esdc.gc.ca/English/noc/ProfileQuickSearch.aspx?va...](http://noc.esdc.gc.ca/English/noc/ProfileQuickSearch.aspx?val=2&val1=2173&ver=16&val65=software%20engineer)

~~~
SketchySeaBeast
Wow, you've really dug into this.

It looks like if you want to call yourself an engineer nationally you need to
be a P.Eng, and it's up to the provincial bodies to regulate the usage in each
province.

> Experience as a computer programmer is usually required.

That's amazing, you need to be an engineer, but don't need to know how to
program to be a Software Engineer.

~~~
52-6F-62
I took a different interpretation than your first conclusion there.

It sounds like you can call yourself an engineer all you like—particularly
with relation to software. There appear to be no hard requirements.

However if you want to bill yourself as a Software Engineer and work as a
Professional Engineer (the protected title in Canada) then you must have your
P.Eng.

Similarly: A Software or IT Architect isn't required to be certified by the
CACB. Nor does a Web Designer need to be a member of the GDC.

So— all Professional Engineers could bill themselves as Software Engineers
(situation providing), but not all Software Engineers can work as Professional
Engineers.

~~~
SketchySeaBeast
Ah, ok. Good point. It's really down again to the provincial regulatory bodies
to decide how uppity they want to be, but in Canada Federally there's no
restriction unless you're trying to act as a Professional Engineer.

~~~
52-6F-62
Yeah, that's how I'm understanding it as well.

------
Animats
The actual page source is very funny. In the middle of several thousand lines
of drivel is the actual content. At line 1732:

    
    
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
        <html>
            <body>
                <p>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.</p>
        ... (about 25 lines with all the real content)
            </body>
        </html>
    

Yes, there's an entire HTML document in the middle of the document. Which is
just wrong. Then there's another thousand lines of HTML. And yes, there's
Javascript.

If you cut out the inner document and put it in a file, you can open it and
see the useful content.

~~~
CM30
Looks a bit like server side includes done wrong. Accidentally include the
head/body/non content tags in the include, import them into the main file and
well, you end up with duplicates.

~~~
Animats
Firefox at least interprets that as an ordinary include, rather than as a
subdocument like a frame or an iframe. You'd think that <html> would start a
new context, with the defaults for a new page. But it doesn't.

------
d33
Was hoping to see some examples related to CSS animations or interactivity,
instead got just a few tricks that don't seem all that useful. Also, the way
colors were chosen for this website makes my eyes instantly hurt.

~~~
lugg
I am still blown away by how powerful CSS grid is.

[https://youtu.be/7kVeCqQCxlk](https://youtu.be/7kVeCqQCxlk)

It's sad it doesn't get more use. Potwntially this is because CSS frameworks
hide all this away and nobody is really learning CSS anymore but I wouldn't
really know. I'm not really that exposed to the web front end side of things.

~~~
gog
[https://caniuse.com/#feat=css-grid](https://caniuse.com/#feat=css-grid)

This is probably the reason. There are still browsers out there that don't
support it 100% to the spec.

~~~
mcv
Not a lot, though. Edge, Chrome, Firefox, Safari, Opera, iOS and Android all
support it. Nobody cares about Opera Mini and Blackberry, and the sooner we
cut IE11, the better. It's never going to support most of the modern
standards.

~~~
onychomys
It's not that nobody cares about Opera Mini, it's instead that OM users (like
me!) have come to accept that some sites will behave in a weird way on the
browser, and so it might be necessary to switch to a different one. It's the
tradeoff we make to get all of the good things that come along with OM usage.

------
August-Garcia
Apparently Dreamhost's yearly server update is occurring at the same time that
this is the top post on Hacker News.

Here's a screencap of the post's HTML source with no markup, for the time
being:

[https://i.imgur.com/2CGG48Q.png](https://i.imgur.com/2CGG48Q.png)

Edit: Or use the archive.org link spzb posted.

~~~
TeMPOraL
This screenshot is great, and really makes another point: if you remove
styling and JS, you'll probably end up with a more useful and not infrequently
prettier page.

~~~
hawski
Sometimes I prefer to view sites from Google cache, because I can quickly tap
text only and it works great.

I'm more and more thinking about a modern pure HTML browser. I sometimes use
_links -g_ and it's amazing how fast and clean the experience is. Sites that
don't work can go fuck themselves. Modern browsers are no longer _user_
agents, they are webdev agents.

~~~
adimitrov
Firfeox Reader mode.

It's basically a modern pure HTML browser. With images even. Well, sometimes.
If the site's markup isn't garbage.

------
chiefalchemist
It would help if he / she noted how supported these things are. That is, just
because it's in the spec doesn't mean all browsers have implemented them, or
have done so in the same way.

~~~
moviuro
You can look it up: [https://caniuse.com/](https://caniuse.com/)

~~~
chiefalchemist
Yes, each of us can. We know this :) My point is, it makes __a lot__ more
sense if those essential details are in the article itself. The article
becomes more complete and there's less wasted collective time.

------
osrec
> The opacity/transparency of rgb colors can be adjusted by using RGBA colors.
> Ex: rgba(255,255,255,0.8) is black that is 80% opaque (20% transparent).

That's white, no?

~~~
folkrav
Yep.

------
jasode
_> In 2019, you can do this: html{ scroll-behavior:smooth; }_

In 2019, caniuse.com says _scroll-behavior_ is not available in Apple Safari
or MS IE/Edge:

[https://caniuse.com/#search=scroll-
behavior](https://caniuse.com/#search=scroll-behavior)

None of my friends with iPhones install Firefox or Chrome on iOS. They all
just use the default Safari browser.

~~~
jacurtis
Does Safari on iOS need to support this feature? Because isn't the entire idea
of smooth scrolling to implement the scrolling that was ALREADY natively
implemented on iOS?

Basically, while Safari might not "support" this feature, they already force
their version of smooth scrolling on every site inside their browser.

On Safari for iOS or MacOS, you already get smooth scrolling no matter what.
So they might not support the spec, but you still get it no matter what.

The only explanation I have for IE/Edge is that it is IE/Edge, and no one
really expects much from those browsers anymore regardless. If I had a nickle
for everytime someone told me "IE doesnt support that", then I wouldn't need a
day job.

Lastly, this isn't a critical site feature in most cases. If an IE user uses
your site without smooth scrolling, will it really impact their experience in
any way? Probably not. So this is an example when you can safely use this
feature, the browsers that support it will offer nice smooth scrolling, and
the ones that don't will offer the same experience that those browser users
are already used to.

~~~
oplav
The smooth scrolling set by the "scroll-behavior" is not the same as the user
initiated scrolling in iOS. It is scrolling behavior when triggered by a
navigation API [0].

If you go to the website in OP and click the table of contents in Chrome and
then Safari, you'll see the difference.

[0] [https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-
beha...](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)

~~~
mikewhy
Yep looks like it affects `scrollTo()` and `scrollIntoView()`, along with in-
page navigation.

Crazy how they don't let you use a curve to define your own timing.

------
_bxg1
Good content, but dear god, how can you be someone who writes articles about
CSS and have a website this ugly? Those colors are making my eyes bleed.

~~~
ayoisaiah
Such terrible UX on that site. I had to switch to reader mode on Firefox
before I could read comfortably

------
dreamling
Additionally, with only HTML and CSS you can make your site Accessible.

So many contrast issues (166 X Very Low Contrast via the WAVE tool) , I can't
read this site.

please, give Accessibility a try.
[https://wave.webaim.org/extension/](https://wave.webaim.org/extension/)

------
mxuribe
Except for the occasional side project, i don't dive into html/css more than
the basic that is necessary...but today i learned about the available html
toggle (the details element); nice little treat to start the day. Thanks for
sharing!

------
roywiggins
You can also do tabs with pure HTML/CSS:

[https://css-tricks.com/functional-css-tabs-revisited/](https://css-
tricks.com/functional-css-tabs-revisited/)

------
dmix
> Tasks That Can Be Done with Pure HTML and CSS

Putting white text on a light blue background, apparently

------
derefr
Here’s a thing I can’t do with CSS combinators, and I’ve always been curious
why: apply rules to an element that contains any elements matching the
criteria. E.g. (hypothetical Regex-like syntax):

    
    
        (tr) > td img.emoji { padding-bottom: 1em; }
    

...would take any table row _containing_ a cell with an image in it, and pad
_the table row itself_ a bit more, so as to balance out the image which is
slightly larger than the text height.

The lack of this feature doesn’t bother me so much when actually developing
for the web, but so many web _scraping_ libraries offer CSS-selector accessors
as an alternative to/replacement for XPath accessors, and when using these
libraries, the need to grab the container element of the thing tagged with
something (where the container itself has no distinguishing features other
than having such a child) always results in inefficient spaghetti compared to
what could potentially be a very simple selector.

Anyone know why we don’t have these? Something to do with the cost of rescans
on DOM changes, maybe?

~~~
hjnilsson
This is because the CSS spec is consciously written so that you only never
need to look forward when parsing the DOM. For the same reason there is no
follow sibling selector, only previous sibling (`~`)

This is a major performance factor, since it means all layout can be done in
one pass. If the proposed selector were added. CSS layout would have unbounded
complexity.

------
k-ian
404 pages use pure html, actually

------
syndacks
Halfway decent design can also be accomplished with pure HTML and CSS, too.

------
trqx
Nowadays even image hosting services (imgur, ...) act like they don't know how
to display an image without having to resort to javascript.

~~~
tniemi
I think that is mainly because of content control. Plain hotlinking is
technologically simple, but a bad business practice.

~~~
hawski
Wouldn't checking the HTTP referer server side fix hotlinking issues once and
for all without any JavaScript?

~~~
marcosdumay
The referrer can be gamed, but it's not something you can't solve by combining
it with cookies.

------
archevel
One thing I think is missing from the current html spec is having a src
attribute on select tags. Would be nice to be able to not have to define the
options directly on a page and instead serve them up dynamically. Not a big
problem off course, but it seems like something that is missing.

------
LandR
> The server encountered an internal error or misconfiguration and was unable
> to complete your request.

Just error for me.

~~~
arpa
Apparently it is somehow possible to produce a HTTP 500 with pure HTML and
CSS!

~~~
matt_the_bass
I loved your comment. I know that your comment is somewhat against the spirit
of HN in that it’s not really constructive, but i still liked it.

I’m curious if you’d be willing to share roughly how many votes it earned you?
I wonder how the rest of the community responded to it.

~~~
arpa
Thank you. I won't go into specifics, but surprisingly it was much better
received than my claims that one can actually have self-hosted mail system
that does not deliver your mail straight into gmails' spam folder.

------
lpasselin
You can make dropdowns with CSS.

------
diafygi
Does anyone know a good polyfill for IE for the <details> element?

Using the hidden checkbox/label css hack to make non-js collapsers is
something I'd love to get away from since it can confusing for accessibility.

~~~
egoisticalgoat
Can't vouch for how good they actually are, but I found this [0] list a while
ago with various polyfills, including apparently 7 different polyfills for
<details>.

[0] [https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-
Brow...](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-
Polyfills#details-and-summary)

------
sbhn
You cant get a job with pure css and html

~~~
ahje
Bold statement, especially since it depends entirely of the job in question.
:)

------
kennyadam
Internal Server Error The server encountered an internal error or
misconfiguration and was unable to complete your request.

Please contact the server administrator, webmaster@256kilobytes.com and inform
them of the time the error occurred, and anything you might have done that may
have caused the error.

More information about this error may be available in the server error log.

Additionally, a 500 Internal Server Error error was encountered while trying
to use an ErrorDocument to handle the request.

------
sirsuki
In my narrow mental model I've always heard the claim that HTML and CSS is the
purest form of document representation. A static site that can not get any
more lean then that. And yet after removing the JavaScript (the source of all
evil on the net) the site still can not handle the traffic and offers a 500
internal server error!!! Really? they can't serve static HTML on a site that
is promoting static HTML features?

