10 ms·
CSS: It was twenty years ago today
- LeoPanthera 12y agoGreat story. I have yet to think of a valid reason why "box-sizing: border-box" should not be the default. It goes into every CSS document I've ever written.
- yuhong 12y agoIn fact: https://hsivonen.fi/almost-precedent https://hsivonen.fi/almost-precedent
- bbx 12y agoOne thing I can think of is when you want your inner content to be a specific width while adjusting the padding and borders to fit the layout.
- freshyill 12y agoThen you probably haven't been writing CSS for very long. Its support is quite recent. border-box is a much smarter default, but they'd break a lot of old sites by changing the default behavior.
- LeoPanthera 12y agoCorrect, only a year or two.
- freshyill 12y agoIt's funny—back in the day when IE 6's box-model did it more like this (it was really margin-box, which still doesn't exist and probably never will), I used to say that IE's model, while incorrect was superior. And people would disagree with me vehemently. Now, people swear by border-box, which is much more like the old incorrect IE box-model (for good reasons). But it's funny how anti-IE sentiment overruled common sense.
- bphogan 12y agoIn old IE it was the default. If you didn't use a proper doctype it would behave that way. It's fun how history repeats.
- yuhong 12y agoNotice the proposal date back to when Mosaic Netscape 0.9 was released!
- gprasanth 12y agoThe CTO's setup: http://hakon.wium.lie.usesthis.com http://hakon.wium.lie.usesthis.com
- Kartificial 12y ago"What’s your opinion on pre-processors like SASS and LESS? Does CSS have anything to learn from them? (...) My own favorites would be nested comments, and single-line comments (starting with //). When CSS turns 50 I’ll tell you why they were not part of CSS from the beginning." Now, this makes me really wonder why single-line comments weren't part of the spec from the beginning. And I can't wait 30 years... Anyone an idea?
- ggurgone 12y agosingle-line comments are already supported in the way that are invalid css :) so if you comment with // the stuff that follow will be ignored. Again, it is invalid CSS and I am not suggesting that you should use it, just bringing that up :) I personally like how single-comments works on pre-processors. They are ignored at compile time and therefore are a good way to comment on functions, mixins or anything that won't be compiled to raw CSS.
- phoboslab 12y agoBe careful with using // in CSS. It causes some browsers to completely ignore the whole rest of the CSS file after the line you wanted to comment out (iirc IE9 does this). When I want to quickly comment something out (and don't have an editor shortcut handy), I just put an 'x' in front of the property name. I.e.: xbackground-color: #f0f;
- ggurgone 12y agoYeah, well anything invalid :)
- deleted 12y ago[deleted]
- Raphael 12y ago/* single-line comment */
- Mithaldu 12y agoAh yes, the beginnings of Opera, when they had a management that was interested in great technology; before it was exchanged for a management interested in profits.
- davidw 12y agoPerhaps the alternate universe ending is "before it went bankrupt".
- Mithaldu 12y agoNah, you can look at their financial reports that Opera 12 was still providing good profits on the desktop WHILE they were working on making Chromera 15: http://www.operasoftware.com/company/investors/finance http://www.operasoftware.com/company/investors/finance Once they were able to fire most of their dev staff though they made more money with the Chrome clone.
- Sharlin 12y agoVery interesting to learn that what we now call "responsive layouting" was already proposed in the original document. Of course, at the time the proposal was written the original "the user agent has the final say of rendering decisions" philosophy was still going strong, before the years of rigid pixel-size-everything, "requires 1024x768 or more" mentality borrowed from the print world. Also, I'm glad that the percentage-based weighted-average influence system did not make it into actual CSS :)
- exodust 12y agoI don't think rigid pixel-size-everything was a "mentality", so much as a way around the lack of min and max-width we didn't have until CSS2. 100% width websites looked bad. Rigid made sense. Economical to make and most of your visitors were 800 x 600 and above for many years. Fixed width sites still look and function well on tablets in many cases. Absolute positioning rocks! I like it's predictability. Funny that he said he doesn't like conditional comments! "Bad for web standards". Agreed.
- dsego 12y agoHe's happy with CSS? I'm gonna shoot myself.
- broodbucket 12y agoRegardless of whether you like the technology or not, it's used in virtually every modern computing platform. I'd feel pretty damn good about creating something like that.
- rplnt 12y agoThe guy who created comic sans doesn't agree :)
- cousin_it 12y ago> In my initial CSS implementation in 1995 I used the “SkyBlue” constraint solver to resolve conflicting style sheet statements. (By the way, “SkyBlue” and “Cassowary” were both developed at the University of Washington.) Having a constraint solver allows you to express relationships between arbitrary elements and have conflicts resolved automagically. However, things can get complex when elements disappear and new ones arrive, like they do through DOM operations. Circular dependencies must also be handled gracefully. Therefore, the idea of allowing CSS to express layout constraints between any elements were dropped at an early stage. That was the biggest mistake, IMO. John Nagle's comments here [1] express that point really well: > With Dreamweaver 3 and tables, it wasn’t necessary to look at HTML to lay out a page. With Dreamweaver 8 and CSS, the page designer must understand CSS, HTML, and probably Javascript. That’s was a big step backwards. The CSS system is just too programmer-oriented. And I’m a programmer. (Programmer as in MSCS from Stanford, the Nagle algorithm in TCP, inventor of ragdoll technology, real-time robot vehicle control, not programmer as in “writes some Perl”. And my first web site went up in 1995.) It’s not that CSS is hard; it’s that CSS is bad. > The worst problem with DIV-based layout is that the layout system is too weak. There’s no form of “grid” layout. There’s no way to relate a DIV to anything but its predecessor, its parent, or an absolute position. The system is just too dumb. That’s why people have to stand on their head just to get three columns to work. Tables actually are a better designed layout system. Table layouts allow table cells which span multiple rows and columns. If all tables could do were simple grids of cells, the CSS approach might make sense, but tables are more general than that. [1] http://www.raizlabs.com/graiz/2006/09/25/ten-reasons-why-css-sucks/ http://www.raizlabs.com/graiz/2006/09/25/ten-reasons-why-css...
- agumonkey 12y agoInteresting, since table based layout gave such ugly html sources. CSS might be incomplete, and too programmer oriented, but it has some value (it abstracts halfway).
- Swizec 12y ago<div class="container"> <div class="row"> <div class="col-xs-4"> What do you mean tables produced ugly html? </div> <div class="col-xs-3"> Looks totes modern to me ... </div> </div> </div>
- lmm 12y agoI think CSS has become the thing it was supposed to prevent. A modern web page is impossible to render as anything other than a web page; you can't separate the styling from the content, and if anything the complexity of CSS makes doing so harder than in the days of font tags and tables. Users were supposed to be able to override the styles of their pages, but have you ever tried to do that lately? (e.g. I wish I could make all the fixed-width pages on the web full-width). When CSS is being generated by programs, you might as well have those programs generate inline styles - what would we lose? And we would gain in simplicity.
- jgalt212 12y agoInline style would definitely be a bandwidth hog, that's for sure. As to how much extra bandwidth it would take up and would that make a noticeable difference given that most bandwidth is used for images and video is up for debate.
- lmm 12y agoI think we'd regain any bandwidth cost through compression. Compare the rise of VNC (and VNC-like protocols) compared to X - it turns out there's no advantage to sending drawing commands rather than sending bitmaps, because they both compress to the same thing.
- al2o3cr 12y agoAutomatic inlining is used in some contexts, notably emails where everything else works barely-if-at-all. The biggest loss of using inline styles everywhere would be for instances where the appearance of the DOM is changing dynamically. Instead of just saying "hey, make that node have the class 'shinyWidget'", you'd wind up needing to specify all the styles that shinyWidget includes - and then reliably un-apply them when the node was no longer shiny. Bonus fun if two things want to change the style of a single element, though that's still sometimes a headache with CSS and specificity rules.
- e12e 12y agoI always felt CSS solved the wrong problem. It's too low level -- and it doesn't really help separate content from elements as much as it should. It feels like the designers looked at what people were already doing with tables (forcing old, DTP-style layout on web pages, ignoring the ability of user-agents to prefer how content should be presented) -- and tried to separate that layout out from the mark-up. So you ended up with two types of mark-up, just as with tables, semantic mark-up (h1, p, em, img, a/href, li) and "layout mark-up" (span, div). To a certain extent CSS was successful in making table-markup semantic again. But pages are still evolving away from being easy to parse for content, just as they were with table-based mark-up. I still think Adobe's proposal: http://www.w3.org/TR/css3-regions/ http://www.w3.org/TR/css3-regions/ is a much better way to solve the problem how "how can we let publisher dictate how the pages should look, users be damned, but still keep the html-markup simple and semantic" -- than the traditional CSS model. All that said, sites like the legendary CSS Zen garden, does illustrate that CSS is a powerful tool, and offers quite a few improvements over plain old html+tables: http://www.csszengarden.com/ http://www.csszengarden.com/ Still wish they'd gone with something that was more informed by Desktop Publishing Software (along with some proper support for breaking up words, a la: https://code.google.com/p/hyphenator/ https://code.google.com/p/hyphenator/ ).
- minikomi 12y agoWho else is having a "bad css day"? Just spent a few hours nailing down font rendering differences across Internet Explorer versions. Ended up using a combination of conditional statements & weird ms-specific media queries. CSS. Fun for the whole family.
- matthewmacleod 12y agoIs that really a CSS issue?
- talmand 12y agoI would say it is not.
- Alex3917 12y agoIf you haven't seen it, it's worth checking out his PrinceXML browser. It's basically an entire web browser that implements many of the CSS working drafts way before any of the mainstream browsers. It's designed for turning html/css into professional quality PDFs, so it implements a lot of the very early print media related working drafts, e.g. the one for running headers and footers, and the one for generating a table of contents automatically from page numbers. Turning analytics data into PDF reports is something pretty much every big company asks for at some point, and if you're willing to spend the time learning all the w3c specs then it's actually pretty viable.
- trumbitta2 12y agoSgt. Pepper taught the band to play... Downvote me, I couldn't help it.
- garethadams 12y agoMaybe you could read at least the first paragraph of the linked article.
- trumbitta2 12y agoMaybe I love The Beatles and can't help completing that immortal verse. Only THEN, I will read what it's there to be read by one of my myths: Bruce Lawson.
- Raphmedia 12y agoIs it's birthday really today? I had heard December 17, 1996 which is 17 years ago... ?
- grokys 12y ago> I believe that the CSS code we write today will be readable by computers 500 years from now. Well, good luck with that one! I wonder if he seriously believe computers in 500 years time will actually resemble our computers in any way? Or was it a throwaway comment? I hope for the sake of his sanity it's the latter!
- serf 12y agoyeah, that comment made me roll my eyes, too.
- pjc50 12y agoReadable, maybe. Interpretable to produce correct results? We can't even manage that in the present.
- Touche 12y agoNot sure what you mean. Are you suggesting everything produced today will simply be thrown away? There will be much better computers 500 years from now, but people will still want to see content created in the early days of computers (if only to giggle).
- VeejayRampay 12y agoMy exact thoughts on CSS are best summed up by this legendary item : http://craphound.com/images/css_is_awesome.jpg http://craphound.com/images/css_is_awesome.jpg
- CmonDev 12y agoIt's a legacy language now. Time to let go.
- cookiecaper 12y agoWhat has replaced it?
- crimsonalucard 12y agoNothing, unfortunately. I guess he means it's been around to long and it's based on flawed design principles.
- CmonDev 12y agoYes, I hate the ceremony. Oh the sacred ancient language that is so standard we can never touch it because Open Web!
- lsdafjklsd 12y agoCSS is problematic in every project I've been on. It takes a lot of effort to stay disciplined and not just throw stuff in a class namespace that shouldn't be there. This article [1] by Nicholas Gallagher sums up how I feel after trying my damnedest to write maintainable CSS in my applications. I'm now using the Suit CSS [2] preprocessor to enforce strict guidelines to our app's CSS. It's working well so far. [1] http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ http://nicolasgallagher.com/about-html-semantics-front-end-a... [2] http://suitcss.github.io/ http://suitcss.github.io/
- talmand 12y agoYour first paragraph suggests the problem lies within your team and not CSS. I'm sure that's not your intention but that's the way it reads.
- lsdafjklsd 12y agoYea, definitely didn't mean to sound like that. Edited my original post.
- danielweber 12y agoI remember printing up the CSS rules, studying them instead of paying attention in class, and then implementing them on my website... ...only to have all the CSS in the <head> get rendered by the popular browsers of the time, and friends tell me that my webpage was broken and that if employers saw I couldn't even make a website I'd never get hired. Fun times.
- nanoscopic 12y agoI was looking for the following points when reading through this interview: 1. A mention of the box sizing model ( which is imo the core of CSS ) 2. Following that, a mention of the double margin IE bug. Nope; but there was vague mention of browser differing in spacing. 3. Mention of the fact that nothing can be changed because browser vendors don't get along and refuse to change stuff in any meaningful time-frame regardless of the specs. Wasn't disappointed. 4. Mention of SASS/LESS. It's there. 5. A statement along the lines of "CSS is obviously wonderful because it's still around. It will be around forever." Got it. 6. Mention of the need for a way to do paging properly. Yay. Pleasantly surprised by: 1. Mention of the Acid tests. 2. Mention that single line comments are desirable. Why still not there??? Unhappy with: Hatred for IE conditional comments, web fonts, and the video tag. ( but confused since he advocated for both web fonts and the video tag?? ) All in all an interesting read.
- jcampbell1 12y ago> Unhappy with: Hatred for IE conditional comments, web fonts, and the video tag. ( but confused since he advocated for both web fonts and the video tag?? ) The question was "what would you banish? what would you add?" His response was like: Banish: Conditional Comments Add (past): web-fonts, video tag Add (future): Pagination. I was confused as well, and had to read it like 4 times until it made sense.
- hrish2006 12y agoI've never met anyone who likes CSS. Sure, I write it, the people I meet write it and it's unavoidable but it's little more than a necessary evil, as nothing else works on the web.
- digitalcreate 12y agoIt's 2014 and browsers are only now starting to add native support for CSS variables. CSS would be so much easier and cleaner if it supported conditional logic (for layouts) and more powerful variables.
- talmand 12y agoSomewhat interesting but not very thought provoking. But some of the history of how it came about was nice. After all, he didn't even answer the question about using a magic wand to banish features of CSS. The first two paragraphs are browser features and the third paragraph speaks of adding features. Which brings up an interesting point to me, even the creator of CSS provides non-CSS complaints when asked what's wrong with CSS. A great deal of the dislike and hate towards CSS seems to be so misplaced. But I even do the same thing. When asked what I think is wrong with CSS my response is all the designers out there that continue to insist on designing web pages as if they were print designs for a magazine.
- bibonix 12y agoCSS seems to be one of the worst designs in IT industry, isn't it? See http://www.zazzle.co.uk/css+is+awesome+mugs http://www.zazzle.co.uk/css+is+awesome+mugs
- jcampbell1 12y agoAs far as I can tell there are three opinions on CSS: 1) CSS is a single-pass layout programming language. It is impressive, but the single-pass constraint makes certain layouts very difficult to achieve. 2) CSS should be replaced with a constraint solver. Look how powerful Auto-Layout in iOS is. With a constraint solver, you are only limited by your imagination and intelligence, not some single-pass rule. 3) CSS sucks because people think visually in terms of grids and boxes, and it is too hard to do even the simplest thing with a single pass layout language. I am personally in Camps 1 & 2, but Camp 3 is by far the most vocal. Constraint solvers are powerful, but they require a huge amount of thinking, and you end up with stuff like '==|50[x(30)]<=|==' as the interface. I think the "flexbox" stuff is pretty good as it is an attempt to accommodate both groups 2 & 3.
- unknownBits 12y agoCSS is pretty embarrassing if you ask me. Maybe it was suitable for simple and small document styling for total noobs, ok, but as a standard for web development it's rediculous and sucks all the way... And the worse part? They are still adding to it instead of giving up and leaving it as it is. We desperately need a better standard, more in the direction of QML, so you can also talk with a lower level language. If you come from a systems programming language and you want to design a UI with CSS, well, good luck! It will suck all the joy out of your work. Center some text or a div? well buckle up for some fine days of f@*$ing around with position: relative; or position: absolute; margin: 0 auto; text-align: center; ? It all depends on the situation, and if one thing changes, your whole design is gone.. ..it's pathetic.
- webnrrd2k 12y agoI think they should have cloned HTML tables and called it <layout> or something. It's certainly not perfect, but it would have been an easy way to solve a lot of problems. I know it violates the strict separation of style and content, but how well has that actually worked out? (This is me just being cranky -- I've done a bunch of typesetting resume's and such when I was younger -- so having tabs work like they used to on old typewriters, where you set them to a defined distance from the left, would have solved a bunch of problems, too.)