Which ones are you referencing, and what is their market share? At some point, the team needs to decide if losing X% of the market due to new technology is worth it.
"Flexbox — Getting warmer, but would result in a bunch of extra div elements that act only as containers for the actual content"
I feel like I'm the only person who thinks most of CSS grid can be accomplished easily using `flex-grow` and `flex-basis` and it doesn't add that many extra divs. Grid certainly looks more semantic though.
Flexbox handles wrapping pretty elegantly without specifying breakpoints.
More to the point, why wasn't a two dimensional layout standard with nice syntax proposed and implemented as a top priority circa 1998 when it was obvious this was how people wanted to design websites, in which case browsers might have caught up by now?
Say what you like about HTML tables being The Wrong Way To Do Layout Because That Is What CSS Is For, you didn't need to use polyfills or star selector hacks with them...
I pushed back against CSS for a long time because people were telling me that HTML tables were evil and that I should use CSS (the original) instead. So I tried rebuilding my simple three column autoscaling (the left and right columns were fixed size, the middle filled all of the remaining space) website and after waving many dead chickens I still wasn't completely happy with the results. People were pointing to stuff like CSS Zen Garden layouts that had oceans of wasted space on large screens and completely broke on small screens.
Plus the documentation was written in this incredibly formal style that was very difficult to read and browser support was all over the map. In the end I went back to tables and just used CSS to set fonts and colors. Even more amazingly, CSS2 still sucked at this very obvious problem! But at least by this part people had figured out slightly less hacky workarounds (still with tons of clear: both though) that let one remove HTML tables while still retaining some sanity.
Besides technical challenges I'm not privy to, there's this quote which might help understand why it took so long:
"Actually, this was a request for this one early on in the CSS1 days as well. Me and my aesthetic thinking, I'm not a designer. You have to know that. But to me those rounded things; they look like something from the 1970s. I said, 'Nobody is ever going to need rounded borders on something.'"
What's with all these articles about CSS grid within a few days? I feel like someone who really doesn't like Bootstrap is paying for people to insist that CSS grid is ready for production.
78.08% global usage, and that's if you use autoprefixing.
That's just pathetic. I'm as much a fan of CSS grid as the next person, but no way I'm going to build a site or an app with it only to have my boss yell at me because ~20% of the audience says the design looks like garbage or doesn't work.
But 80% availability is also pretty weak. Especially for CSS stuff where fallbacks are usually hard or impossible to implement cleanly.
This isn't javascript where you can just throw a polyfill (and even there, you're usually trading in multiple kilobytes of polyfills for a random feature you could easily have worked around.)
Once you need to support IE11 and have designers/QA that want the product to look as designed, it is not possible to use a less sophisticated layout for non-supporting browsers only.
Instead, the layout implemented so that it works in all common browsers including IE11, and I don't need CSS grid anyway (I'm not implementing the layout twice, with all the potential bugs that can happen)
Not to mention the extra overhead of supporting two forms of layout for the purpose of implementing a developer convenience, the point of which is defeated by having a fallback. (lolwut)
78% is not pathetic. All major desktop browser versions support it. It's only a ~4% different prefixed vs not. For where it fails, use flexbox and css as fallbacks. The time I've saved using grid and having to deal with fallbacks far outweighs the thought and effort I'd have to put into the same layout otherwise.
You don't need to worry about UC browser if you aren't in China (that knocks several other browsers > 1% "global" share too). Opera Mini + IE11 is ~5.5% unsupported.
Create something that works on mobile, then use grid to build outwards. Then you get reasonable views on unsupported platforms (the mobile-centric view, and most platforms that don't support grid are Mobile) and grid works where it can / needs to.
IE11 will -never- support grid. Don't let that hold you back! (Unless you're specifically developing for an IE11-rich market)
Most North American, South American, European and African small businesses have zero business relationships when it comes to selling into China. EU exports to China, for example, are a mere ~$210b - with zero growth for several years - vs the $17t size of the EU economy. That's about 1/3 smaller than the size of Canadian imports from the US.
So it very much depends on your use case, as always. Mostly what China is looking to do is export and acquire, they've shown a very low interest in importing in any broad sense. Most businesses around the world will never have meaningful access to selling into China, unless their economic approach radically changes.
Speaking from Germany point of view, lots of companies do care about specific browser versions, some of them are only now transitioning to IE 11 on their minimum requirements RFPs.
That is until your boss's boss from up above complains that the web app you've built for them isn't working on their Windows 7 computer. I would normally agree with quickly dropping support for the old web, but then I'm forced to balance that with the dirtiness of mobile/feature detection for CSS, in which case I would choose to use the CSS that will just work for the situation at hand.
1) IE11 correctly handles `@support (display: grid) {}` (in that it recognizes it does not support it, because IE11's spec-inconsistent implementation is prefixed), which means CSS feature detection for grid works and is easy.
2) IE11 has an -ms- prefixed implementation of grid, it's just somewhat inconsistent with the final spec. That said, it's also rather feature complete comparatively, so if you must support IE11, and must give it grids, there is an option to use IE11's native grids as a terrible fallback.
3) Windows 7's extended support ends January 2020. There is less than two years left of security patches left for Windows 7. If your company isn't already planning to migrate to something more recent than Windows 7, time is ticking.
There is a saving grace here, which is that almost nobody who would ship a new grid-based design today is shipping only one layout. They're shipping a family of layouts for different devices.
And once you have a family of layouts, it's not a big deal to add one more layout that covers non-grid-capable browsers.
The design choice that makes this all tenable is to accept that the site isn't supposed to look identical across every browser. You're accepting that you'll do progressive enhancement of layout. Old browsers still get all the content, they will just get it in a more boring format (like all stacked into a single column).
What does the title have to do with the article? It links to [1] which seems like a reasonable justification for the title, but it's just an aside. Seems like the article should have been "container divs are tech debt".
I kept waiting for the payoff of the title. What did I miss? Just that you can avoid some coordinate concerns?
That is, pixels have become a convenient coordinate space for building a site. If you are willing to actually design more with absolute positioning, many designs become much easier to build up.
Instead, we seem to always want to just be more terse, not more explicit. Take the "just float the logo" idea. Why float it? Text isn't supposed to redraw around it, so it isn't really floated into the header. Float is just quicker to type than giving coordinates.
None of which is to say the DSL that this gives isn't neat. It is. Some folks actually had DSLs like this for older sites. We just seem to jump through more hoops than makes sense to make things "float" instead of just positioning them directly.
This please. I was expecting an interesting article about why pixels are outdated and possible new displays or something and it turned out to be some huge piece about CSS?
Not the best of articles: an inappropriate title, an inexplicable contrarian example in the middle (the "wacky grid" with non-semantic markup and unreadable names) and too little emphasis on the main technical point: that a CSS grid based layout doesn't need to bother with a hierarchy of container boxes and therefore it can be much more flexible and systematic than more ad-hoc approaches.
Can anyone recommend better discussions about what uses CSS grids are good and less good for? This article suggests a strong resemblance with the GridLayoutManager from the Java Swing framework: you can do almost anything, but you'll suffer doing it.
I always get confused between css grid, and gss (grid style sheets). I always liked the constraint based approach in gss, and that it was backwards compatible via js.
Has anyone tried both? Is css grid superior in some way?
45 comments
[ 2.8 ms ] story [ 84.6 ms ] threadI feel like I'm the only person who thinks most of CSS grid can be accomplished easily using `flex-grow` and `flex-basis` and it doesn't add that many extra divs. Grid certainly looks more semantic though.
Flexbox is for one dimensional layouts. CSS Grid is for two dimensional layouts.
More to the point, why wasn't a two dimensional layout standard with nice syntax proposed and implemented as a top priority circa 1998 when it was obvious this was how people wanted to design websites, in which case browsers might have caught up by now?
Plus the documentation was written in this incredibly formal style that was very difficult to read and browser support was all over the map. In the end I went back to tables and just used CSS to set fonts and colors. Even more amazingly, CSS2 still sucked at this very obvious problem! But at least by this part people had figured out slightly less hacky workarounds (still with tons of clear: both though) that let one remove HTML tables while still retaining some sanity.
"Actually, this was a request for this one early on in the CSS1 days as well. Me and my aesthetic thinking, I'm not a designer. You have to know that. But to me those rounded things; they look like something from the 1970s. I said, 'Nobody is ever going to need rounded borders on something.'"
https://fronteers.nl/congres/2010/sessions/css3-hakon-wium-l...
https://www.folklore.org/StoryView.py?story=Round_Rects_Are_...
Look at this: https://caniuse.com/#feat=css-grid
78.08% global usage, and that's if you use autoprefixing.
That's just pathetic. I'm as much a fan of CSS grid as the next person, but no way I'm going to build a site or an app with it only to have my boss yell at me because ~20% of the audience says the design looks like garbage or doesn't work.
This isn't javascript where you can just throw a polyfill (and even there, you're usually trading in multiple kilobytes of polyfills for a random feature you could easily have worked around.)
Instead, the layout implemented so that it works in all common browsers including IE11, and I don't need CSS grid anyway (I'm not implementing the layout twice, with all the potential bugs that can happen)
One recommendation from the video the other day was also very good in this regard: https://youtu.be/7kVeCqQCxlk?t=23m45s
Create something that works on mobile, then use grid to build outwards. Then you get reasonable views on unsupported platforms (the mobile-centric view, and most platforms that don't support grid are Mobile) and grid works where it can / needs to.
IE11 will -never- support grid. Don't let that hold you back! (Unless you're specifically developing for an IE11-rich market)
So it very much depends on your use case, as always. Mostly what China is looking to do is export and acquire, they've shown a very low interest in importing in any broad sense. Most businesses around the world will never have meaningful access to selling into China, unless their economic approach radically changes.
2) IE11 has an -ms- prefixed implementation of grid, it's just somewhat inconsistent with the final spec. That said, it's also rather feature complete comparatively, so if you must support IE11, and must give it grids, there is an option to use IE11's native grids as a terrible fallback.
3) Windows 7's extended support ends January 2020. There is less than two years left of security patches left for Windows 7. If your company isn't already planning to migrate to something more recent than Windows 7, time is ticking.
And once you have a family of layouts, it's not a big deal to add one more layout that covers non-grid-capable browsers.
The design choice that makes this all tenable is to accept that the site isn't supposed to look identical across every browser. You're accepting that you'll do progressive enhancement of layout. Old browsers still get all the content, they will just get it in a more boring format (like all stacked into a single column).
It's ironic how the ASCII art doesn't translate to the site's mobile layout :p
[1] https://engageinteractive.co.uk/blog/em-vs-rem-vs-px
That is, pixels have become a convenient coordinate space for building a site. If you are willing to actually design more with absolute positioning, many designs become much easier to build up.
Instead, we seem to always want to just be more terse, not more explicit. Take the "just float the logo" idea. Why float it? Text isn't supposed to redraw around it, so it isn't really floated into the header. Float is just quicker to type than giving coordinates.
None of which is to say the DSL that this gives isn't neat. It is. Some folks actually had DSLs like this for older sites. We just seem to jump through more hoops than makes sense to make things "float" instead of just positioning them directly.
Can anyone recommend better discussions about what uses CSS grids are good and less good for? This article suggests a strong resemblance with the GridLayoutManager from the Java Swing framework: you can do almost anything, but you'll suffer doing it.
Has anyone tried both? Is css grid superior in some way?