8 ms·

Tasks That Can Be Done with Pure HTML and CSS

297 points by Space_Lord_ 8y ago

LandR 8y ago
> The server encountered an internal error or misconfiguration and was unable to complete your request. Just error for me.
- arpa 8y ago
  Apparently it is somehow possible to produce a HTTP 500 with pure HTML and CSS!
  - captainbland 8y ago
    Actually even more impressively there doesn't appear to be any CSS on that page at all!
    - arpa 8y ago
      Pure magic!
  - matt_the_bass 8y ago
    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 8y ago
      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.
- kevincox 8y ago
  It appears to have been a small hiccup. It's loaded for me after a refresh.
  - ngcc_hk 8y ago
    No. Still error for me.
  - tisryno 8y ago
    I got a 'nice' error page temporarily now back to the error loading the error page.
- pmlnr 8y ago
  Same here. Funny to see how the /. effect - or, in this case, the hug of hn - still kills websites when cache plugins, static sites, varnish (sw), nginx fastcgi cache are all available and fairly simple to set up. I blame wordpress for not shipping with built-in microcaching.
  - ComputerGuru 8y ago
    > I blame wordpress for not shipping with built-in microcaching. Only it’s not a WordPress site.
    - pmlnr 8y ago
      I meant generally, but fair point.
d33 8y ago
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.
- deleted 8y ago
  [deleted]
- lugg 8y ago
  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 8y ago
    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.
    - tenaciousDaniel 8y ago
      It's not on the blackberry browser, so that's gonna be a no for me! :p
    - mcv 8y ago
      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.
      - detritus 8y ago
        “Recent-ish versions of Chrome, Firefox, Safari, Opera, iOS and Android all support it”. According to my stats, there's a load of old Chrome & Safari versions using my site that would be tripped up by its use, sadly. I'm keeping a beady eye on my stats, awaiting the day and can make a site entirely with CSS Grid.
kennyadam 8y ago
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.
spzb 8y ago
Archive.org mirror : 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 https://web.archive.org/web/20190211124606/https://www.256ki...
jasode 8y ago
>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.
- jumbopapa 8y ago
  I wish I could use Firefox for iOS because of sync, but Safari is the only browser that supports content blockers.
- t0astbread 8y ago
  Is smooth scrolling really a feature you need in every browser you support?
  - jypepin 8y ago
    well, just like any other features, assuming there is a good reason for you to implement that feature, you want most browsers to support it.
- gruez 8y ago
  Why would you want to force smooth scrolling in the first place? It's a browser setting (at least in Firefox) and it should stay that way.
  - ygra 8y ago
    Whoever wants to force it will otherwise do so with JS. With CSS at least you can override it with a client stylesheet.
  - jacurtis 8y ago
    I agree, I don't think this is a feature that web designers should worry about. How I scroll is something that should be set on the browser level. This is sort of like a web designer writing CSS to redesign my browser tabs while I visit their site. This isn't their job. Plus, on Mac devices with trackpads, the system OS already adds a smooth scrolling to all actions we do. So when we visit these sites that add smooth scrolling with Javascript it can cause us to go insane. Because scrolling becomes insanely sensitive, with 2-3 inputs trying to control scrolling behavior (the OS, the browser, and now JS). The system is adding its own acceleration and deceleration, and then javascript is sitting on top of that trying to interpret these forces and add their own multiplier on top of those. I have visited sites that have JS implemented smooth scrolling that is so sensitive, that I can't even barely touch the trackpad without scrolling down an entire page length.
August-Garcia 8y ago
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 8y ago
  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 8y ago
    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 8y ago
      Firfeox Reader mode. It's basically a modern pure HTML browser. With images even. Well, sometimes. If the site's markup isn't garbage.
lpasselin 8y ago
You can make dropdowns with CSS.
sbhn 8y ago
You cant get a job with pure css and html
- ahje 8y ago
  Bold statement, especially since it depends entirely of the job in question. :)
iaml 8y ago
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.
- kakarot 8y ago
  Native elements work if your design spec is flexible and aims to look natural on every browser and platform. If you have a rigid design they aren't as useful. Wouldn't be the end of the world if browsers actually exposed all of the relevant styling, but it does help to try and make flexible designs. HTML primitives make it a lot easier to reach accessibility spec. The date input in particular really is a mess though, every platform does it differently and phones have all sorts of weird widgets attached to it.
  - tracker1 8y ago
    Date input is a mixed bag... it sucks all browsers/platforms do it weird and in incompatible ways... on the flip side, I don't like interrupting the "expected" platform behavior in terms of accessibility users.
- null_content 8y ago
  Web development is such a pain because the standard is sub-par (decided by committee, so no surprises there) and the implementation is even worse (full of inter-vendor inconsistencies and missing features). Frankly, last time I did web development, I felt tempted to just make the entire page one screen sized canvas and implement my own UI toolkit on it. That's bound to be more reliable (and probably faster) that the current state of affairs.
  - 8y ago
nvr219 8y ago
Looks like you can't keep a website up with pure html and css lol
diafygi 8y ago
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 8y ago
  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-Browser-Polyfills#details-and-summary https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Brow...
mxuribe 8y ago
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!
denniskane 8y ago
A task you didn't know could be done with pure JS (or maybe you did, congratulations)... https://linuxontheweb.org/desk.os https://linuxontheweb.org/desk.os
osrec 8y ago
> 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 8y ago
  Yep.
- August-Garcia 8y ago
  asdf. Article corrected.
sirsuki 8y ago
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?
chiefalchemist 8y ago
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 8y ago
  You can look it up: https://caniuse.com/ https://caniuse.com/
  - chiefalchemist 8y ago
    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.
trqx 8y ago
Nowadays even image hosting services (imgur, ...) act like they don't know how to display an image without having to resort to javascript.
- tniemi 8y ago
  I think that is mainly because of content control. Plain hotlinking is technologically simple, but a bad business practice.
  - hawski 8y ago
    Wouldn't checking the HTTP referer server side fix hotlinking issues once and for all without any JavaScript?
    - marcosdumay 8y ago
      The referrer can be gamed, but it's not something you can't solve by combining it with cookies.
tekkk 8y ago
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_input_pattern https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_i...
- extra88 8y ago
  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 8y ago
    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.
  - JetSpiegel 8y ago
    That site would be way better if it was self explanatory.
k-ian 8y ago
404 pages use pure html, actually
draw_down 8y ago
Cool, now just make sure this works for your users all over the world, in all the use cases you need to cover, and don’t forget to have your UX designers sign off on it!
gregmac 8y ago
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
- stevenkovar 8y ago
  Also, while the author is correct about the core functions of these elements, most cannot be animated or applied a transition between states. Not a deal breaker functionally speaking, but sometimes a subtle transition is useful so as to be less jarring.
- interfixus 8y ago
  IE support may not be all that relevant these days when even Microsoft disparages its continued use.
  - braindouche 8y ago
    Tell that to all 50,000 people in my company, and the product owner I'm working for, who are forced to use it by Infrastructure, and 0.0% of our customers.
  - stefanfisk 8y ago
    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.
    - cageface 8y ago
      Depending on how much it costs in extra developer hours supporting an older browser it might actually make quite a bit of sense for many companies, especially smaller ones without a well established product.
archevel 8y ago
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.
roywiggins 8y ago
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 8y ago
> Tasks That Can Be Done with Pure HTML and CSS Putting white text on a light blue background, apparently
dreamling 8y ago
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/
syndacks 8y ago
Halfway decent design can also be accomplished with pure HTML and CSS, too.
derefr 8y ago
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?
- s3m4j 8y ago
  Generally you could do something like `select(identifier).parentNode` ? pseudo language because I'm tired
- recursive 8y ago
  This has been requested many times. The short answer is performance implications. https://css-tricks.com/parent-selectors-in-css/ https://css-tricks.com/parent-selectors-in-css/
- hjnilsson 8y ago
  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.
_bxg1 8y ago
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 8y ago
  Such terrible UX on that site. I had to switch to reader mode on Firefox before I could read comfortably
Animats 8y ago
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 8y ago
  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 8y ago
    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.

297 points by Space_Lord_ 8y ago

> The server encountered an internal error or misconfiguration and was unable to complete your request. Just error for me.

arpa 8y ago
Apparently it is somehow possible to produce a HTTP 500 with pure HTML and CSS!
- captainbland 8y ago
  Actually even more impressively there doesn't appear to be any CSS on that page at all!
  - arpa 8y ago
    Pure magic!
- matt_the_bass 8y ago
  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 8y ago
    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.
kevincox 8y ago
It appears to have been a small hiccup. It's loaded for me after a refresh.
- ngcc_hk 8y ago
  No. Still error for me.
- tisryno 8y ago
  I got a 'nice' error page temporarily now back to the error loading the error page.
pmlnr 8y ago
Same here. Funny to see how the /. effect - or, in this case, the hug of hn - still kills websites when cache plugins, static sites, varnish (sw), nginx fastcgi cache are all available and fairly simple to set up. I blame wordpress for not shipping with built-in microcaching.
- ComputerGuru 8y ago
  > I blame wordpress for not shipping with built-in microcaching. Only it’s not a WordPress site.
  - pmlnr 8y ago
    I meant generally, but fair point.

d33 8y ago

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.

deleted 8y ago
[deleted]
lugg 8y ago
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 8y ago
  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.
  - tenaciousDaniel 8y ago
    It's not on the blackberry browser, so that's gonna be a no for me! :p
  - mcv 8y ago
    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.
    - detritus 8y ago
      “Recent-ish versions of Chrome, Firefox, Safari, Opera, iOS and Android all support it”. According to my stats, there's a load of old Chrome & Safari versions using my site that would be tripped up by its use, sadly. I'm keeping a beady eye on my stats, awaiting the day and can make a site entirely with CSS Grid.

kennyadam 8y ago

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.

spzb 8y ago

Archive.org mirror : 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 https://web.archive.org/web/20190211124606/https://www.256ki...

jasode 8y ago

>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.

jumbopapa 8y ago
I wish I could use Firefox for iOS because of sync, but Safari is the only browser that supports content blockers.
t0astbread 8y ago
Is smooth scrolling really a feature you need in every browser you support?
- jypepin 8y ago
  well, just like any other features, assuming there is a good reason for you to implement that feature, you want most browsers to support it.
gruez 8y ago
Why would you want to force smooth scrolling in the first place? It's a browser setting (at least in Firefox) and it should stay that way.
- ygra 8y ago
  Whoever wants to force it will otherwise do so with JS. With CSS at least you can override it with a client stylesheet.
- jacurtis 8y ago
  I agree, I don't think this is a feature that web designers should worry about. How I scroll is something that should be set on the browser level. This is sort of like a web designer writing CSS to redesign my browser tabs while I visit their site. This isn't their job. Plus, on Mac devices with trackpads, the system OS already adds a smooth scrolling to all actions we do. So when we visit these sites that add smooth scrolling with Javascript it can cause us to go insane. Because scrolling becomes insanely sensitive, with 2-3 inputs trying to control scrolling behavior (the OS, the browser, and now JS). The system is adding its own acceleration and deceleration, and then javascript is sitting on top of that trying to interpret these forces and add their own multiplier on top of those. I have visited sites that have JS implemented smooth scrolling that is so sensitive, that I can't even barely touch the trackpad without scrolling down an entire page length.

August-Garcia 8y ago

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 8y ago
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 8y ago
  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 8y ago
    Firfeox Reader mode. It's basically a modern pure HTML browser. With images even. Well, sometimes. If the site's markup isn't garbage.

lpasselin 8y ago

You can make dropdowns with CSS.

sbhn 8y ago

You cant get a job with pure css and html

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

iaml 8y ago

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.

kakarot 8y ago
Native elements work if your design spec is flexible and aims to look natural on every browser and platform. If you have a rigid design they aren't as useful. Wouldn't be the end of the world if browsers actually exposed all of the relevant styling, but it does help to try and make flexible designs. HTML primitives make it a lot easier to reach accessibility spec. The date input in particular really is a mess though, every platform does it differently and phones have all sorts of weird widgets attached to it.
- tracker1 8y ago
  Date input is a mixed bag... it sucks all browsers/platforms do it weird and in incompatible ways... on the flip side, I don't like interrupting the "expected" platform behavior in terms of accessibility users.
null_content 8y ago
Web development is such a pain because the standard is sub-par (decided by committee, so no surprises there) and the implementation is even worse (full of inter-vendor inconsistencies and missing features). Frankly, last time I did web development, I felt tempted to just make the entire page one screen sized canvas and implement my own UI toolkit on it. That's bound to be more reliable (and probably faster) that the current state of affairs.
- 8y ago

nvr219 8y ago

Looks like you can't keep a website up with pure html and css lol

diafygi 8y ago

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 8y ago
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-Browser-Polyfills#details-and-summary https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Brow...

mxuribe 8y ago

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!

denniskane 8y ago

A task you didn't know could be done with pure JS (or maybe you did, congratulations)... https://linuxontheweb.org/desk.os https://linuxontheweb.org/desk.os

osrec 8y ago

> 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 8y ago
Yep.
August-Garcia 8y ago
asdf. Article corrected.

sirsuki 8y ago

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?

chiefalchemist 8y ago

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 8y ago
You can look it up: https://caniuse.com/ https://caniuse.com/
- chiefalchemist 8y ago
  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.

trqx 8y ago

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

tniemi 8y ago
I think that is mainly because of content control. Plain hotlinking is technologically simple, but a bad business practice.
- hawski 8y ago
  Wouldn't checking the HTTP referer server side fix hotlinking issues once and for all without any JavaScript?
  - marcosdumay 8y ago
    The referrer can be gamed, but it's not something you can't solve by combining it with cookies.

tekkk 8y ago

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_input_pattern https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_i...

extra88 8y ago
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 8y ago
  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.
- JetSpiegel 8y ago
  That site would be way better if it was self explanatory.

k-ian 8y ago

404 pages use pure html, actually

draw_down 8y ago

Cool, now just make sure this works for your users all over the world, in all the use cases you need to cover, and don’t forget to have your UX designers sign off on it!

gregmac 8y ago

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

stevenkovar 8y ago
Also, while the author is correct about the core functions of these elements, most cannot be animated or applied a transition between states. Not a deal breaker functionally speaking, but sometimes a subtle transition is useful so as to be less jarring.
interfixus 8y ago
IE support may not be all that relevant these days when even Microsoft disparages its continued use.
- braindouche 8y ago
  Tell that to all 50,000 people in my company, and the product owner I'm working for, who are forced to use it by Infrastructure, and 0.0% of our customers.
- stefanfisk 8y ago
  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.
  - cageface 8y ago
    Depending on how much it costs in extra developer hours supporting an older browser it might actually make quite a bit of sense for many companies, especially smaller ones without a well established product.

archevel 8y ago

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.

roywiggins 8y ago

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 8y ago

> Tasks That Can Be Done with Pure HTML and CSS Putting white text on a light blue background, apparently

dreamling 8y ago

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/

syndacks 8y ago

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

derefr 8y ago

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?

s3m4j 8y ago
Generally you could do something like `select(identifier).parentNode` ? pseudo language because I'm tired
recursive 8y ago
This has been requested many times. The short answer is performance implications. https://css-tricks.com/parent-selectors-in-css/ https://css-tricks.com/parent-selectors-in-css/
hjnilsson 8y ago
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.

_bxg1 8y ago

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 8y ago
Such terrible UX on that site. I had to switch to reader mode on Firefox before I could read comfortably

Animats 8y ago

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 8y ago
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 8y ago
  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.