Wow, it's been a while. Back in the days[1], it was a feat to do even a simple Faux 3-Column layout[2]. I made lots of friends and following on forums and 'mailing lists' helping and getting help with the quirks, and CSS hacks. Those in the know of such CSS hacks and their solutions got their 'guru' moments and treatments.
The ability to fully understand the CSS Box Model, and enlighten someone was the pinnacle of your CSS Ninja tactics.
There were the purists who would not write anything but in "Strict Mode". Debates on why "transitional" should be that - transitional. There were moments of triumph when Tantek[3] himself replied to your email, discussing his tan-hacks.
Then, there was my CSS mentor/superhero - Philippe Wittenbergh[4]. I would email him right away to test my work on the Mac browsers, especially with that nasty Internet Explorer for Mac. This was before I was introduced to the Mac in 2006.
Soon enough, writing up a CSS-Grid system for a project became second-nature and felt like ringing the bell. Hell, I even had a dead-simple CSS Grid that got some traction, which I later added to Github and people liked it, used it for a while.
It is such a good feeling that "Grid" is no longer just a CSS terminology to mean a setup of patterns to build a layout but now a keyword in CSS that the browser understands and do something. We have come a long way.
1. I think, the early 21st century - 2001/2003-ish.
Wow! What a throwback, I was on that CSS list and Philippe and I would do a lot of css writing and testing together, along with 'Big John'. I recall a day when this 'Dave' guy came by asking for people to check out his garden...
Ah! Dave Shea[1] is awesome. I'm a big fan. I once asked him if he would do a site design for me. Unfortunately, he was busy. He was super polite and humble.
Mezzoblue[2] was one of those source of inspiration to CSS enthusiasts.
As if you start with old browsers, you limit yourself to their capabilities.
In my experience the design of a website is often done without a browser in mind at all. A designer uses an application like Sketch or Photoshop to mock up what the site should look like, and once the client has signed off a web designer/developer figures out how to build it in a way that works in all the target browsers. Starting with what the browser can do sounds like a much better approach, but that's going to take a paradigm shift in what both designers do and what clients expect. I can't help but think that's going to limit adoption of 'new browser first' for a long while.
Another problem is if a designer used to be a web developer 10 years ago, or has limited knowledge of what's possible, and limits the design to what they think is easier to accomplish.
I prefer an uncompromised design and a designer that accepts my feedback and/or that I make adjustments if some design will take an unreasonable amount of time to implement or will have bad performance.
Create solid markup, uncluttered by additional elements that the past tells you that you need. Design your site using what Grid and other new methods have to offer. Then look at how you deal with the browsers without support, by serving them something slightly simpler.
That wouldn't work because it would rely on markup although display: table is pretty handy as a fallback for small UI elements in particular.
The grid (and flexbox) specifications define how fallbacks should work, making it pretty straightforward to create good - not identical (because what would be the point?) experiences for the browsers you need to support.
So, for example with display: table which generates anonymous boxes, the spec defines that box generation won't happen.
Tables don't work in a world that requires responsive layout. I don't want to be pinching and zooming all over the place to read content on a handheld device.
At least with tables you can view all the content and you can zoom in. There are many botched sites now where on some devices you can't scroll, or can't scroll far enough to even see all the content, or can't zoom in far enough to read it.
The only part of HN that is remotely easy to read on mobile are the homepage/etc list pages, which recently became slightly better to read sometimes (I don't know why but the new mobile-friendly scaling doesn't always kick in).
Those pages have zero need for a table based layout - they're vertical lists of stuff.
The comments threads are honestly terrible to read on mobile.
It also doesn't really have much along the lines of a "responsive layout" in the sense of one that changes (outside of scaling) with different browser sizes/shapes. (But the typical clean forum also doesn't really need one, so using "outdated" tech is fine. CSS Grid is nice because it allows to do things that weren't (easily) done before, but not everybody wants or needs them)
If you've been following CSS grid at all, or if you look up anything related to it, you'll probably encounter something written by Rachel Andrew. She's been doing an incredible job at documenting and promoting CSS grid.
In the past she wrote a CSS grid polyfill [0], but sadly it never got updated to the latest version of the spec. It'd be an easier sell if you could polyfill it reasonably on some older browsers, even if performance suffered a bit.
Right now the last holdout is Edge [1], which is funny because they were the first to ship the older spec, going back as far as IE10 or IE11. Luckily, the next version will be shipping the latest spec.
I've noticed autoprefixer [2] supports a grid option. I'd love a guide that explained any incompatibilities between the two versions. Getting a mostly working grid on IE11 and Edge would probably make it an easier sell for many.
When flexbox started growing popular there were guides showing you could support most features on IE10 and beyond with little effort if you used autoprefixer. Since there are equivalent versions of most attributes on older browsers, you just had to be aware of bugs and gotchas. For example, the default value for flex-grow, flex-shrink, and flex-basis (and their older equivalents) changed between versions, so if you always had to set them. In addition to any incompatibilities between versions, all implementations were buggy, so you had to be aware of bugs and their workarounds. Luckily, they're all well documented on the flexbugs [3] repo.
Considering grid is more complicated than flexbox, I wouldn't be surprised to find it has a few bugs. Does anyone know if there's a gridbugs repo that developers can track?
EDIT: After a quick search, I found a blog post [4] talking about supporting the older version.
The latest version of autoprefixer has the old grid support off by default, I'm not sure of a scenario in which it would be useful to be honest. The spec in IE10,11 and Edge is solid, it just is more limited than the updated spec.
wow, you can say display: grid and display: flex in css? and then flex: 1 1 200px;, grid-row-end: span 2;, grid-column: 1 / -1; What browser support these? Like is it 90% or 50%?
I'm wondering how the Bootstrap CSS guys feel about CSS Grid, having just spent enormous work on porting the Bootstrap 3 grid to CSS Flexbox. I guess right after the eventual release of Bootstrap 4 there's going to be Bootstrap 5 based on CSS Grid, making "container", "row" and other divitis optional? But that's sure going to be another sh*tload of work with all the QA and corner cases.
By setting the cell as flex with flex-direction: column. And wrapping the content in an extra div. This bothers me too, so advanced yet worse than tables in vertical alignment. Or am I missing something?
No, it's clickbaity and does not accurately depict what the article is describing. It's not dismissing grids, but encouraging the eventually-to-be-standard CSS grid.
The ability to fully understand the CSS Box Model, and enlighten someone was the pinnacle of your CSS Ninja tactics.
There were the purists who would not write anything but in "Strict Mode". Debates on why "transitional" should be that - transitional. There were moments of triumph when Tantek[3] himself replied to your email, discussing his tan-hacks.
Then, there was my CSS mentor/superhero - Philippe Wittenbergh[4]. I would email him right away to test my work on the Mac browsers, especially with that nasty Internet Explorer for Mac. This was before I was introduced to the Mac in 2006.
Soon enough, writing up a CSS-Grid system for a project became second-nature and felt like ringing the bell. Hell, I even had a dead-simple CSS Grid that got some traction, which I later added to Github and people liked it, used it for a while.
It is such a good feeling that "Grid" is no longer just a CSS terminology to mean a setup of patterns to build a layout but now a keyword in CSS that the browser understands and do something. We have come a long way.
1. I think, the early 21st century - 2001/2003-ish.
2. https://alistapart.com/article/fauxcolumns
3. https://en.wikipedia.org/wiki/Tantek_%C3%87elik
4. https://l-c-n.com/