Live data from Hacker News

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

github.com

121–130 of 319 posts

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

#121

Earlier quoted context omitted.

I write a lot of CSS and I would probably disagree. CSS has no console.log() for debugging, CSS often fails silently, and the demos in the link are more or less (albeit pretty neat) hacks, but don't use CSS features in the way the specifications intended.

Also no unit tests and a program model that is hard to make into a coherent mental model.

- CSS can be tested, e.g. [1]

- use simplified program model and enforce it, [2]

[1] https://github.com/jamesshore/quixote

[2] https://github.com/unframework/airtight-css-lint

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

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

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

#123
post #117

Earlier quoted context omitted.

There's a lot more to this than just "a little delay" to avoid accidental triggers. Good menus are complex. In desktop toolkits, there is a lot of logic to ensure they are accessible and don't behave in annoying ways. For example, a high quality menu will have a certain leeway to trigger into and out of submenus so that you don't accidentally drift into the incorrect submenu should you make an error of a couple of pi…

Good points, but surely all that knowledge could be encoded once into some CSS attributes, rather then rewritten every time for every JavaScript framework on every site?

A "correct" fix would be to build stylable core UI elements from the chrome itself. Leave the accessibility to the browsers (and by extension their UI toolkit). For this, you need a standard `` element, which is in HTML5.1:

https://w3c.github.io/html/interactive-elements.html#the-men...

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

#124
post #66

Earlier quoted context omitted.

What's the point of this post?

There are HN guidelines, and there's also the English grammar with a plethora of tools to help those with a mother tongue different than English like myself. HN is not a chatroom - it's a news website.

> HN is not a chatroom - it's a news website.

I normally wouldn't comment on this but since you've self-identified as being interested in correct grammar and punctuation, I will.

A hyphen isn't appropriate where you've used it. It should be an em dash. You can type an em dash with shift+option+hyphen on a Mac or by holding alt and typing 151 on Windows.

http://logicmason.com/2013/the-difference-between-hyphens-en...

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

#125

Numerous accessibility issues here. Many of these examples can't be operated by a keyboard, for example. "CSS only" is not a virtue if it comes at the cost (as it always does) of needlessly excluding people from the web.

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 out from behind a flag in the next Firefox version. A polyfill for IE etc. can bridge the gap.

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

#126
post #81

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…

Hmmm... .accordion .content { padding:0 10px; overflow:hidden; border:1px solid #fff; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; } -webkit-transition, -moz-transition... it's like we're at 180 degrees to where the web was in the days of IE4-6

Autoprefixer and prefixfree allow for writing 1x declaration and as support improves over time the prefixes are automatically dropped from your build.

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

#127

Earlier quoted context omitted.

CSS ( properly written ) is easier to debug than JS.

I write a lot of CSS and I would probably disagree. CSS has no console.log() for debugging, CSS often fails silently, and the demos in the link are more or less (albeit pretty neat) hacks, but don't use CSS features in the way the specifications intended.

Huh? Linting and compilation pull up just about every problem in the writing of CSS. The rest are browser bugs / quirks.

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

#128

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…

What do you exactly mean with "remote-execution-by-default"? As far as I know, all browsers have strict "same-origin" policies by default.

Apart from other points sibling comments have made - the current Web is very much a mush of "trust one site" leads to running code from three, four different domains via CORS and whatnot. My favorite alerts in noscript are people running js from bare cloudfare and s3 domains (do you trust all js publicly available on s3?) (and other cdns) - and also the "secure" amazon stuff like the hn search-box: some random AWS/cloudfront subdomains, a third-party service (algolia) and its accompanying domain for static resources.

It might be convenient and powerful - but secure? With our current huge (in code and complexity) browsers? With the series of bugs in font rendering, image libraries etc?

[ed: autocorrect. Apologies for seemingly calling algolia "third-rate" for a while there!]

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

#129
May the gods have mercy on the soul of who'll maintain code using these... "techniques".

(I know because back in the days I've written things like this myself :) ..probably the curses whispered by those who've had to endure their progenitors are finally getting at me)

Post reply on HN