CSS is powerful, you can do a lot of things without JS • Hacker News Board

Re: CSS is powerful, you can do a lot of things without JS

#161

Post by sanderjd » Tue, Jul 05, 2016, 2:24 PM UTC

the_gastropod wrote: post #155

cptskippy wrote: post #143

Earlier quoted context omitted.

> Ah! Also, nobody cares about unobtrusive JavaScript anymore. I do. I also care about graceful degradation. There are certain times (e.g. Web Apps like Gmail) where graceful degradation is almost impossible and unobtrusive JavaScript would be silly but those are the exception. Most sites on the web are just content and there's no reason to have excessive JavaScript or any reason why the page can't be perfectly funct…

I often hear rationalizations about how x couldn't be built with graceful degradation in mind. There certainly are _some_ examples (games, for example). But GMail doesn't strike me as a particularly compelling example. GMail is also _just content_. The fancy ajax interactions, though nice, are hardly required for an email client.

This is a-historical by my memory - the entire reason Gmail became so successful was that its use of "fancy ajax interactions" made it shockingly nicer to use than any of its competitors at the time.

I think if one of your main selling points is interactivity afforded by javascript, then it is unlikely to have much return on investment to accommodate users who don't want that. But for sure people should be thinking harder about what their selling points really are - the market for "it's better because of ajax!" is probably tapped out.

Re: CSS is powerful, you can do a lot of things without JS

#162

Post by majewsky » Tue, Jul 05, 2016, 2:25 PM UTC

I would like a superset of HTML that wraps these hacks up into nice controls, then compiles everything down to plain HTML + CSS.

Re: CSS is powerful, you can do a lot of things without JS

#163

Post by grahamel » Tue, Jul 05, 2016, 2:25 PM UTC

extra88 wrote: post #125

grahamel wrote: post #57

Earlier quoted context omitted.

Was about to write the same. The three examples I clicked on - tabs, accordion, and menu - didn't work via keyboard. All of these are fairly simple show and hide interactions that are easier to use, build and maintain when done with javascript, with all the content shown if JS is turned off, not fully loaded or broken.

The accordion can work via keyboard with some styling changes, e.g. position or clip checkbox instead of display:none, add visual indication on :focus. I didn't check the others but their accessibility may be similarly correctible. Of course for accordion in particular it would be better if the pure HTML solution of using and elements was supported in all browsers. They're already in Chrome and Safari and will come o…

True, yet when examples like these are added without basic keyboard accessibility in mind they can get added to projects in the same half finished state.

How many sites using Meyer's reset didn't add focus styles to links? Even with the comment /* remember to define focus styles! */

It's not the fault of the original developer but it certainly helps to have more robust examples.

Re: CSS is powerful, you can do a lot of things without JS

#164

Post by clarry » Tue, Jul 05, 2016, 2:27 PM UTC

Hamcha wrote: post #118

clarry wrote: post #92

Earlier quoted context omitted.

Remember when Good Developers would hate on framesets because they break the back button and linking and everything? Now it's totally OK to break all that with AJAX and "text-as-apps"... I much prefer the days of the old web.

I have to maintain a web interface with framesets and it's much worse than the React stuff I build. Yes it's "one huge js-dependant page for everything", but it can keep track or where it is (and go back to it) using location.hash or path entirely (if the webserver agrees). So I can fix single page apps, I can't fix framesets.

From a user's perspective, what you [as a developer] can or cannot fix doesn't really matter. What's broken is what matters. I find that with the JS craze we've been living for a few years now, things break a lot in the same way they did back in the frameset days. Except that now it is worse in some ways; with framesets, I could link to a specific frame if I wanted. And I could navigate back and forth too, as long as I understood the mechanics behind it. Now with the JS crapps, it's no longer something I can work around as a user.

Re: CSS is powerful, you can do a lot of things without JS

#165

Post by vkjv » Tue, Jul 05, 2016, 2:27 PM UTC

creshal wrote: post #133

ctvo wrote: post #122

I've worked with people who did things like this. It's not fun for anyone else on the team to try and figure out why you're using specific pseudo selectors on tags in a child inside a sibling in some label to make an accordion that would take 3 lines in Javascript.

Shouldn't pure CSS animations have better performance?

The animation, yes, but not the trigger. You can balance this by adding / removing classes in javascript (to limit the complexity in CSS) and with the class performing the animation.

Re: CSS is powerful, you can do a lot of things without JS

#166

Post by sanderjd » Tue, Jul 05, 2016, 2:28 PM UTC

JoeAltmaier wrote: post #150

inanutshellus wrote: post #148

Earlier quoted context omitted.

My current-favorite problem with modern web development is mobile-specific redirection. e.g. you click a link in your email and it takes you to "www.foo.com/somethingWithParametersAndImportantStuff", foo.com detects you're on a phone and redirects you to their mobile homepage at "m.foo.com", blowing away your URL or even better not supporting your particular URL's page in the mobile site... where... your mobile brows…

Digression: 'clicking on a link' may become an obscure reference soon, like dialing a phone. How many young people ever use a mouse?

I'm very curious about this: is there a hypothesis that non-mobile computers are going away in the business world and/or that "young people" will not be involved in that world? I don't know the stats - are tablets making big inroads in business computing?

Re: CSS is powerful, you can do a lot of things without JS

#167

Post by jhall1468 » Tue, Jul 05, 2016, 2:28 PM UTC

cptskippy wrote: post #143

achairapart wrote: post #54

Most of these are just clever CSS hacks. There is a website collecting these kind of experiments since the early '00: http://www.cssplay.co.uk/ There was a time when separation of concerns and the "Rule of Least Power"[0] where the foundation principles of web development. Today you have preprocessors, postprocessors, transpilers, content and style in JavaScript, behavior in CSS. Very powerful tools that can easily l…

> Ah! Also, nobody cares about unobtrusive JavaScript anymore. I do. I also care about graceful degradation. There are certain times (e.g. Web Apps like Gmail) where graceful degradation is almost impossible and unobtrusive JavaScript would be silly but those are the exception. Most sites on the web are just content and there's no reason to have excessive JavaScript or any reason why the page can't be perfectly funct…

Just because something can be done a certain way doesn't mean it should be done a certain way. Minimizing javascript for the sake of minimizing it is silly.

People that disable javascript represent a tiny percentage of the population. No one is going to make engineering decisions based on that tiny percentage, anymore than people still target IE6.

Re: CSS is powerful, you can do a lot of things without JS

#168

Post by TD-Linux » Tue, Jul 05, 2016, 2:30 PM UTC

nevir wrote: post #141

creshal wrote: post #133

Earlier quoted context omitted.

Shouldn't pure CSS animations have better performance?

CSS animations are generally on par with JavaScript, except when they're hardware accelerated. But that's changing once web animations ( https://w3c.github.io/web-animations/ ) hits mainstream anyway - both CSS & JS get access to the same engine.

The point of CSS animations isn't HW accel - you get that just from layerization. What it does get you is animations executing off the JS thread, so if you have piles of third party JS it won't cause frame drops.

Re: CSS is powerful, you can do a lot of things without JS

#169

Post by CaptSpify » Tue, Jul 05, 2016, 2:30 PM UTC

vroombaprime wrote: post #151

code_research wrote: post #86

I am missing one important argument in this discussion: CSS only design is an important piece of a future web with reduced security and privacy threads. The (interesting) model of allowing remote code execution per default was a beautiful, but naive vision. We have to make big advances in technology, politics and society to make this model work in a way that does not make internet users victims by default. We are not…

Browsers/webapps have only become this crazily successful because they allow seamless delivery of applications to run locally. I haven't seen anything to build "code-less" apps that can implement the complex features people want and isn't a complete nightmare to build and maintain. Until then everything you're talking about is just a pipe dream. You can still make the apps you're talking about with html+css and enfor…

> Browsers/webapps have only become this crazily successful because they allow seamless delivery of applications to run locally.

I'm going to heavily disagree with you. There were plenty of sites that were successful without using heavy JS. Most webapps I see can run easily without JS, they just choose not to. Yes, there are exceptions, but they are exceptions.

"The core features people want" aren't JS-pop-ups, and slow browsers. They want sites that work quickly, are easy to understand, and work on mobile just as well as on a desktop. I would argue that JS makes all of those aspects worse.

Re: CSS is powerful, you can do a lot of things without JS

#170

Post by gregmac » Tue, Jul 05, 2016, 2:30 PM UTC

ctvo wrote: post #122

I've worked with people who did things like this. It's not fun for anyone else on the team to try and figure out why you're using specific pseudo selectors on tags in a child inside a sibling in some label to make an accordion that would take 3 lines in Javascript.

I'd agree with the sentiment, but for a different reason. I think the method can be useful and maintainable, but, the problem with this implementation seems to be a mix of design (font colors, sizes) and functionality, and a lack of documentation.

Splitting the CSS into two distinct pieces (or better: files, but I realize that's a limitation of jsfiddle) would go a very long way to making this technique maintainable. Having documentation that then shows the required HTML structure and the necessary classes to add would help immensely.

Essentially, build it like a UI library that just happens to be written in CSS.

Right now, it's just a demo of a technique that's not built in a reusable way, and you need to be pretty decent with CSS in order to understand and use it (since you pretty much have to re-implement it every time you want to use it). To be fair, the HN submission and site don't make any claims it's anything but this.