7 ms·

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 with

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.
- digi_owl 10y ago
  Using what was supposed to be a document display format for developing application interfaces is a massive hack in the first place...
  - nurettin 10y ago
    And using style sheets that were initially for styling documents for animation/graphics, and using javascript which was created as a lightweight language for non-professionals to create reactive diff-based dom manipulations, and...

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.
digi_owl 10y ago
Using what was supposed to be a document display format for developing application interfaces is a massive hack in the first place...
- nurettin 10y ago
  And using style sheets that were initially for styling documents for animation/graphics, and using javascript which was created as a lightweight language for non-professionals to create reactive diff-based dom manipulations, and...