On: Are We Taking CSS Too Far?

[tptacek]

It bothers the hell out of me that many web devs have decides that all HTML and CSS should be hand-editable and comprehensible at a glance.

Obviously, it's vital that both those features be possible.

But it's not obvious to me that those features be required in all markup; on the contrary, it seems far more useful for there to be a standard, predictable strata of functionality that developers can target with compilers.

From that perspective, the ability to do pure-CSS buttons and icons is a win. It's hard for a web developer hand crafting markup to apply CSS buttons, but it's trivial for a developer using something like Sass to get a button as a oneliner.

I'd sacrifice 10,000 extra lines of line noise markup in every design if it meant I never had to open Photoshop.

[metamemetics → tptacek]

> the ability to do pure-CSS buttons and icons is a win.

CSS is not designed for assembly of vector graphics, we have SVG for that. SVG is a well defined and logical format for web vector graphics. The ideal case would be Firefox and IExplorer implement embedding SVG graphics with <img> to catch up with Opera\WebKit. Also since SVG is xml based any web app could also probably implement dynamic generation and cacheing for bizarre use cases.

[mike-cardwell → metamemetics]

I didn't realise Opera/Webkit would display SVG from an img tag! They don't execute the embedded javascript though, you need to use an object tag for that still.

[earnubs → tptacek]

I'm not entirely sure I understand your point. All of these examples were likely designed in PhotoShop (or Gimp) and then realised as PNGs, GIFs or in this case CSS. Beyond that adding a button is pretty simple regardless how you do it; however, how that button is rendered, which is the point, is certainly simpler with an image (and can be made trivial for developers with appropriate use of CSS).

[jacquesm → earnubs]

I think what tptacek is getting at is programatically describing the button which then gets created in an automated way rather than manually creating it using a graphical tool such as photoshop.

[w1ntermute → jacquesm]

Is that a practical option right now when support of legacy browsers is still a necessity?

[uxp → w1ntermute]

I think it is highly practical, since one very skilled designer and CSS programmer with enough programming skill (or a team) can create a template that many other less skilled and less experienced designers can then take and use at will. The template, while being rather complex compared to the hand-coded and "beautiful" markup that Thomas was talking about, can also have enough dumb logic in itself to degrade gracefully on legacy browsers.

[w1ntermute → uxp]

Wouldn't the degraded version depend upon the same old Photoshop approach? If so, you might as well keep using that approach until all major browsers support the necessary components of CSS3.

[uxp → w1ntermute]

I was thinking more along the lines of:

    <a href="#"><div class="mybutton">Button</div></a>

    .mybutton {
        padding: 10px 5px;
        border: 1px solid black;
        background: red;
        width: 100px;
        text-align: center;
    }

Instead of a gradient background and rounded corners, which is still trivial to write by hand.

[earnubs → jacquesm]

You still have to "manually" create it in the first place. After that you can automate it regardless of how you choose to render it.