21 ms·
Show HN: Myth – CSS the way it was imagined
- chc 13y agoDespite its assertion to the contrary, that looks like a preprocessor to me.
- publicfig 13y agoI agree, I'm not sure what postprocessor would even mean in this context.
- kcorbitt 13y agoI think they chose "post-process" based on the following feature: Taking plain CSS as an input also means you can use Myth to post-process anyone else's CSS, adding the browser support you need, without having to re-write their code in a completely different syntax. What distinguishes it from LESS or SASS or whatever is that the input has to be valid CSS, as well as the output. Their claim is that it makes your CSS act now like it will in the future once the version of the spec they're targeting has been fully adopted.
- lstamour 13y agoOr maybe they were thinking visual post-processing: http://en.wikipedia.org/wiki/Video_post-processing http://en.wikipedia.org/wiki/Video_post-processing
- stormcrowsx 13y agoTo me they chose the wrong word, they are still preprocessing because current css engines don't accept future css. Therefore it must be preprocessed by Myth before its usable in the browser.
- ricardobeat 13y agoLESS, SASS and rework/stylus are all supersets of CSS, so they can too "post-process" anyone else's CSS.
- amitu 13y agoThat would be a noop with LESS/SASS unless the input CSS was not a "valid" CSS. This project will "enhance" "normal" CSS to take care of polyfill, which alone is a win. Take any CSS file you got, and it suddenly has all browser prefixes thanks to this tool. This is something LESS/SASS can not do.
- ricardobeat 13y agoStyl(us) can. My point is that calling it a 'post-processor' is a misnomer.
- darth_aardvark 13y agoI think the idea is that, instead of writing x other style language (SASS, LESS, etc.) that is turned into css, you write css that turns into different css. This means you can use other SASS/LESS/etc... and myth together.
- ollysb 13y agoPreprocessor: non css => css (e.g. less, sass) Postprocessor: css => better css (e.g. myth, ?)
- CatMtKing 13y agoI think you mostly hit the mark, although wouldn't it be: future css => compatible css ?
- deleted 13y ago[deleted]
- XaspR8d 13y agoThe reading I think they are going for is that preprocessors generate CSS from something else, while this uses (the platonic ideal of "true") CSS and generates the shambled code that the browser needs. But I could be way off.
- metaphorm 13y agohad the same thought. when I saw "post-processor" I was expecting this to be some kind of browser extension or plugin that post-processes (on the client side) CSS received over the network. it seems that they have basically just done a pre-processor that accepts css as input and returns css as output. its exactly like every other css pre-processor except that its DSL for pre-processing is a subset of CSS rather than a superset.
- uses 13y agoFrom that perspective, less.js is kind of a post processor.
- prezjordan 13y agoWow what a great idea. Nicely executed, love the demo page.
- codegeek 13y agoOops. Landing page font is almost unreadable in Chrome Version 30.0.1599.101 (Windows XP)
- uno7 13y agoLooks great in FF windows 7
- Ygg2 13y agoLooks the same in FF as in Chrome (missing parts).
- pistle 13y ago"Who dragged a pencil eraser down my screen???!!! Oh... WTF?"
- RALaBarge 13y agoI came here to report the same thing. http://i.imgur.com/Htq6JIK.png http://i.imgur.com/Htq6JIK.png
- martin-adams 13y agoYup Chrome not so good, Firefox seems fine.
- BadassFractal 13y agoIs that the infamous issue that requires you to reorder font type imports in your CSS? I've seen this many times on Win7 in Chrome.
- edwardy20 13y agoChrome works for me. (Version 31.0.1650.63 on Ubuntu 13.10)
- dangrossman 13y agoIt's only an issue on Windows because Chrome uses GDI to render text there, instead of DirectWrite like Firefox/IE use.
- lstamour 13y agoLong-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
- xauronx 13y agoI'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 13y agoThere's nothing to learn. Even if you use nothing more than nesting it's a huge boon to productivity and readability.
- xauronx 13y agoWell, I don't know how to do nesting right now so there WOULD be something to learn :D Maybe it was that a clear winner never arose between LESS and SASS or maybe that I always let things play out a bit before jumping onto a trendy technology. I guess I'll have to just get with it since it's not really going away.
- sergiotapia 13y agoIt's literally: .header { background-color: orange; p { font-size: 16px; } } You nest the selectors and it spits out .header{} and .header p {}. Much cleaner to write and maintain.
- xauronx 13y agoWell, now I learned something. Also, that's pretty awesome. I could definitely use that.
- dreamfactory 13y agoIt's replacing a declarative syntax with a procedural one as far as I understand which is a huge (and unwelcome) shift.
- 13y ago
- iLoch 13y agoMan 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 13y agoAgreed. 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.
- jonesetc 13y agoI honestly can't tell if your guys are being serious. Click to enter was absurd because they were page loads just for the sake of page loads. Scrolling down is just spacing out your content to get a visual feel. This one in particular is giving a short explanation to let you decide if you want to scroll down first. There's no cost here, just the courtesy of not overwhelming anyone who isn't actually interested in the details.
- iLoch 13y agoI don't have a problem with the concept if the fact that I have to scroll is obvious. I opened that page, read the title and "What am I doing here again?" I'm on a Mac so there's no scrollbars. Do you just want me to guess that there's something down there? The least you can do is hint at the content below.
- oneeyedpigeon 13y agoI'm on a Mac and I have scrollbars. Do you prefer to not have scrollbars, most of the time, or are you unaware that you can enable them?
- userbinator 13y ago> I'm on a Mac so there's no scrollbars. There's your problem.
- crazygringo 13y ago> 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.
- darth_aardvark 13y agoIt's not supposed to replace LESS/SASS, it's a supplement. That's why it's a postprocessor, not a preprocessor.
- masklinn 13y agoConsidering what it does duplicates a small part of what less and sass do, why would you use it?
- anthonyshort 13y agoI used to be a big supporter of Sass, but now I prefer the simplicity of CSS. Look at almost any Sass project and it's usually overly complicated. I stopped writing Sass a few months ago and I haven't felt crippled at all. The complexity of Sass/Less is starting to out-weigh the benefit of their features, for me at least.
- GeneralMayhem 13y agoThat's on the individual project maintainer, though. Any valid CSS3 file is also a valid SCSS file, so you can add enhancements on top of that exactly as much as you want to.
- ajanuary 13y agovar works differently in CSS than preprocessors, and in such a way that you can't combine them with preprocessed calc etc. statements. Having said that, I don't know if this polyfills the var spec exactly.
- eknkc 13y agoIt's basically a rework (https://github.com/visionmedia/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.
- ozh 13y agolots of readability issues on this page. Purple tiny text on black background != easy to read.
- ultimatedelman 13y agothis is cool, but the problem i have with the variables is that it's based on a suggestion of a spec that mozilla hasn't even finalized... if it changes in the future, this could break
- kumarski 13y agoA little tough to read the text.looks cool.
- Kiro 13y agoWhat's up with the font? It looks like a disaster on Chrome @ Windows.
- mscottmcbee 13y agoIt 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.
- dangrossman 13y agoThey're running Macs or Linux and never see the garbage when they're designing their sites. The poor rendering only occurs when you use GDI to render the text which is only used by Chrome on Windows (and Firefox in Windows XP, but not Vista/7/8).
- dangrossman 13y agoAll 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.
- sergiotapia 13y agoLink to the bug?
- theandrewbailey 13y agohttp://code.google.com/p/chromium/issues/detail?id=137692 http://code.google.com/p/chromium/issues/detail?id=137692
- omegote 13y ago
- pc86 13y agoTiny text is unreadable on Windows Chrome.
- oneeyedpigeon 13y agoInteresting. Shouldn't the 2nd "a" in the right column under "Color Manipulation" be an "a:hover"?
- ianstormtaylor 13y agoWhy yes, yes it should :) fixing now.
- nawitus 13y agoCan Myth postprocess LESS output and guarantee that it'll "just work"? I like the vendor prefix feature (although there's a 'LESS Prefixer' project too).
- andreypopp 13y agoMyth uses autoprefixer[1] so you can use it directly if you don't need other features. It "just works". [1]: https://github.com/ai/autoprefixer https://github.com/ai/autoprefixer
- peferron 13y agoIs there anything wrong with LESS + Autoprefixer? I'm using Sass + Autoprefixer on a project currently and it works just fine.
- nawitus 13y agoYes, I didn't know about it :). I'll probably go with autoprefixer, but with Myth I could also use some of the other features and perhaps aim for a slow transition from LESS to CSS over the coming years.
- ianstormtaylor 13y agoTotally, that's the idea :) — and yeah you should absolutely be able to post-process LESS output and have everything work fine.
- coderzach 13y agoThis 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.
- Pxtl 13y ago"Myth - CSS the way it was imagined " I totally read that completely differently. Complete document/style separation is a myth.
- badman_ting 13y agoVery 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.
- jackmoore 13y agoYou 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 13y agoYes. This should be the top-voted comment, IMHO. Myth is fairly misleading!
- abvdasker 13y agoDefinitely 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.
- transfire 13y agoI 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!
- jsmeaton 13y agoSo, in your world, we'd all have to compile our stylesheets? I don't like that idea at all.
- jrochkind1 13y agoNo. The reason sass or less require compiling is to support features that aren't actually a part of the CSS standard, so they need to be compiled down to things that are a part of the css standard. In his world, the best of those features would be part of the CSS standard and supported by browsers, so you could just give them right to browsers without compiling anything.
- jsmeaton 13y agoWell I'm glad I phrased it as a question then :)
- ianstormtaylor 13y agoThat'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.
- deleted 13y ago
- fiatjaf 13y agoI imagine a CSS where the outer divs submit to the inners (but only when I want to).
- JimDabell 13y agoThis 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.
- dgreensp 13y agoAha, yes. This is pretty damning.
- habosa 13y agoSIde note but I have never seen "Star on GitHub" before ... does that mean contributions are not welcome?
- jongleberry 13y agothis module doesn't need help. if you want to help, you should contribute to the plugins that it depends on: https://github.com/visionmedia/rework/wiki/Plugins-and-Utilities https://github.com/visionmedia/rework/wiki/Plugins-and-Utili...
- ianstormtaylor 13y agoNah, I just personally think the "Fork on GitHub" line is wrong because I'm very rarely trying to go from a tool's site directly to the "fork" action. Instead I think something like "Source on GitHub" or "View on GitHub" is more appropriate. And since I just launched it, in this case I thought "Star on GitHub" could work. I don't mind too much really, just anything but forking :)
- habosa 13y agoAh ok, that makes sense. I think "View the code on Github" is the best way to say it. Star on Github reminded me of those people who bug you for reviews on the app store, which only helps you and not them. View the code is a two-way trade.
- philliphaydon 13y agoWhy do front-end developers not test their website cross-browser and platform? The font chosen doesn't render properly on Windows with Opera or Chrome.
- winterswift 13y agoCan confirm, the text renders miserably on Chrome in Windows 8. Somewhat ironic considering the product being advertised. For anyone wondering, here's what it looks like: http://imgur.com/XbZJpC6.png http://imgur.com/XbZJpC6.png
- djokkataja 13y agoThe 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.
- pvnick 13y agoWow. 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
- EasierLikeThis 13y agoI 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.
- __--__ 13y agoYou know those meetings where three or four guys go back and forth trying to prove who's the smartest guy in the room? HN is that on a larger scale. I can't help but think this tendency of ours can't be hacked into something more productive, but I have no solution as of yet. :)
- dinkumthinkum 13y agoI don't think it's that really. It is hipster to snark and dislike things and hipster is in apparently. That being said, some things should be disliked, this not being one of them.
- _pmf_ 13y ago> 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.
- crystaln 13y ago"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.