15 ms·
25 Years of CSS
- foxfired 5y agoTo this day, every CSS I write for a website starts with a copy of the Meyerweb CSS Reset. I've been doing it for so many years yet never thought twice about it. Only a couple months ago I decided to check what Mr Meyer was up to. I bought his book Design for Real life thinking it was about CSS. I was delightedly surprised by the breadth of new things I learned about design that I had never considered before.
- goto11 5y ago> It didn’t matter if I was using the market-dominating behemoth that was Netscape Navigator or the scrappy, fringe-niche new kid Internet Explorer: very little seemed to line up with the specification, and almost nothing worked consistently across the browsers. Well I remember a significant difference in the early years of CSS. Netscape Navigator would frequently crash when encountering perfectly valid CSS while IE at worst would render it weirdly. Netscapes habit of crashing probably set back CSS adoption for several years, since you couldn't even introduce CSS as an optional enhancement. I know a whole generation of designers loathe IE, but this is noting compared to the hate designers felt towards Netscape in the early years!
- hulitu 5y ago> Well I remember a significant difference in the early years of CSS. Netscape Navigator would frequently crash when encountering perfectly valid CSS while IE at worst would render it weirdly. Netscapes habit of crashing probably set back CSS adoption for several years, since you couldn't even introduce CSS as an optional enhancement. It was the right thing to do. CSS and javascript just slow down the computer and run malware.
- Boltgolt 5y agoThat's a hot take. Pretty impressive that you're able to ignore decades of innovation and increased accessibility to tools because of JS & CSS.
- phist_mcgee 5y agoAh RMS! Cool of you to drop by...
- valenterry 5y agoThe idea of CSS is great, but it's about time for CSS as a language to improve drastically - currently (even with the latest changes) it is just not powerful enough to be used directly instead of being generated or used in combination with javascript. I wish for the day where I can really just write clean semantic html and then add the CSS afterwards on top of it.
- FrontAid 5y ago> I wish for the day where I can really just write clean semantic html and then add the CSS afterwards on top of it. What exactly is stopping you from doing just that today?
- deleted 5y ago[deleted]
- dgb23 5y agoFor certain layouts and CSS features to work you need to add structure for it AKA additional tags, typically divs and spans because they have no meaning in terms of your document. So your document becomes a mix of semantic structure and then wrappers, containers, pushers, purely visual areas and so on. Also you're going to have things that are specifically redundant for your use-case, but you still add them for consistency and re-usability. CSS would have to be quite a bit more powerful to achieve a clean separation of document structure and layout. It would need things like purely visual grouping mechanisms, reactive or backtracking selectors and HTML itself would probably need to be either a relational or graph structure instead of a tree to actually convey the semantics correctly and consistently.
- apples_oranges 5y agoMy first contact with CSS back in the days: http://www.csszengarden.com http://www.csszengarden.com
- blacktriangle 5y agoSometimes I think csszengarden did more harm than good. It was a huge influence as far as letting people see how much you really could do with straight CSS, but on the other hand it also pushed this notion of totally reskinable web sites where you could just swap stylesheets that has never quite materialized.
- jandrese 5y agoI recall going to csszengarden to figure out how they were doing layout and seeing a whole lot of stuff like left: 400px. size: 600px in the examples. That sort of fixed layout was exactly the sort of thing I was trying to avoid.
- pastelsky 5y agoHaving worked in multiple platforms — web, native desktop and mobile, it still amazes me how far ahead CSS is as a styling paradigm in terms of expressiveness and power! Infact, it's the best language for styling content ever created. Think about this the next time you have to create a couple of XML files just to get round corners and shadows in Android.
- pjmlp 5y agoGiven the power of XAML styles and templates I respectfully disagree.
- tasogare 5y agoYes, XAML was (is?) quite nice to create interfaces, with notably grid and components support years before CSS got them. It has its pain points (including the different incompatible implementations) but I always did somewhat OK designs faster with it than I ever did with CSS. Android AXML is indeed a (bad) joke though.
- habosa 5y ago+100. I did Android dev for like ~7 years and recently have been doing more Web dev. Yes CSS is a tricky language but I always get where I am going. On Android I frequently have to give up and settle for a more vanilla style because what I want to do will require like 1000 lines of code copied from StackOverflow. Even something as simple as "A rounded EditText with inset shadow" is hours of work. With CSS that's two lines.
- toyg 5y agoTwo lines today. CSS has come a loooong way... One could argue that the main advantage of CSS is that is a living standard, constantly adding and improving features and seeing a competition between implementations; whereas more traditional technologies are typically mono-vendor and, for one reason or another, have long stagnated.
- 5y ago
- codeulike 5y agoSounds like a custodial sentence
- qolop 5y agoFor those who want a fresh perspective on CSS, layout and styling, check out this talk by Matthew Griffith - the creator of elm-ui https://youtu.be/Ie-gqwSHQr0 https://youtu.be/Ie-gqwSHQr0
- open-source-ux 5y agoI will never like CSS and cannot share any fond memories of it's development. Modern CSS is bearable with features like Flexbox and Grid, but CSS will never be able to hide how inelegant, clunky and sprawling it is. You could write an entire book on CSS 'gotchas' - from specificity to box-sizing to inheritance. The list of topics is endless. There are also dozens of different ways of writing CSS (by design) which is why you never see two or more people write it in the same way. Why did a "style sheet" language incorporate animation into its already bloated feature set? (Not convinced by the argument that animation = appearance and thus fits into the scope of CSS.) It's a bit ironic that modern CSS features let you finally drop horrible CSS hacks from the past like floats. And yet, developers are not taking advantage of modern CSS features like Grid (which greatly simplifies layout). CSS frameworks often don't take advantage of these modern features either. In fact, modern CSS makes it easier to write plain CSS without the use of a CSS framework. But is there anyone left who isn't using a framework?
- oneeyedpigeon 5y agoFloats were never a 'hack'. There were hacks that used floats to achieve layouts they weren't intended for. But the flowing of text around a floated element was a required tool that floats enabled.
- blacktriangle 5y agoDevs will catchup with the whole we don't need frameworks thing, but it'll take a few years. I'm not going to go and rip the frameworks out of my existing apps just because I don't need them now, that doesn't really generate any value. It's like jQuery, it was easily 5 years between when we no longer needed it and when we finally started dropping it.
- brailsafe 5y agoI don't know why you're not convinced about animation = appearance, but I do agree about frameworks. I've never used one enough, partly because I immediately found they sucked for replacing anything I could much more easily do manually, such as grid.
- torh 5y ago> All those table tags just felt… wrong. Icky. And yet, I could readily see how not using tables hampered my layout options. I used the Wayback Machine (Thank you, Internet Archive!) to dig up some of my old designs, and boy, I used tables for all it was worth, and then some. Unlike Mr. Meyer, it didn't feel wrong. But again, unlike Mr. Meyer, 25 years ago I was ... let's just say "young", around 13-14. I'm planning to write a small blog post about it some day, because the amount of tables I used for a simple heading is just staggering. It must be at least a full page (in 800x600) for just a simple header. I don't think I can explain how or why without actually posting screenshots.
- mjburgess 5y agoIf you think of a table as a discrete coordinate system then it's fairly obvious. You wanted to position things at specific coordinates, and have the browser take care of padding/flowing/etc. A table is a natural choice.
- zozbot234 5y agoThat's what CSS Grid is for.
- TedDoesntTalk 5y agoCSS Grid was not released until many years later.
- TedDoesntTalk 5y agoAt the time, there was serious rage against using table for layout. Everyone had to do it at some point if you wanted proper spacing of elements. Table was one of the only ways to do it and, as you say, a natural choice. But you could easily lose at a job interview if you were a proponent of this.
- goto11 5y agoThere were always tradeoffs involved. A site might be legally required to be accessible, or it may be a business decision. Layouts hacked together with floats were a mess to create and maintain, but tended to adapt better to mobile displays. A competent front-end developer should understand pros and cons and be able to handle both approaches. Even today you might have to support old internet explorer, so you cant use display:grid. Of course incompetence can be present on either side of the table in interviews. I have heard about people avoiding display:table in CSS because they heard tables were bad.
- forgotmypw17 5y agoTables are awesome and reliable across about 25 years of software across different vendors and development models... Pretty impressive, if you ask me. I'm choosing tables too. And CSS.
- goto11 5y agoTables were never reliable as a tool for layout, since the rendering algorithm was never specified in detail. IE just tried to reverse-engineer Netscapes rendering, Mozilla reverse-engineered IE and so forth. Now if you add 1x1px spacer gifs, then you get more consistent control. But you also would have to be a masochist.
- mlvljr 5y agoQML folks, QML.
- Inspiringer 5y agoHis book "CSS The Definitive Guide" really helped me understand of the many quirks and inner workings of CSS that wasn't really obvious and intuitive. Highly recommend it.
- ubermonkey 5y agoThere is a long list of folks who I'll never meet, but for whom I'd love to buy a beer, and Meyer is at the top. After the dot-com crash I found myself coding again, and fell into CSS with his book, and managed to carve out a spot for myself as a bit of an early CSS guru in my professional network. Doing that saved my house, quite literally. CSS can be gnarly and frustrating. This was even MORE true back then when you basically had to create parallel implementations of the same layout to support IE's willfully wrong interpretations of the box model (oh, and its bugs). But it beat the everliving crap out of what came before. I've long since left that part of my career -- I mostly talk and tell people what to do now -- but I'll always love CSS a little for that period of my life.
- JoeCianflone 5y agoFunny story: I went to An Event Apart in NYC years ago (I think they’ve only had 1 in NYC) and I’m enamored by the people around me and Eric Meyer grabs the seat next to me while Zeldman is on stage and he’s quietly kind of heckling him (like a friend would not in a bad or mean way…and he couldn’t hear it). I’m sitting there, next to a person I very much admired, like Troy meeting LeVar Burton in Community trying to no freak out. It’s hard not to understate the impact Meyer, Zeldman, and A List Apart had on general front end development.
- playingchanges 5y agoI sat at a lunch table with Eric at an Event Apart SF a couple years ago, super friendly guy. Really recommend that conference I had a great time.
- axilmar 5y agoWhile it's good technology, it could be improved quite a lot. There are still quite a few gotchas/peculiar things in it.
- CharlesW 5y agoFun game idea: Make a list of technologies this response doesn't apply to.
- mikeg8 5y agoThat's always my thought as well. People become comfortable with the hacks/quirks of their dominant language(s) and forget about them when comparing to something exotic like CSS.
- thehappypm 5y agoReminds me of Darryl in The Office saying generic things that they could use for sound bites: "This person has really gotten him (or her) self into quite a predicament".
- claylevering 5y agoAnd it still sucks.
- 0xbadcafebee 5y agoDo people still manually craft CSS and HTML just to make a page layout? That's like writing VBScript to create a Powerpoint presentation. Why do we use a WYSIWYG for literally every other rich text document, but not web pages? Are we really that bad at changing what we're familiar with?
- hypertele-Xii 5y agoDon't know about others, but my web pages aren't just rich text documents. Sometimes they require programmatical definition of rendering dynamic data sets. As for the general case, every website is different enough that no general-purpose GUI/WYSIWYG exists that could cater to every need, I guess.
- bliteben 5y agoMost small sites are going for wysiwyg through platforms like wix /squarespace / shopify, Why there is not a great open source version of this is another question? I suspect some snobbery is involved.
- progmetaldev 5y agoI think there's a happy medium where you have validly marked up templates, and then give your end users rich-text editors to create their WYSIWYG content.
- jandrese 5y agoMost people just use the templates provided in their Wordpress theme these days.
- deergomoo 5y agoPlenty of stuff is still pretty unintuitive in CSS (why do I set `min-width: 0` to stop a flex/grid item overflowing? That doesn't make a lick of sense) but it's in a pretty good place these days. Flex and grid make the majority of responsive layouts a breeze and the some of the new filter stuff is super powerful, just a shame it took 20+ years to get it. Now let me transition to and from `height/width: auto` damn it.
- chearon 5y agoI often have to set `min-width: 0` if it's a flexbox inside another flexbox. `min-width` defaults to `auto` which means the smaller of the `width` on it and its content width. The content width of a flexbox (being checked here as a flex item) is not defined as the smallest width it could be without overflowing, though. It's based on the content widths of _its_ flex items, regardless of whether or not you put `min-width: 0` on those [1]. So even if that inner flexbox can shrink below the items content width, its default minimum size will be larger than that. It feels wrong when you have to do it, but it also preserves the meaning of minimum _content_, and it might be what you want in other situations. Width/height: auto require a layout to know the size, so I don't know if we'll ever get that either. [1] https://www.w3.org/TR/css-flexbox-1/#intrinsic-main-sizes https://www.w3.org/TR/css-flexbox-1/#intrinsic-main-sizes
- deergomoo 5y agoThat was a very good explanation, thank you. > Width/height: auto require a layout to know the size, so I don't know if we'll ever get that either Surely the browser ultimately knows what the size is going to be?
- chearon 5y agoIt does but only after a layout. Interpolating from `height: 0;` to `height: 10px` is easy, but interpolating to `height: auto` takes an additional layout. I always assumed that you can't do this either for performance reasons or because it would be really hard to implement.
- krumpet 5y ago20 years ago I took a job as a high school computer science teacher. CSS and JS was just taking off and I was fortunate to be in the right place at the right time to teach a bunch of teenagers all about it. Huge thank you to Eric, Zeldman, Shea, Jeremy Keith (DOM Scripting), etc. for their contributions. Their publications and answers to my emailed questions helped me set my students up for the future of front-end development. I chuckle recalling all the tricks we had to learn/use to get our pages to work across all browsers and my insistence that all pages validate to receive full credit!
- mgr86 5y agoNice, I graduated highschool in 2004 and wish I had teachers that were clued into that. Bought Zeldman's book on web standards in 02-03 ish. And basically was allowed an independent study to work on my "websites" as the teachers had no idea. I recall a strange argument where they insisted on HTML tags being uppercase.
- obiwanpallav1 5y agoNode.nodeName returns the HTML elements' uppercase name. Not sure why though.