22 ms·

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

• jordanwallwork 10y ago
  The problem with using css this way is that it's not as obvious what's supposed to happen as it is when using js. I'd love for there to be some explanation within the examples of _why_ they work - I've just been reading the first modal example but I can't really understand it
  • steventhedev 10y ago
    The :target pseudoclass is used, along with anchors. It means that it also pollutes the browser history, which is somewhat appropriate for modals, but probably not what you want. Still neat though.
    • jordanwallwork 10y ago
      How does the browser know which modal is targetted though? I thought :target had to match the hash, but both links just link to # :S
      • jordanwallwork 10y ago
        Ah forget that, as usual it's immediately obvious after I post that I don't understand! Looks like I had a bit of a mental block and couldn't see the top buttons for some reason - I was looking at the close links. Yup that all makes sense now then
  • nurettin 10y ago
    Building web applications with screens that have complex workflows and state is a need that is largely ignored by browsers and web standards. Instead of getting reusable gui components we get indechiperable css hacks that were built for creating art installations on the web rather than getting any actual work done.
    • icebraining 10y ago
      Mozilla (including Firefox) had XUL, but nobody cared.
      • izym 10y ago
        Was it ever meant for general web usage?
        • icebraining 10y ago
          For a time that was talked about (and Firefox supported XUL-based sites up to version 4).
      • wtbob 10y ago
        > Mozilla (including Firefox) had XUL, but nobody cared. Have you seen XUL? Here's an example, from https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Adding_Buttons https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tu... <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="Find Files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button id="find-button" label="Find"/> <button id="cancel-button" label="Cancel"/> </window> All that does is display a window with two buttons. You can imagine how hideous it could get when it got more complex. Now, imagine this alternative (I'm assuming that id & title are mandatory arguments, and that orient is optional, default to horizontal): (sul (stylesheet "chrome://global/skin" "text/css") (window "findfile-window" "Find Files" (button "find-button" "Find") (button "cancel-button" "Cancel"))) Which would you rather write in? Now, imagine that JavaScript were Scheme or Lisp instead, so that your browser interaction code were also written in an s-expression language. And imagine that CSS were s-expression-based, so that you were using the same tools to manipulate the same data everywhere. It makes me weep.
        • talmand 10y ago
          I must be insane because I don't really see that much of a difference between the two examples you provided. I can read one just as well as the other.
• IanCal 10y ago
  So in the first modal example, the document contains both dialog windows at the same time. Is that really what you want? Does that properly describe the content of your document?
  • Kiro 10y ago
    How else would you do it, even in JavaScript?
    • WickyNilliams 10y ago
      Add modal to DOM as and when needed
    • IanCal 10y ago
      Add it to the document when it's needed, and remove it from the document when it's not.
• adamjc 10y ago
  The problem with relying on anchors means it stays in the browser history, so if you press 'back', you get the modal dialog again! I don't think this is very useful, but it is a fun exercise in CSS.
  • taspeotis 10y ago
    Just use JavaScript to clear the browser history. Bingo! Pure CSS modal.
    • pori 10y ago
      I see what you did there.
  • dr_swe 10y ago
    Well, you can manipulate the browser history to remove those anchor links :)
    • choult 10y ago
      ... but perhaps not with CSS...
    • adamors 10y ago
      With CSS? It's just easier to do this with Javascipt without hacking the history.
    • mungoid 10y ago
      Sure, just have the user follow a step-by-step guide on deleting the last x items in their history every time ;-)
  • MarkCole 10y ago
    To be fair in some cases this can be a benefit. There have been occasions where I have wanted to link to content contained within a modal. You are right in that there are also occasions where this isn't desired.
  • 10y ago
• nachtigall 10y ago
  Would be nice if this would list the minium browser versions required for each example.
• the_mitsuhiko 10y ago
  Whenever someone makes a menu with CSS instead of javascript i go crazy as a user. The lack of delay is such a frustration.
  • adrianN 10y ago
    Whenever someone makes a menu with js I don't use the site because I browse without js.
    • paradite 10y ago
      Then you start adding exceptions for every single website you visit, such as http://cs.stackexchange.com/ http://cs.stackexchange.com/
    • the_mitsuhiko 10y ago
      That's fine. Nobody forces you to use my applications and websites.
      • e12e 10y ago
        Until you work for a government agency. Or the only supplier of a certain important service in an area. Etc.
        • Ralfp 10y ago
          Until your agency's spec goes among the lines of "UI implemented in modern technologies (eg. React.js, Angular, Ember.js)". And no, I'm not making this up.
    • deleted 10y ago
      [deleted]
    • deleted 10y ago
      [deleted]
  • lifthrasiir 10y ago
    Also no hover menu [1], please. In JavaScript hover menu is harder to make, but in CSS it is instant and much prone to abusing. [1] http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/ http://uxmovement.com/navigation/why-hover-menus-do-users-mo...
• awjr 10y ago
  Although I think this is an interesting exercise, I need these behaviours to work the same across all browsers. This gets even more complicated within JavaScript apps where the state of the components is something I need to have fine grained control over. Really cool and good to see what how powerful CSS3 is, but not sure how useful it is, particularly when I need this behaviour working on older mobile browsers.
• d33 10y ago
  On a side note, HTML + CSS3 is Turing complete: https://news.ycombinator.com/item?id=2300836 https://news.ycombinator.com/item?id=2300836
  • erlehmann_ 10y ago
    That is actually wrong. HTML + CSS3 + user interaction is turing complete. Yet, as Olia Lialina argues, quite a lot of software + user interaction can actually be turing complete: http://contemporary-home-computing.org/turing-complete-user/ http://contemporary-home-computing.org/turing-complete-user/
• brador 10y ago
  Not everyone is using the latest CSS standard browsers. Keep it simple for production code. It's easier to work with, support, and maintain.
• progval 10y ago
  Ironically, all of these links point to jsfiddle/codepen, which require Javascript to see the demo.
• everydaypanos 10y ago
  Still not good enough. For example the popover/tooltip that pops up on hover is fixed right below the target. If for example the viewport/window is smaller than the available space it will "bleed" out of view. You still need javascript to place it properly, and javascript that manipulates :after and :before pseudo elements is not straightforward.. Just saying :)
  • LoSboccacc 10y ago
    More to the point :target can only target one element at most, since fragment is unique. the other stuff ranges from clever tricks, like the label/checkbox modal, to stuff which would be a nightmare to maintain on a complex page
    • erlehmann_ 10y ago
      I have found that this makes it actually easier to reason about web page state: It is represented by the current URL.
  • wanda 10y ago
    Actually, you just need media queries.
• drinchev 10y ago
  I'm still a huge fan of "If you can do something with CSS, avoid JS", but these days, working with React, everything is JS. Although IMHO it makes logical sense to put the logic for the modal windows in the JS, not the CSS. And definitely easier for maintaining it.
  • zaidf 10y ago
    JS is far more predictable than CSS.
    • drinchev 10y ago
      CSS ( properly written ) is easier to debug than JS.
      • thecopy 10y ago
        Is CSS ( properly written ) is easier to debug than JS ( properly written )?
      • bennettfeely 10y ago
        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.
        • afarrell 10y ago
          Also no unit tests and a program model that is hard to make into a coherent mental model.
          • atmin 10y ago
            - CSS can be tested, e.g. [1] - use simplified program model and enforce it, [2] [1] https://github.com/jamesshore/quixote https://github.com/jamesshore/quixote [2] https://github.com/unframework/airtight-css-lint https://github.com/unframework/airtight-css-lint
• zaidf 10y ago
  History is going to look back at CSS in disbelief when it calculates the amount of engineering time was spent trying to position elements correctly. This isn't hating on CSS as much as how broken layout creation is with no end in sight--but plenty of hacks.
  • iLoch 10y ago
    CSS layout is actually pretty good these days, with flexbox anyway. It's hard to come up with a better layout system used anywhere near as much as CSS.
    • mungoid 10y ago
      Agreed, however there are a ton of companies with extremely outdated os/browser policies, that refuse to update for whatever reason. Been a contract developer for ~10 years and even this year we were told to support IE 8 on a specific project because some fortune 50 company needs us to (Seriously). There were plenty of modern tools that helped reduce issues but there was still a bit of headache.
      • reitoei 10y ago
        That headache is what you get paid for.
        • Piskvorrr 10y ago
          Nope. There's usually plenty of work to do; supporting IE4 (or FF 3, or whatever Webkit shipped on Android 1.6) just makes it longer and over the budget, while squeezing out other projects. In a word: busywork.
  • talmand 10y ago
    What do you mean? It's quite easy to position elements on the page however you please. It can get quite complicated if you wish to support multiple viewport sizes with dynamic resizing, but it can be done.
• curiousgal 10y ago
  I've always been told that the best way to learn something is to delve into it. Tried so with CSS but it was such a hassle that I gave up. Now, years later, all those past frustrations of my younger self remain to the point it's like a bête noire of mine. Seeing all this coolness makes me feel kinda bad for missing out. /rant
• iLoch 10y ago
  I think it would actually be wise to stick to JS style rendering (as is the case with React) as we're only going to see more and more styling being delegated to scripts with the rise of wasm. Only a matter of time before CSS will only really be useful for completely static websites IMO. Edit: Downvoting me because you disagree isn't really in the spirit of HN. Please provide a counter argument if you disagree, I'd be interested to hear it.
  • HelloNurse 10y ago
    It would actually be wise to arm special forces with laptops, as we're only going to see more and more operations depending on hacking into security systems and building automation systems with the rise of smart devices that have no business being on the web (aka IoT). Only a matter of time before guns will only really be useful in third world countries without electricity.
    • Piskvorrr 10y ago
      So, are you saying that a bunch of guys with wire cutters and guns would be unstoppable? Simple scenario: 1. Cut all the power (grid connections A, B and C, disable generators) - nobody says no if you ask nicely and have a big gun 2. Watch the special teams struggle helplessly to hack into offline systems 3.PROFIT!!! Your assumption (that the network somehow runs on unicorn farts and that the need for boots-on-the-ground protection is obsolete) is fatally flawed. There's no way to outcloud everything, no matter how vigorously you try to handwave away the physical layer. Someone needs to keep the juice flowing, which also needs physical protection.
      • HelloNurse 10y ago
        Not good at metaphorical sarcasm, eh? Special forces not using guns because they sometimes need hackers make as much sense as web developers not using CSS because they sometimes need Javascript-based layout.
        • Piskvorrr 10y ago
• amelius 10y ago
  > Css is more powerful today and you can do a lot of thing dont need js Yes, but the problem is that adding or changing functionality implemented in CSS can easily lead you into a brick wall. At that point you will either have to rethink your approach completely, or move back to JS.
• mcv 10y ago
  I prefer using CSS for my styling and javascript for my functionality, as God intended. These examples could be educational for getting a bit more out of your CSS while keeping only the pure functionality in javascript. Too much styling-related stuff seems to be sneaking into code these days. I like my concerns separated.
  • clifanatic 10y ago
    > I prefer using CSS for my styling and javascript for my functionality To play devil's advocate, though... is an accordion or a carousel "functionality" any more than, say, a drop-down or a multi-line input box is? I mean, the games examples are pretty wacky (in a cool but "thank God I don't have to debug these" way), but things like tabs and tree views are so ubiquitous that a case could be made for having standard HTML input tags for them.
    • timdavila 10y ago
      > a case could be made for having standard HTML input tags for them. and for the accordion at least, the case was made and approved. check out <details> and <summary>
      • Kluny 10y ago
        Neat!
    • mcv 10y ago
      They just display stuff, right? I'm fine with having those in pure CSS if it can be done in an understandable and maintainable way. But the decision to display a message in a modal popup when you click a button is functionality and should be javascript. The behaviour of the modal popup itself is fine as CSS. Well, that's my opinion at least.
• kyriakos 10y ago
  Using checkboxes and radio buttons for keeping state is hacky to say the least. At the end of the day you can do the same with a few lines of easier to understand javascript.
• Fletch137 10y ago
  A fun exercise - while you might not _need_ JS, it's still the best option in a lot of cases. I'd never even consider using most of these techniques in production - while they're interesting and showcase what CSS can do, they're practically unmaintainable.
• dotdi 10y ago
  Look ma! I replaced a few lines of JS with a crap-ton of CSS.
• danielnixon 10y ago
  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.
  • grahamel 10y ago
    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.
    • extra88 10y ago
      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 <details> and <summary> 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.
      • grahamel 10y ago
        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.
      • danielnixon 10y ago
        As one counter example: you'll never make a modal popup accessible without JavaScript. The focus management required is impossible with "CSS only".
• achairapart 10y ago
  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/ 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 lead to unnecessary complexity. On the other hand, somehow W3C failed to turn these principles into a truly interoperable and semantic web. Ah! Also, nobody cares about unobtrusive JavaScript anymore. [0]: https://www.w3.org/2001/tag/doc/leastPower.html https://www.w3.org/2001/tag/doc/leastPower.html
  • harryf 10y ago
    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
    • ricardobeat 10y ago
      transition has been standardized and available in all browsers for years already, that is only necessary as fallback for very old browsers.
      • talmand 10y ago
        The only reason I use the webkit prefix on transition is for Android, otherwise I would say it isn't necessary at all.
        • ry_ry 10y ago
          Still a suprising number of old safari builds out in the wild, from a very quick look at our GA. Largely elderly iphones I assume? Either way, I'm reticent to pull the WebKit prefixes from our mixins for now. I wonder if my employers would be interested in releasing (& aggregating with other relatively large sites) our browser usage stats to create a categorised set of current 'real world' stats?
• jliptzin 10y ago
  Just because you can, doesn't mean you should.
• vladootz 10y ago
  Even if you can do a lot of stuff in css, sometimes you shouldn't do them. Razvan Caliman from Adobe has some good points on this topic: https://youtu.be/WupAsZGHDcY https://youtu.be/WupAsZGHDcY
  • code_research 10y ago
    Have you seen the whole presentation or just the first minutes? In the beginning he is showing some edge cases of css only usage, but then he actually demos some really good examples. The slides are here: https://github.com/oslego/css-for-decoration https://github.com/oslego/css-for-decoration
    • vladootz 10y ago
      I've seen it all, live and online. I was referring to those points when he's talking about css misusage.
• nikolay 10y ago
  - "CSS", not "Css"; - "JS" or better yet "JavaScript", not "js", nor "Javascript"; - "don't", not "dont"; - use title case as per the guidelines.
  • scrollaway 10y ago
    What's the point of this post?
    • nikolay 10y ago
      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.
      • scrollaway 10y ago
        You're complaining about casing and one missing apostrophe... if you cared this much, how come you didn't notice the title is missing two words to even make sense?
        • nikolay 10y ago
          I am complaining about things that even idiots should know (and that better yet HN should detect and reject). English is not an easy language to master but doing proper casing and basic punctuation right should be no challenge.
          • scrollaway 10y ago
            You keep implying people are idiots for missing apostrophes and not casing how your lordship likes it, I'll keep flagging your posts. In the mean time, neither CSS nor JS are featured in the dictionary so why on earth do you think your initial post is appropriate? I'm sure if you google enough you'll find a community that finds it acceptable as a whole to be rude to people who don't have proofreaders and a full publishing staff for their internet comments. Sure as hell hope HN isn't it.
• lasfter 10y ago
  It is pretty easy to cheat at the rocketship game by dragging your mouse to avoid enemies.
• erlehmann_ 10y ago
  If I do not need JS, why do at least the first four demos do not work without it? I stopped trying the linked demos after that.
• lucaspiller 10y ago
  Is it possible to display a "There are no records" message if a container is empty (i.e. tbody) using CSS only?
  • err4nt 10y ago
    There is an :empty state you can use. I'm not looking at the demo right now but I've added messages like this: .container:empty:before { content: 'There are no Messages' }
    • dahauns 10y ago
      Just be aware that the element really has to be empty - any whitespace (including empty child tags etc.) makes the selector ignore it.
      • err4nt 10y ago
        Yeah, whitespace makes a textNode so an element containing any nodes can't be :empty. Also gotta watch out for those whitespace-only extra nodes when counting the children of an element with JavaScript, it often returns more children than you think at first ;)
• deleted 10y ago
  [deleted]
• code_research 10y ago
  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 there yet. Reality is: the crooks destroyed that vision and are advantaged by the current situation, while all internet users are being trapped in their first moment of browser usage without their consent or knowledge. For many use cases, (e.g. government websites, banking, anything where you type in your name) css-only design should become a requirement by law to protect the user until we figured out how to write secure software that respects user privacy and how to form governments that will respect their citizens (possibly will take longer). Until then browser vendors should implement more and better possibilities for CSS that help to avoid JavaScript whenever possible. I very much like JS animations and stuff happening in the browser window, also there are some edge cases where JS brings some important advancements to a UI, but we have to face that privacy and security are much more important issues than having a nice UI and we have to change the current situation, as we, as programmers, are responsible for it. The "remote-execution-by-default" experiment has failed, we need to change that, and CSS is a great way to go on with a web that might be less problematic for everyone, but still offers very nice usage experiences.
  • achairapart 10y ago
    What do you exactly mean with "remote-execution-by-default"? As far as I know, all browsers have strict "same-origin" policies by default.
    • code_research 10y ago
      "remote-execution-by-default": web browsers execute code that was loaded from an untrusted source somewhere on the internet. Every (ok, most) browsers by default allow any website you visit to execute JavaScript code in your browser. "same origin" is about the source of that code, only of minor relevance here as long as no working signed code distribution mechanism and infrastructure exists - why not, btw, after all these years? For communications and general information transmission we do not need remote code execution. Yes, browsers try to do that in a "safe way" - the "sandboxing" approach has been exercised for many years now, mostly without success. Maybe Qubes OS can be a successful approach to this problem, but we still have too many non-technical problems to solve, as reality shows, so enough time to do more research. Until then: css only should be the default. CSS gives us a very good way to stop going on with that inacceptable defaults while we fix the first version of the internet.
• nzjrs 10y ago
  Related, does anyone else have a preferred pure css treeview?
  • Piskvorrr 10y ago
    Preferably one which does not require me to mouse down precisely to a 20px tall target, make a 90 degree turn, mouse right to another tiny target, turn again, repeat? And does not disappear on the tiniest error, making me go through the whole ordeal again? Also, keyboard support would be great. And if it wouldn't overflow offscreen. Oh wait, no such thing. (Note that these are basic issues, not arcane requests for 9-bit EBCDIC compatibility - but nooooo: let the users suffer, because we want to use this extra-cool trick)
• imafish 10y ago
  In my opinion, using Cascading StyleSheets for this stuff is just broken. Animations are not styles. Behavior is not a style. Readability and usability of animations could be improved by adding animation tags to the HTML Canvas (like WPF Storyboards: http://www.codeproject.com/Articles/364529/Animation-using-Storyboards-in-WPF http://www.codeproject.com/Articles/364529/Animation-using-S...). The view behavior-part could be done like WPF triggers. In fact let's just get rid of HTML/CSS and implement WPF for the browser.
• mxuribe 10y ago
  Traditionally, I remember the rule that presentation should be managed by css, while behavior should be managed by javascript. But does the fact that some things can be reasonably done either way change - for example - a site's or app's maintainability? How about it performance? Is a CSS implementation rendered faster than javascript? I struggle with this at times, especially in some cases where - admittedly older - frameworks allowed for some overlap. Ah, well, much like lots of the web, i'll just work to get stuff done.
  • hiou 10y ago
    CSS animations and behaviors can be rendered outside the main JavaScript thread whereas JavaScript based animations cannot.
• zuxfer 10y ago
  And here I am, trying for past 10 years to centre align a div, both horizontally and vertically.
  • yoz-y 10y ago
    You probably already know this but just in case: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ https://philipwalton.github.io/solved-by-flexbox/demos/verti...
  • mungoid 10y ago
    You took the words right out of my mouth(fingers). Was just thinking the exact same thing
    • rimantas 10y ago
      How about learning some CSS? This "joke" should really be retired by now. I've been doing this stuff 10+ years ago when stills supporting IE5, for fucks sake.
  • nsuser 10y ago
    http://howtocenterincss.com/ http://howtocenterincss.com/
  • afarrell 10y ago
    Yea, I share your pain. However, for this specific problem, you are best off using flexbox because there is a good tutorial for it: http://flexboxfroggy.com/ http://flexboxfroggy.com/
  • talmand 10y ago
    That joke is too old, there are new things to mock CSS over these days.
• ivanhoe 10y ago
  IMHO this is a big step back, what do you really gain by sacrificing semantics just to avoid a little js code? CSS was supposed to help us separate content and presentation, and adding a bunch of unneeded tags just to make these hacks work is the very opposite of that.
• ClassyJacket 10y ago
  Is that title supposed to be in English?
• ClassyJacket 10y ago
  Is that title supposed to be in English?
• ctvo 10y ago
  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.
  • creshal 10y ago
    Shouldn't pure CSS animations have better performance?
    • awesomerobot 10y ago
      If you have a sane amount of JS (ie, not loading entire libraries to accomplish an accordion) the performance differences should be negligible.
    • nevir 10y ago
      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/ https://w3c.github.io/web-animations/) hits mainstream anyway - both CSS & JS get access to the same engine.
      • TD-Linux 10y ago
        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.
        • at-fates-hands 10y ago
          Good point. If you use Wordpress, like millions of people do, you will have a fuck ton of JS plugins running, so I can see where this would be advantageous.
        • nevir 10y ago
          Right, which you also get via the web animations API (queue up animations, and have them run on a separate thread)
• nnq 10y ago
  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)
• vkjv 10y ago
  The accordion example isn't really what I think of as an accordion because it doesn't auto-close other elements. For that behavior, you can make some minor tweaks swapping out the checkbox elements for radio buttons.
• MrPatan 10y ago
  The accordion example cheats a bit. The height of the items is fixed to 300px. I don't know if it'd be possible with flexbox nowadays. The usual max-height trick is not ideal, as the animation then doesn't have the right duration.
• boubiyeah 10y ago
  Please don't. CSS is unmaintenable. JS can be made very maintainable; end of story.
• vzip 10y ago
  I've seen people create some beautiful things in pure CSS but often the code looks like a horrendous hack.
• majewsky 10y ago
  I would like a superset of HTML that wraps these hacks up into nice controls, then compiles everything down to plain HTML + CSS.
• drydenwilliams 10y ago
  It's a really nice solution for experiments but I've found it quite difficult to get people to adopt this CSS approach in some companies (regardless of any cross browser implications). Everyone needs to be on the same page and of course be up to date with CSS3 animations, which can be over looked.
• pg_is_a_butt 10y ago
  except, people are still using browsers from yesterday. idiot.
• wnevets 10y ago
  Is it wrong of me to not like using the css content property? I feel like actual content shouldn't be in css.
  • napworth 10y ago
    It depends on context. If it's stylistic content, then I say it's reasonable. If it's the main body of your blog post, then maybe just wrap it in a <p> tag.
  • talmand 10y ago
    I agree, it should be strictly limited to non-important styling needs. Recently someone had to go through our code base removing text from content properties in our CSS to make way for a future translation effort.
• BinaryIdiot 10y ago
  These are cool "CSS tricks" but I would seriously never allow someone to use these in a production web application. - It's not an accessible solution in most cases (no keyboard navigation) - The CSS classes are very and overly complex to the point where it's not intuitive at all what they're doing (honestly the code being intuitive is more important to me than any minor performance benefits that may be seen here)
• reitoei 10y ago
  ITT: people taking this way too seriously
• deleted 10y ago
  [deleted]
• deleted 10y ago
  [deleted]
• josephjrobison 10y ago
  Related to this - is it possible to do something with pure CSS like shown in the black filter buttons area on this - http://www.siegemedia.com/creation/best-infographics http://www.siegemedia.com/creation/best-infographics ?
• wehadfun 10y ago
  I''m glad that the general consent here seems to be doing this in CSS is not a great idea. I feel the same way about XAML where programmers try to do things in XML instead of C#
• acbabis 10y ago
  The biggest problem with these hacks isn't a preference for CSS over JS (which IMO is fine in moderation); it's the fact that they aren't keyboard or screenreader accessible. A person using a screenreader can't even navigate to the accordion (http://jsfiddle.net/yn4ls/ http://jsfiddle.net/yn4ls/), and if they could, it would tell them it's a form element.
  • Kluny 10y ago
    Yeah, that's an uncool abuse of the checkbox element. I'd rather be conventional than clever when it comes to layout.
• 20years 10y ago
  While I don't think I would use a lot of this in production for the maintainability alone, it does showcase what you can do with CSS. I see a lot of convoluted Javascript being used on things that can easily and more cleanly be accomplished with a little CSS.
• hartator 10y ago
  I think that's great, but everything is based on hacks using checkboxes.
• anacleto 10y ago
  You definitely missed the Pure CSS dancing tree: https://codepen.io/yukulele/pen/KCvbi https://codepen.io/yukulele/pen/KCvbi
• lsh 10y ago
  hm. ironically (?) none of the linked examples work without javascript.
• supernintendo 10y ago
  There are almost 300 comments here and no one has pointed out the obvious: these can be used within email templates where JavaScript is unavailable. For that reason alone, I think this is pretty cool. But sure. Always use the right tool for the job, as they say, and for application logic that tool is not CSS.