5 ms·

I vote we change the name from CSS to PWL. PWL is, of course, Puzzle Web Language. This is what I hate about CSS: it's a jigsaw puzzle that must be brute-forced

I vote we change the name from CSS to PWL. PWL is, of course, Puzzle Web Language. This is what I hate about CSS: it's a jigsaw puzzle that must be brute-forced. The fact that this exists and is lauded as clever rather than being ridiculed for its opaqueness really gets my goat.

jabo 13y ago
The reason this is clever is because CSS wasn't intended to be used to draw shapes. You would use HTML5's canvas element to do that. Instead this shows how you can hack a simple border property to make a DOM element look like a triangle.
- ygra 13y ago
  Actually I'd use SVG for that, it's even trivial to write: <svg width='20' height='10'> <path fill='#D94948' d='M0,20h20L10,0'/> </svg> Should be supported pretty much everywhere canvas is, but without the need of scripting to actually get a triangle.
  - Sharlin 13y ago
    But that's hardly reusable. You'll have to copypaste the (completely nonobvious) markup everywhere you want a triangle. Although it might be possible to use the CSS :before pseudo-element...
    - mbq 13y ago
      SVG has `symbol` and `use` for reusing stuff: http://www.w3.org/TR/SVG/struct.html#SymbolElement http://www.w3.org/TR/SVG/struct.html#SymbolElement
      - matthuggins 13y ago
        I can't stand the w3 docs sometimes. After reading that section about `symbol`, I still have no clue what it is or how to use it.
        ygra 13y ago
        What exactly don't you understand? I find the W3C specs fairly well-written, actually. You declare a symbol in the defs section of an SVG image and you can instantiate it with use. E.g. <svg> <defs> <symbol id='foo'> <circle r='5' cx='10' cy='3'/> </symbol> </defs> <use xlink:href='#foo' x='2' y='5'/> <use xlink:href='#foo' x='10' y='10' fill='red' stroke='blue'/> </svg> (does not actually work, because namespaces are missing and the symbol likely is missing things like a viewbox, but just to get the general idea across)
    - lambda 13y ago
      More obvious if you use a polygon rather than a path object: <svg height=10 width=20> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> </svg> And you can put it in your CSS using a data URI: .triangle { background: url("data:image/svg+xml;charset=utf-8,<svg height='10' width='20' xmlns='http://www.w3.org/2000/svg'><polygon fill='red' stroke-width='0' points='0,10 20,10 10,0' /></svg>") no-repeat left center; width: 20px; height: 10px; }
      - ygra 13y ago
        I'm more comfortable with the path syntax, and polygons are pretty much the same as a path, except that you would prepend M and append z to the list of points (for certain buggy renderers it might be necessary to put an L inside, too). Paths have handy shorthands for horizontal, vertical and relative movement, though.
        lambda 13y ago
        If you're more comfortable with it, that's great. To someone who's not already comfortable with it, points="0,10 20,10 10,0" is a lot more obvious than d='M0,20h20L10,0'
    - ygra 13y ago
      If you're still within HTML, is <img src='triangle.svg'> really that much harder than <div class='triangle'></div>?
deleted 13y ago
[deleted]

jabo 13y ago

The reason this is clever is because CSS wasn't intended to be used to draw shapes. You would use HTML5's canvas element to do that. Instead this shows how you can hack a simple border property to make a DOM element look like a triangle.

ygra 13y ago
Actually I'd use SVG for that, it's even trivial to write: <svg width='20' height='10'> <path fill='#D94948' d='M0,20h20L10,0'/> </svg> Should be supported pretty much everywhere canvas is, but without the need of scripting to actually get a triangle.
- Sharlin 13y ago
  But that's hardly reusable. You'll have to copypaste the (completely nonobvious) markup everywhere you want a triangle. Although it might be possible to use the CSS :before pseudo-element...
  - mbq 13y ago
    SVG has `symbol` and `use` for reusing stuff: http://www.w3.org/TR/SVG/struct.html#SymbolElement http://www.w3.org/TR/SVG/struct.html#SymbolElement
    - matthuggins 13y ago
      I can't stand the w3 docs sometimes. After reading that section about `symbol`, I still have no clue what it is or how to use it.
      - ygra 13y ago
        What exactly don't you understand? I find the W3C specs fairly well-written, actually. You declare a symbol in the defs section of an SVG image and you can instantiate it with use. E.g. <svg> <defs> <symbol id='foo'> <circle r='5' cx='10' cy='3'/> </symbol> </defs> <use xlink:href='#foo' x='2' y='5'/> <use xlink:href='#foo' x='10' y='10' fill='red' stroke='blue'/> </svg> (does not actually work, because namespaces are missing and the symbol likely is missing things like a viewbox, but just to get the general idea across)
  - lambda 13y ago
    More obvious if you use a polygon rather than a path object: <svg height=10 width=20> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> </svg> And you can put it in your CSS using a data URI: .triangle { background: url("data:image/svg+xml;charset=utf-8,<svg height='10' width='20' xmlns='http://www.w3.org/2000/svg'><polygon fill='red' stroke-width='0' points='0,10 20,10 10,0' /></svg>") no-repeat left center; width: 20px; height: 10px; }
    - ygra 13y ago
      I'm more comfortable with the path syntax, and polygons are pretty much the same as a path, except that you would prepend M and append z to the list of points (for certain buggy renderers it might be necessary to put an L inside, too). Paths have handy shorthands for horizontal, vertical and relative movement, though.
      - lambda 13y ago
        If you're more comfortable with it, that's great. To someone who's not already comfortable with it, points="0,10 20,10 10,0" is a lot more obvious than d='M0,20h20L10,0'
  - ygra 13y ago
    If you're still within HTML, is <img src='triangle.svg'> really that much harder than <div class='triangle'></div>?

deleted 13y ago

[deleted]