WingNews logo WingNews GitHub [2]
top | item 6923141

Show HN: Myth – CSS the way it was imagined

357 points| ianstormtaylor | 12 years ago |myth.io | reply

152 comments

order
[+] pvnick|12 years ago|reply
Wow. I'm shocked at the disgusting responses I'm reading here. No wonder people get terrible anxiety about releasing their hard work for feedback. Hacker News seems to be a den of vipers, waiting to strike at the tiniest opportunity to nitpick. And then folks have the gall to bicker and argue over whether the project even has fundamental merit, on the very thread that the author tries to show the "community" what he/she has made. I've been working on a project myself, something I'm passionate about and looking forward to my own "Show HN" thread, but this trend of negativity really makes me hesitate.

I think this is a really cool project, and I commend ianstormtaylor for pushing the envelope and advancing the state of the web. Good job!

edit: I understand criticism has its place in Show HN. But for God's sake, I had to scroll _all the way to the bottom_ to find some kind words of encouragement. You folks should really read some Dale Carnegie

[+] davedx|12 years ago|reply
Yeah, I find it very disappointing, and it's not just on Show HN threads either. The community here is still pretty intelligent, but I feel like it's become almost unbearably negative in the past year or so. I know people always say things like that about communities, but I really feel it on HN. Not so on Reddit, where people can still be positive and happy (small and large subreddits).

There is a place for criticism, even non-constructive. But HN sometimes is an echo chamber of only criticism and negativity.

[+] _pmf_|12 years ago|reply
> Hacker News seems to be a den of vipers, waiting to strike at the tiniest opportunity to nitpick.

When presented with a sensible, practical and actually innovative idea, I've found the responses to be fairly favorable. With small things that have been done over and over again (worse or better), I think you can expect some comparisons and questions.

[+] EasierLikeThis|12 years ago|reply
I can't decide if people are overly competitive and frightened with the increase in the developer population, or if we're just bitter and cynical towards anything we can't put our name on.
[+] hderms|12 years ago|reply
Why do programmers, in particular, seem to lose respect for others so quickly? Is it that ours is such a technical field that people often value 'straight-talking' at the expense of politeness (see: Linus)? Is it that software is so difficult to do properly that almost everyone becomes embittered on some level? It's such a weird phenomena when you have things like open source which are fundamentally positive, cooperative forces in spirit. The same class of people who want to give their work away for free are the same people who bitterly attack others for doing that very thing.
[+] dinkumthinkum|12 years ago|reply
I know it's really not good. I actually find this project interesting. I think the fundamental idea has a lot of merit, the individual details can be worked on.
[+] JimDabell|12 years ago|reply
This only polyfills some of these features in the most superficial way. To polyfill some of these features according to spec., you need to do it in the browser.

For example:

    <!DOCTYPE html>
    <title>CSS Variable Test</title>
    <style>

        head {
            display: block;
            var-mycolor: blue;
        }

        :root {
            var-mycolor: red;
        }

        title {
            display: block;
            color: var(mycolor);
        }

    </style>
If I load that document in a browser that supports CSS variables, the title will be blue. But if I run it through Myth, it drops the blue rule and makes the title red. This is because CSS variables are inherited throughout the document and can be overridden at any time. The calculated value of the CSS property that uses the variable depends on the document structure.

Likewise with calc() - if you multiply values like in their example, it works, but if you try to add two values of different units (e.g. 2em + 30%), it silently falls back to requiring browser support for calc().

This might be useful in narrow circumstances, but it should have big warning signs because it doesn't come close to being a proper polyfill.

[+] crazygringo|12 years ago|reply
> Myth lets you write pure CSS while still giving you the benefits of tools like LESS and Sass.

Having a "polyfill" is certainly a valid justification. But this doesn't come close to LESS/Sass -- I'd argue that the main feature of those is nested rules, and then mixins.

Variables and calculations are great, but most LESS code I've encountered uses nesting and mixins to a far greater extent. Advertising the project as "the benefits of tools like LESS and Sass" seems misleading, and seems to set up expectations that Myth doesn't fulfill.

[+] xauronx|12 years ago|reply
I've avoided the CSS preprocessors for some reason, something about learning a CSS pseudo-language just didn't feel right. The idea behind this however is awesome. You're writing simple, true CSS and it does the annoying work of making it crappy CSS that browsers want. I might actually be able to get behind this.
[+] marknutter|12 years ago|reply
There's nothing to learn. Even if you use nothing more than nesting it's a huge boon to productivity and readability.
[+] dabernathy89|12 years ago|reply
I avoided preprocessors for a while too, but I can't imagine not using SASS now. Even if all it had to offer was nesting it would be worth it, but with variables and mixins it really shines.
[+] zem|12 years ago|reply
there's nothing about "true css" that makes it intrinsically superior to the "pseudo-languages" that have to be preprocessed to generate css. the spec merely determines the features browsers have to support, not the manner in which people have to use them.
[+] valtron|12 years ago|reply
You can also write colors with the more intuitive hsl() and it'll convert them to hex notation.

(Only relevant if you need to support IE < 9, but still cool.)

[+] stormcrowsx|12 years ago|reply
You've been missing out avoiding CSS preprocessors, they're fun.
[+] jackmoore|12 years ago|reply
You all should be aware that it is impossible for CSS preprocessors/postprocessor to fully replicate calc() and var(). For example, you won't be able to do something like calc(100% - 200px) or have scoped variables.
[+] alanh|12 years ago|reply
Yes. This should be the top-voted comment, IMHO. Myth is fairly misleading!
[+] codegeek|12 years ago|reply
Oops. Landing page font is almost unreadable in Chrome Version 30.0.1599.101 (Windows XP)
[+] franksmule|12 years ago|reply
Me too Chrome Version 32.0.1700.41 m Aura Win8 - Hard to read fonts
[+] jahewson|12 years ago|reply
The solution to this problem is to serve your web fonts as SVG to Chrome on Windows, or hint your web font with ttfautohint.
[+] pistle|12 years ago|reply
"Who dragged a pencil eraser down my screen???!!! Oh... WTF?"
[+] eknkc|12 years ago|reply
It's basically a rework (https://github.com/visionmedia/rework) distribution with a couple of plugins bult in.

I you need finer grained control, take a look at rework itself. We have been using it for a while and it's just great.

[+] chc|12 years ago|reply
Despite its assertion to the contrary, that looks like a preprocessor to me.
[+] badman_ting|12 years ago|reply
Very cool, but once you start working in something like LESS or Sass, it totally changes how you write styling and becomes something more than "CSS with variables". The possibilities they offer are more than features, it changes your entire workflow. Personally, I won't go back.

But besides all that, it's pretty sweet to have something more like "CSS with variables". That can come in super-handy sometimes.

[+] djokkataja|12 years ago|reply
The site looks gorgeous and is perfectly readable in Firefox 25 on Ubuntu.

Also this looks pretty neat; I wasn't super interested in learning to use Sass/LESS or working it into my development cycle, but this looks like a good step towards not having to make much of a change while still reaping some nice benefits.

[+] coderzach|12 years ago|reply
This looks pretty cool. It should probably explain that it's a static subset of the spec, and not actually a polyfill for the spec itself. Since the spec allows for dynamic, cascading variables, as well as dynamic calculations.
[+] Kiro|12 years ago|reply
What's up with the font? It looks like a disaster on Chrome @ Windows.
[+] dangrossman|12 years ago|reply
All custom fonts look like a disaster on Chrome in Windows. It's the only browser that uses GDI to render text in Windows where Firefox/IE use DirectDraw. All fonts end up being rendered very thin, and if they're thin to start with, that causes discontinuities in the glyphs. It also affects the color; the rendered color may be significantly different than the text color specified in CSS.

It's been an open bug on Chromium/Chrome for several years.

[+] mscottmcbee|12 years ago|reply
It looks like a disaster on FF as well. I don't understand why designers have been on a binge of typefaces that look like unreadable garbage.
[+] prezjordan|12 years ago|reply
Wow what a great idea. Nicely executed, love the demo page.
[+] Pxtl|12 years ago|reply
"Myth - CSS the way it was imagined "

I totally read that completely differently. Complete document/style separation is a myth.

[+] ozh|12 years ago|reply
lots of readability issues on this page. Purple tiny text on black background != easy to read.
[+] abvdasker|12 years ago|reply
Definitely going to give this a try. I really appreciate the apparent simplicity and creativity of this tool. It avoids the need to learn the odd syntax of LESS/Sass for those of us who need reliable cross-browser support while providing many (though not all) of the benefits of precompilers.

Seriously great work.

[+] lstamour|12 years ago|reply
Long-term I'm not sure how well this will work.

After all, SCSS was based on "CSS3" so we wouldn't have to rewrite our CSS. It's still around ... so we don't have to rewrite our SCSS.

I'm happy to see innovation here, but I also wish IE would just auto-update already. :D

[+] iLoch|12 years ago|reply
Man I really hate when the creator of the site expects me to scroll down. I have a 1080p monitor, if I can't see any content at that height I have to assume there isn't any.
[+] ldh|12 years ago|reply
Agreed. It seems to be a design trend that's on the upswing lately, and it's frustrating. I encountered a mobile site yesterday that did that... to me it's the equivalent of the "click to enter" home page of bygone days. Uh, no thanks.
[+] teddyknox|12 years ago|reply
I kind of like it. It looks nice, and the the low info density makes reading (relatively) dense subject matter easier. With this design trend you'll probably start assuming that there is room to scroll when there's only a title on the screen.
[+] dnm|12 years ago|reply
I had no idea that was even an option until I read your comment. Chrome on OS X shows the v-scroll bar for less than a second, and I missed it. After that, the only way they come back is to scroll. There was no visual indication that it was anything more than a title page with no links (aside from the github link).
[+] transfire|12 years ago|reply
I wish there were a revolt against W3C. They have consistently made a mess of everything they touch (and take forever to do it). Why reinvent the wheel yet again with another fuglier syntax? We already have Sass and LESS which are widely used and quite beloved. Just adopt the best of those and save us from yet another "XSL-FO". Please! For God's sake, man!
[+] ianstormtaylor|12 years ago|reply
That's a case of assuming the worst without knowing the decisions that went into the spec. The idea of using a simple `$` syntax for variables came up and was discussed but was eventually rejected. If I recall right it was rejected because they thought they might want to use it for a separate feature in the future. And they thought the function syntax better fit in with the rest of CSS (which uses functions a lot) anyways.

I know I used to think the var syntax was incredibly ugly, but I have to say after using it for a while now, you actually get used to it.

But read through the CSSWG mailing lists and you'll gain a lot more respect back for the decisions they make.

[+] jsmeaton|12 years ago|reply
So, in your world, we'd all have to compile our stylesheets? I don't like that idea at all.
[+] bct|12 years ago|reply
> Just adopt the best of those

You say that like everyone agrees on what "the best" is.

[+] crystaln|12 years ago|reply
"post-processor"? What does that mean?

Looks a lot like a pre-processor to me, except that its functionality is limited to what can be defined by pure CSS. I'm not sure why you would choose this preprocessor over one with more functionality.

Somebody must have thought it was a good idea to have gone through so much effort, so perhaps I'm missing something.