23 ms·
Old CSS, New CSS (2020)
- deleted 5y ago[deleted]
- deleted 5y ago[deleted]
- edoceo 5y agoFantastic read for a geezer like me. Web-safe colour is why my logo is #336699 blue
- kingcharles 5y agoI still use web safe all over the place, because OCD.
- giantrobot 5y agoI also tend to stick with web safe colors everywhere. At the very least for my "base" colors. I also always expand them to the full pair of hex characters thanks to a bug in one of the 3.x or 4.x browsers that didn't support shortening hex colors when the characters in the pair were the same.
- agumonkey 5y agoHN source is also a testimony of css2 era. Inline attributes still present.
- nine_k 5y agoI don't see a stark difference between inline attributes and, say, tailwind CSS.
- rvense 5y agoTo me it's the other way around. If you have a class that's only used once, is it better than inline styles? To me it's worse. You've just moved it to a different file. With Tailwind, I work from the bottom up, with small composable classes, I notice common combinations and bundle them together in new classes. The end result is a lot better.
- agumonkey 5y agofair point, i was thinking about tailwind actually .. i guess it just provide shorter encoding and a few shortcuts to get done quickly (at the cost of ad-hoc names)
- 1123581321 5y agoUtility classes are typically fewer characters, can contain multiple declarations and benefit from cascading, can benefit from responsive selectors, and can be updated in one place in the code when changes are required.
- deleted 5y ago[deleted]
- rectang 5y agoNow If Only™ debugging CSS and organizing CSS hierarchies to avoid conflicts were easier...
- dexwiz 5y agoProper use of chrome dev tools will help you here. Instant feedback based on modifying css in the page is about as good as you get when debugging. The computed tab really helps also.
- extra88 5y agoAll browser dev tools are good for that. I like Firefox's slightly more that Chrome's for it, Safari's is third. I don't know if Edge is different than Chrome for write, debugging CSS.
- chilling 5y agoMan! That was a really, long and funny read. It brought me so much memories. I remeber seeing a great site around 2003 and spending night-time reading its code and trying to grab all the details on how they did it. Copy pasting its code to the Notepad and trying to replicate it in Microsoft FrontPage.
- thought_alarm 5y ago> this company Netscape had been selling its Navigator browser (to businesses; > it was free for personal use), and then Microsoft entered the market with its > completely free Internet Explorer browser, and then Microsoft had the > audacity to bundle IE with Windows. Can you imagine? I believe the larger problem was that Microsoft offered companies and OEMs discounts on their Windows license fees if they agreed to stop purchasing any Netscape software, client and server, thereby collapsing Netscape's revenue from both ends.
- conception 5y agoBeOS has entered the chat.
- dkdbejwi383 5y agoCould you expand on this for someone unfamiliar with the reference you're making?
- marcosdumay 5y agoBasically, MS offered discounts for anybody that wouldn't sell alternative OSes too. That includes OS2 (well I imagine it as aimed at it, and Be was unintentional), that IBM developed in a partnership with MS. After they settled that case, they stopped offering discount, instead they just billed Windows copies by computer sold, independently of the OS.
- aasasd 5y agoI gotten off the frontend train ten years ago. Then just the other day I decided that generating some stuff for printing in HTML should be way easier than fussing around with spreadsheets (and was right)—so finally looked up how one positions things with the flexbox. Where back in the day things were like literal masochism and still even selling your soul wouldn't get you far, now it's just ‘put these properties on your divs to tell the browser which way each of them goes’. Whoa daddy.
- bruce511 5y agoSo these days there are 3 layout choices. Table, Flexbox and Grid. The one you pick is ultimately determined by how you want it to work relative to screen size. Table is still good for making tables, that won't change layout based on screen or printer size. Very useful. For a spreadsheet type view, with strict columns and rows, regardless of screen, this might be a good option. Grid is the best alternative where the grid must adapt to screen size, but there are still clear rows and columns in the layout. Flex is more 1D than 2D, but can (easily) be coerced into 2D. It's great for things that should "flow" to fill the page. So now instead of 1 (almost always bad) option, we have 3 distinct options, but it does take some experience to figure out when to use one, and when the other. I recommend the guides at css-tricks for quick reference - I have them on speed dial.
- KarlKemp 5y agoThis is indeed something I've noticed. The discussion about browser engines seems to draw heavily on late-90s folklore while entirely missing the point: browser engines today are extremely easy to work with, in the sense that it's entirely possible to develop something on, say, Safari, and expect it to work flawlessly on Chrome and Firefox, as well. Back in the days, you had to budget twice the time to make something work in two browsers that it took for one. This is not hyperbole. You'd gain a bit from doing something the second time, but lose just as much trying to make it work in more-or-less the same way. Then, there are the complaints about Chrome: there is absolutely nothing wrong with the way Google manages Chrome, with the possible exception of what they are doing to adblocking. Their approach is to try to make the browser platform an equal among the walled gardens they fear, primarily iOS and, to a lesser degree these days, Facebook. None of the lessons of Internet Explorer apply, because the problem with IE was that it was using Windows-only extensions such as ActiveX.
- notpachet 5y agoIt was even worse than that: you often had to budget for different version numbers of the same browser, or even different versions of a single version number. I'm a little foggy on the details, but I believe IE7 would force pages into "compatibility mode" if they were hosted via intranet. I was working for the government at the time and our apps were all hosted on the agency network. It was hell.
- kingcharles 5y agoEspecially if you were doing anything clever with Javascript. You pretty much had to code from scratch for several versions of every browser. Some you could do client-side and others would have to be rendered server-side. As poster above said, you would spend half your design time on getting the thing to look/run the same everywhere. Things are a lot closer now.
- thrower123 5y agoThat's because Safari is now the laggard that IE used to be
- junon 5y agoNeeds the (2020) tag.
- pferde 5y agoYeah, I did not notice it was not a new post (although it was new, and a good read, for me). For some reason, it jumped at me as new in my RSS reader. Thanks to whichever mod added the tag! :)
- yRetsyM 5y agoSide note: the comments in this are all almost as valuable as the content itself. Remember when comments were a way people used to enhance content rather than attack or degrade it?
- deleted 5y ago[deleted]
- geektips 5y agoThank you for the reminder, I went back to read the comment section.
- warpech 5y agoI wouldn't be surprised if this ended with a smirky one-liner presented in a popular CSS framework, making a full circle from (early HTML): <H1><FONT COLOR=red>...</FONT></H1> to (Tailwind CSS) <h1 class="text-red-500">...</h1> I totally acknowledge the accomplishments that the Web standards and their implementations have made since the early days. On the other hand, while I am no Tailwind proponent, for many applications "worse is good" and Tailwind is a bridge to the straightforward beginnings of the web design.
- Dangcancer 5y agoEveryone knows Tailwind is a garbage library for garbage developers.
- deleted 5y ago[deleted]
- deleted 5y ago[deleted]
- iratewizard 5y agoRemember that text-red-500 can be changed in one place across the application and allows you to apply general design ideas to quickly build layout. I don't personally use anything like tailwind, but the self-rolled css library I do use has a whole section of one liners like "flex" or "vertical-center" that saves me hours.
- lmm 5y ago> Remember that text-red-500 can be changed in one place across the application What, so that it actually means blue and 400? That doesn't sound good for maintainability.
- colejohnson66 5y agoThat’s an odd concern. Programmers have always been able to rework things maliciously. I can redefine console.log to wipe your hard drive if I wanted to. Redefining “red” is for if you want to tweak the shade. For example, changing it from ff0000 (or whatever) to, say, cc0000. Then all the darkness values (100-900) update automatically. If “red-500” is your company color, it should be redefined in your config as “company” and write “text-company-500”. That way, if your company branding changes, you don’t have to “hack” red-500 to be blue-400; you just change the definition of “company”. They’re basically CSS variables.
- deleted 5y ago[deleted]
- mmcgaha 5y agoI am pretty much shit at using CSS correctly. I am working on a 38 page site and looking at the CSS is disgusting. The html is clean, the back end is simple and easy to understand, and the database is something to be proud of (well except where I used those seductive postgresql arrays instead of relations.) Some day though I am going to come back to make a change and that CSS is going confound me to no end.
- lloydatkinson 5y agoI recommend trying out Tailwind
- krono 5y ago> The html is clean Bye clean html
- armchairhacker 5y agoHtml can't be clean without custom components, you have to add elements to alter layout. Unless you're making a "classic" HTML page like an article, but then you wouldn't have trouble with CSS.
- pippy 5y agoTailwind is great, but ironically it is full circle in regards to OP's post. You describe the page structure in HTML using classes, much the same before CSS was a thing. This is ideologically opposed to semantic HTML where you describe what the structure is, and not how it is. Using server side frameworks hides this, as long as you don't need to write static HTML. Tailwind has plenty of hype behind it and it's good, but it also has plenty of downsides too. As long as you're aware of where it's be suited for. I think Tailwind is a CSS framework for people who don't want to do CSS.
- deleted 5y ago[deleted]
- 5y ago
- kall 5y agoI saw the examples like `<img border=0>` and kept thinking "wtf why are they using styled-system here? Is this supposed to be pseudo code?" until I realized it must be something browsers supported (and probably still do). That should date me as a web developer.
- recursive 5y agoWhat's "styled-system"? What's even unusual about this code? The border attribute is deprecated. And it's pretty uncommon to see un-quoted element attributes. Is it that?
- kall 5y agoWhat‘s unusual is that I had no idea there was ever a border html attribute, as someone who entered web dev around the time html5 was a buzzword. styled-system is a css-in-js tool that puts the css properties right on the element, just like this. A bunch of popular tools in the space do the same thing. It‘s funny in an "everything that‘s old is new again" way.
- recursive 5y agoAs someone who lived through the first round of CSS evangelism, this is amazing. That's how styling was done before it was even called "styling". It was all "bgcolor", <font>, and <table>.
- kingcharles 5y agoThat early image of Internet Explorer is very advanced. The page has a white background. When I first got into web design the page background was whatever the default color of the window control was. Usually light grey. I don't remember being able to change it?
- _HMCB_ 5y agoYou, sir, deserve a Pulitzer Prize for this. I smiled and yet shed tears of pain reading this. I worked for a web dev studio in the mid ‘90s. That was so rare. We had a partnership with a design and marketing firm because we were really the only ones in quite a wide area that knew how to code. To top it off, we were an Oracle database partner and would service big and upcoming companies. A database tied to a website, that was next level. LOL. Those were the days. I kinda miss them. Everything was new and unexplored.
- jffry 5y agoSmall quibble: at least according to her twitter account linked from the sidebar of the linked post, the author of the linked post ("Eevee a.k.a. Evelyn Woods") goes by "she/her"
- _HMCB_ 5y agoI should have looked at the username. My bad.
- mixmastamyk 5y agoMaybe she goes by "sir" also, like Peppermint Patty.
- IAmEveryone 5y agoEven after reading the Wikipedia article to find out who "Peppermint Patty" is, I don't quite understand the reference but get the impression that it may be slightly disrespectful?
- bryanrasmussen 5y agoPeppermint Patty is a character in the Peanuts comic strip, there are probably only 4 characters in the strip that if you say someone is like that character it would be taken as disrespectful. I don't think Peppermint Patty is disrespectful personally.
- 5y ago
- eCa 5y agoI still have an old personal website[1] that uses Server Side Includes. I’ve been meaning to convert it to something newer for many years, but it chuggs along. Next time I switch servers I won’t setup Apache so then it would need to be solved. [1] It maybe gets updated once a year.
- ffhhj 5y agoIf your website color scheme is dark, and you want to support the user's dark/light preference, what can you do to keep the default dark theme instead of simply inverting it?
- deleted 5y ago[deleted]
- elwell 5y agoThe nostalgia. Was waiting for a mention of "imagemap" and you delivered!
- warning26 5y ago> You see, a box (the rectangular space taken up by an element) has several measurements: its own width and height, then surrounding whitespace called padding, then an optional border, then a margin separating it from neighboring boxes. CSS specifies that these properties are all additive. I never understood why CSS picked the obviously wrong way to define the box model. Who in their right mind would ever think that "width" would refer to the inner width of a box? I'm glad they finally added box-model: border-box, but the fact that there needed to be a switch at all is ridiculous.
- nauticacom 5y agoIt's pretty silly to claim that one way or the other is "obviously" wrong. A primary objective of defaults on the web is to never hide content; if "width" specifies the width of the content itself (i.e. box-sizing: content-box), when I say "div { width: 100px }" and put an image that's 100px in that div, I never crop/lose content. You can argue one way or the other, but neither is "obviously" more correct.
- xodltus 5y ago'flex' and 'grid' appeared, and it became very convenient to draw a layout
- wly_cdgr 5y agoTwo decades of work on CSS features, frameworks, best practices, preprocessors, etc, ....and the net value add can most generously be described as "below zero". Most content is perfectly fine as plain black text on a plain white background; the rare content that actually isn't is either a media file or requires proper graphics rendering tech like canvas or WebGL, and everything in between is just a turd-polishing trash tornado void
- mccolin 5y agoThis is an amazing walk down memory lane. So thorough, too! Thank you!
- flohofwoe 5y agoI wonder how HTML would have developed if it would have been a 'compile target' (via static site generators) right from the start instead of being mainly written by hand. I bet that CSS could have been a lot simpler (similar to how RISC can be "simpler" than CISC if it no longer needs to support special instructions that make writing assembly code by hand more convenient).
- resoluteteeth 5y agoPeople were already generating html back then and the output of those programs was "simpler" in the sense the html would just have tons of complicated inline formatting attributes on each element (that was completely opaque and impossible to edit by hand), so that's what it looks like when you don't need the output to be human editable. The point of css was to fix this.