Branching Layouts With Ease
medium.com
medium.com
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.
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
Has anyone tried both? Is css grid superior in some way?
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 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_...